Wish CSS3 Box Shadows

Wednesday, February 1, 2012


Shadows have been around since the beginning of CSS2, however the only browser supporting them then (and continually now) was Safari. Shadows can be applied in CSS3 to borders, images as well as affecting text as well.
The CSS3 box-shadow is written box-shadow: Apx Bpx Cpx #XXX;
- Apx = x-axis
- Bpx = y-axis
- Cpx = cast length / feathering
- #XXX = colour as usual

CSS3 Box Shadow

This is a panel set with a 5 by 5 pixel box-shadow, cast by 7px.
  1. CSS3 Border Shadow
  2. #my_CSS3_id {
  3.   border: 5px solid #c4c8cc;
  4.   -moz-box-shadow: 5px 5px 7px #888;
  5.   -moz-border-radius-bottomright: 15px;
  6.   -webkit-box-shadow: 5px 5px 7px #888;
  7.   -webkit-border-bottom-right-radius: 15px;
  8. }
This effect can also be applied to images… image
An example for those on alternative browsers, not seeing the border-shadow effect..

No comments:

Post a Comment

Your Comment will be visible after approval. Post Free classified ads at www.pkbazaar.com to increase your traffic

 

Online Earning

Top Online Shopping Websites in Pakistan  earn money online online earning

Most Reading

Tags

Result Analytics

free counter