Cross Browser Compatible Pure CSS 2 Text Effect

noreply@blogger.com (Anonymous) — Sat, 27 Apr 2013 10:02:00 +0000

We can not think to web design without CSS. Here I will demonstrate some text effect with CSS2.

Multi Colored Text

WELCOME

Description:

CSS property "overflow" and value "hidden" are the main technique of multi colored text. When we keep a text inside a div and we set the height & width of the div in such way that a portion of text goes outside of the div region. And if the div property and value is "overflow: hidden;" then the extended part of text over the div region will be hidden. If we want to make black color half of a text and rest half in red color then we have to overlap a div on another (The text of div and CSS text effect will be similar of two divs, only text color will be different). In example we will keep text color black in upper div and red in lower div. Then we set upper div region in such way that half of the text will stay outside of the div region and the css property "overflow:hidden;" will be add to the upper div style, ok done.

CSS Code:

#container1 {
position:relative;
margin:0px;
padding:0px;
border:0px;
width:200px;
height:45px;
font-size:36px;
color:red;
}
#inner1 {
position:absolute;
top:0px;
left:0px;
margin:0px;
padding:0px;
border:0px;
width:200px;
height:23px;
font-size:36px;
color:black;
overflow:hidden;
}

HTML Code:

<div id="container1">

WELCOME

<div id="inner1">

WELCOME

</div>

</div>

Text Shadow Effect

WELCOME

Description:

To get shadow effect of text, we will overlap a div on another, in such way that the text of div and CSS text effect will be similar of two divs and the height and width of two divs will be same also, only text color will be different. As we will create shadow effect of text so, lower div text color will black and upper div text color may be anything except black. With respect to shadow side and size, we will use CSS property "padding" of upper div.

CSS Code:

#container2 {
position:relative;
margin:0px;
padding:0px;
border:0px;
width:200px;
height:45px;
font-size:36px;
color:black;
}
#inner2 {
position:absolute;
top:0px;
left:0px;
margin:0px;
padding:0px;
padding-left:4px;
border:0px;
width:200px;
height:45px;
font-size:36px;
color:red;
}

HTML Code:

<div id="container2">

WELCOME

<div id="inner2">

WELCOME

</div>

</div>

Text Embossed Effect

WELCOME

Description:

The technique of emboss effect of text is similar of shadow effect. The different is, you have to play in color combination.

CSS Code:

#container3 {
position:relative;
margin:0px;
padding:0px;
border:0px;
width:200px;
height:45px;
font-size:36px;
font-weight:bold;
color:#ffffff;
background-color:#b4b4b4;
}
#inner3 {
position:absolute;
top:0px;
left:0px;
margin:0px;
padding:0px;
margin-top:-1px;
border:0px;
width:200px;
height:45px;
font-weight:bold;
font-size:36px;
color:#000000;
}

HTML Code:

<div id="container3">

WELCOME

<div id="inner3">

WELCOME

</div>

</div>

INNOVATION

Cross Browser Compatible Pure CSS 2 Text Effect

Multi Colored Text

Description:

CSS Code:

HTML Code:

Text Shadow Effect

Description:

CSS Code:

HTML Code:

Text Embossed Effect

Description:

CSS Code:

HTML Code:

Please Comment It and Share It