HOME | DD

vivienn-art — Shadows with CSS

#css #html #tutorial
Published: 2014-11-04 20:42:55 +0000 UTC; Views: 764; Favourites: 2; Downloads: 0
Redirect to original
Description It's a good thing about CSS3 that we can make shadows for texts, images, table cells. It's not hard actually, you can learn it easily. 

Text shadow:

text-shadow: 1px 1px 1px #000000;

Explanation: The first px is the horizontal position of the shadow, the second is the vertical position. The third px is the sharpness of your shadow. The color can be rgba, if you want it to be transparent, like this:

text-shadow: 1px 1px 1px rgba(0,0,0,0.5);

0,0,0 is the color, wich is black in this case, the 0.5 is the opacity, wich is 50% here. It can be 0.2, 0.02 etc.

Box shadow Outside:

box-shadow: 0px 0px 5px #000000;

Inside:

box-shadow: inset 0px 0px 5px #000000;

Or you can use one line instead of the two:

box-shadow: 0px 0px 5px #000000, inset 0px 0px 5px #000000;

Related content
Comments: 0