CSS text shadow

The css text-shadow property allow us to create shadow for the text that we show on the screen. It create a nice effect that before this property would have need image to achieve.
The structure is the following:

<style>
   <selector>{
       text-shadow: <x horizontal offset> <y vertical offset> <blur> <shadow color>
   }
</style>

and this is how it is looked, if the values are : text-shadow: 4px 4px 4px #ccc;

The full stack developer

We can even double the shadow, we just need to separate the two shadow withe comma:

<style>
   <selector>{
       text-shadow: <x horizontal offset> <y vertical offset>  <blur> <shadow color>, <x second shadow horizontal offset> <y second shadow vertical offset>  <second shadow blur> < second shadowshadow color>
   }
</style>

And this is how it look like if the values are: text-shadow:4px 4px 0 grey, 6px 6px 0 #DEA7A7

The full stack developer

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s