CSS3 box shadows, tips and examples | Bypeople

CSS3 box shadows, tips and examples

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

Related Deals

Related Posts