Creating a Border shadow on Image With CSS3

Creating a Border shadow on Image With CSS3 | CSS3 box-shadow

 

A lot of the usefulness of CSS, and the main function of CSS is to beautify the look of a web or blog. If we are very skilled in combining the css code and correct html structure then the simple blogger would be converted into very nice and beautiful looks. If we are serious in managing the blog, you should not just concerned with the information provided, but also the view that is presented, in order to make the visitors can feel comfortable to linger on your blog and also back again to see the development of your the blog(works in reverse). CSS3 is the next generation of CSS (Cascading Style Sheets) that was the 3rd, there are many advantages of CSS3 than previous generations, and have started to be used in browsers, some of them are Mozilla Firefox v3.6 and Safari V3, hopefully other browsers catch up to support CSS3.

You can see picture in side as an example of the CSS3 effects, well, if you are interested let's begin to make the picture has a shadow with the CSS3 effects.

1. Login to blogger> on the dashboard> go to "Design"> then "Edit HTML"
2. then find this CSS code :
   .post img {
   - - -
   - - -
   }
   Note:*Just look at the code in green above, this line (- - -) in red are the CSS definitions that can be different each template
        *And sometimes there is a green colored code enhancements, so it can be like this: .post img, table.tr-caption-container {
3. if you have found, replace the CSS code earlier as below
4. .post img {
   background:#f5f5f5;
   border:2px solid $bordercolor;
   padding: 7px;
   -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
   -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
   -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
   box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
   }