About

Labels

slider

Navigation

How to add multi box-shadow and text-shadow on one element?


I've observed that many sites having multiple box-shadow,and my colleague asked me,and I said "Yeah! I got today's post."Actually it is simple to add multiple box-shadow and same I did with text-shadow in order to get the effect.But,you must know that box-shadow property is supported in IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1 and text-shadow is supported by Internet Explorer 10, Firefox, Chrome, Safari, and Opera.So lets have a look at the below pen,

Box-shadow

The above pen shows how multiple box-shadow look like.Its easy to create the effect by just giving a comma (,) after every box-shadow value.
box-shadow: value,value,value;
I've added three but you can add more.

Text-shadow

The above pen uses the same principle as box-shadow.Just the property is different.Other examples of the same property is given below,
Share
Banner

Muhammad Hamza

Themelet provides the best in market today. We work hard to make the clean, modern and SEO friendly blogger templates.

Post A Comment:

0 comments: