Iphone icon set: Get more than 15000 icons FREE!

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

CSS3 box shadows, tips and examples

Comments and suggestions in here

One of the nicest properties that you can implement in modern browsers is definitely box-shadow. Using six basic values, you can create awesome things; on this quick review the author plays a little bit with each property and shows 30 different experiments that prove the great things that you can achieve with box-shadow, though the result can only be visualized in Chrome 11 +.

You can browse the different examples using the arrow keys, the CSS for object is contained into a HTML object, which makes easier to stare at every effect.

On the article you will find a complete explanation on the different properties of box-shadow (inset, left, top, blur, size, and color). There’s also a quotation regarding some other properties that were used:

  • :after and :before
  • transition
  • webkit-keyframes
  • text-shadow
  • background-image: gradient

Other points that are discussed on the post include multiple values and cutoff point. Two of the effects that you’re going to find were taken from Nicolas Gallagher and Matt Hamm. The exercise is definitely a nice source of inspiration and despite the fact that it only works on Chrome, we all know how tough is to make CSS3 work perfectly in all browsers.

Check the original article

Leave a Reply