Tuesday, August 24, 2010

Box Shadows with CS3

Fetchak gives a work around to allow box shadows; found at http://fetchak.com/ie-css3/. The example also rounds corners.

Mozilla has also posted this information at its Development Center. The information there is more detailed and six live examples are given.

Remember CSS is placed either in the head or directly into the element tag. The obvious advantage of putting the Blogger CSS in the head tag is that the css can be repeatedly applied to a class of elements. For purposes of this example, I put the CSS Here is the css:

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari and Chrome */
  border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

  behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}
Let's see if it works.

First, I create a div with a class name "box". I then put the css into the element tag using style. (I am going to put the css into the layout when this works.) You will see that I added color to the background and the text, then changed the width, height and padding to make the box stand out.


Learn how to put a box shadow on a div in blogger

4 comments:

  1. The css seems to mess up Blogger. I can't go back.

    ReplyDelete
  2. Okay, it works. But styling the tag element directly is inefficient.Moreover, it seems to confuse Blogger a bit when I hit the back button.

    I will put the CSS into the layout html between the header tags.

    ReplyDelete