Thursday, August 26, 2010

Shadows and Rounded Boxes on Blogger Images with CSS3


Gone are the old days when shadow boxes and rounded corners were created in Photoshop and pasted in your web site as an image. Now with CSS3 the same effect can be created in Blogger with coding.

Let's experiment with an image. Later, we can progress to the header or other element. Here is what the image will look like when you are finished adding the CSS:

Image with rounded corner and shadow box.



Image with Shadow Box only




How to do it.

Insert the image into Blogger. Now, get the CSS3 code to create the effect. I used Fetchak's excellent tutorial to get the code. It is simple and to the point. Here it is for a class called box.

.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 */
}
Since this didn't take, I inserted the styling directly into the element tag of the posting in the edit html view.

style="-moz-border-radius: 15px 15px 15px 15px; -moz-box-shadow: 10px 10px 20px rgb(0, 0, 0); background-color: yellow; color: white; padding: 10px;" width="320"

You can look at the source code of this blog and see how it was done.

2 comments:

  1. Okay, I played with the layout by changing the header element. Time permitting, I will put a background image here.

    Still puzzled as to why the css on my image didn't work in the layout. A solution is to create a div tag surrounding the image and code the div as a class.

    ReplyDelete
  2. The Blogger layout contains html and css coding which must override the css that I am trying to write.

    Two solutions come to mind - find the existing css cod for the element that I want to change or alternatively, use the important qualifier to override the existing css.

    ReplyDelete