Bubbling Text Effect

HTML

[code language=”html”]

<div class="center-outer">
<div class="center-inner">

<div class="bubbles">
<h1>Bubbling Header</h1>
</div>

</div>
</div>

[/code]

CSS

[code language=”css”]

/* Non essential CSS – Just for example centering */

html, body {
width: 100%;
height: 100%;
margin: 0;
}

.center-outer {
display: table;
width: 100%;
height: 100%;
}

.center-inner {
display: table-cell;
vertical-align: middle;
text-align: center;
}

/* Essential CSS – Makes the effect work */

body {
background-color: #3498db;
}

.bubbles {
display: inline-block;
font-family: arial;
position: relative;
}

.bubbles h1 {
position: relative;
margin: 1em 0 0;
font-family: ‘Luckiest Guy’, cursive;
color: #fff;
z-index: 2;
}

.individual-bubble {
position: absolute;
border-radius: 100%;
bottom: 10px;
background-color: #fff;
z-index: 1;
}

[/code]

JS

[code language=”js”]
// Created for an Articles on:
// https://www.html5andbeyond.com/bubbling-text-effect-no-canvas-required/

jQuery(document).ready(function($){

// Define a blank array for the effect positions. This will be populated based on width of the title.
var bArray = [];
// Define a size array, this will be used to vary bubble sizes
var sArray = [4,6,8,10];

// Push the header width values to bArray
for (var i = 0; i < $(‘.bubbles’).width(); i++) {
bArray.push(i);
}

// Function to select random array element
// Used within the setInterval a few times
function randomValue(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}

// setInterval function used to create new bubble every 350 milliseconds
setInterval(function(){

// Get a random size, defined as variable so it can be used for both width and height
var size = randomValue(sArray);
// New bubble appeneded to div with it’s size and left position being set inline
// Left value is set through getting a random value from bArray
$(‘.bubbles’).append(‘<div class="individual-bubble" style="left: ‘ + randomValue(bArray) + ‘px; width: ‘ + size + ‘px; height:’ + size + ‘px;"></div>’);

// Animate each bubble to the top (bottom 100%) and reduce opacity as it moves
// Callback function used to remove finsihed animations from the page
$(‘.individual-bubble’).animate({
‘bottom’: ‘100%’,
‘opacity’ : ‘-=0.7’
}, 3000, function(){
$(this).remove()
}
);

}, 350);

});

[/code]

bubbling animation Snippet

The post Bubbling Text Effect appeared first on csshint - A designer hub.

css embossed text

HTML

[code language=”html”]

<div class="container">
<div class="circle embossed">
<p class="embossedtext">Lorem</br>Ipsum</p>
</div>

<div class="content embossed">
<p class="embossedtext">
Lorem ipsum dolor sit amet, consect adipiscing elit. Nulla placerat, arcuf sit amet interdum malesuada, nunc et nibh porta augue, non tincidunt au i metus quis neque.</br></br>Praesent sapien diam, interdum quiste pretium quis, blandit et velit. Donec in nisi quis erat varius convallis nec a felis. Integer condimentum dolor a.</p>
<p class="embossedtext icons"><i class="fa fa-twitter" aria-hidden="true"></i><i class="fa fa-facebook" aria-hidden="true"></i><i class="fa fa-pinterest-p" aria-hidden="true"></i></p>
</div>
</div>

[/code]

CSS

[code language=”css”]

body {
background: #e4e1d7;
}

.container {
max-width: 600px;
}

p {
font-family: ‘Open Sans’, sans-serif;
text-transform: uppercase;
letter-spacing: 0.25em;
font-weight: bold;
text-align: center;
}

.embossedtext {
color: rgba(255, 255, 255, 0.7);
text-shadow: -2px 2px 1px rgba(0, 0, 0, 0.4);
}

.embossed {
border: 3px solid rgba(255, 255, 255, 0.6);
box-shadow: inset -2px 2px 1px rgba(0, 0, 0, 0.2), -2px 2px 1px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}

.circle {
width: 200px;
height: 200px;
border-radius: 50%;
margin: 30px auto;
}

.circle p {
padding-top: 53px;
padding-left: 6px;
font-size: 30px;
}

img {
opacity: 0.9;
filter: grayscale(100%);
padding-bottom: 15px;
}

.content {
font-size: 18px;
padding: 15px;
}

.fa {
padding: 10px 15px 0;
}

[/code]

CSS Embossed Effect Snippet

The post Embossed Print Text Effect appeared first on csshint - A designer hub.

let’s start html with simple h1 tag. you can use class, id and what ever you want.

<h1>Hello Readers</h1>

Here is some fairly simple CSS for ‘inset’ shadow –

/*import custom font*/
@import url('https://fonts.googleapis.com/css?family=Pacifico');

body{
      background:#a4d914;
}

h1 {
      color:#fff;
      font-size:100px;
      font-family:'Pacifico', cursive;
      Text-align:center;
      Text-shadow :0 1px 0 #ccc,
                  0 2px 0 #c9c9c9,
                  0 4px 0 #b9b9b9,
                  0 5px 0 #aaa,
                  0 6px 1px rgba(0,0,0,.1),
                  0 0 5px rgba(0,0,0,.1),
                  0 1px 3px rgba(0,0,0,.3),
                  0 3px 5px rgba(0,0,0,.2),
                  0 5px 10px rgba(0,0,0,.25),
                  0 10px 10px rgba(0,0,0,.2),
                  0 20px 20px rgba(0,0,0,.15);
}

Here’s the result of this code

I hope you will enjoy this article.
Happy coding

how to create 3D Text Effect Using CSS3. css text effects , Buttons · Textfields · Text effects · Shapes · Gradient patterns

The post how to create 3d text Effect Using CSS3 appeared first on csshint - A designer hub.