CSS3 text-shadow

CSS3 text-shadow

Impression up with a shadow on the character

Here, we put a shadow on the character, will introduce the "text-shadow".

It is basically the same as the description made in the box-shadow.


 div#t-shadow p{
     font-size:32px;
     font-weight:bold;
     color:#FFFFFF;
     text-shadow:3px 3px 3px rgba(0,0,0,0.45);
 }
Sample of text-shadow

SHADOW-shadow

In addition, here by putting a negative value, it is also possible the following expression.


 div#t-shadow p{
     font-size:32px;
     font-weight:bold;
     color:#FFFFFF;
     text-shadow:-2px -1px -2px 1px rgba(0,0,0,0.75);
     text-shadow: 0px -2px 1px rgba(0,0,0,0.75);
     text-shadow: -1px -2px -2px 1px rgba(0,0,0,0.75);
     text-shadow: -2px 0px 1px rgba(0,0,0,0.75);
 }
Sample of text-shadow

SHADOW-shadow

Furthermore not only the shadow, you can also shoot the glow.


 div#t-shadow p{
     font-size:32px;
    font-weight:bold;
    color:#FFFFFF;
    text-shadow:0px 0px 10px rgba(255,255,255,1);
 }
Sample of text-shadow

SHADOW-shadow

In this way you can representation of three-dimensional character.

In combination with other CSS, it may be more interesting representation.

CSS of Innovation

Consultant using the CSS on the front , strengthen the power of expression.

Check

CSS Contents