December 06, 2010

Simple Image Artistic Touch Using CSS box-shadow

This is a simple trick to add drop shadow to an image so it looks like floating. Drop shadow also can improve image attractiveness — see the cat image, it's shadowed using CSS. Before proceed, if you are not familiar with CSS, you can read this to have at a glance of CSS — what CSS is, and how to use it.



The CSS box-shadow declaration has 4 properties: offset-x; offset-y; blur radius; color in rgba(x, y, z, alpha) or #xxyyzz form.
box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
The -moz- & -webkit- prefixes are vendor specific. The -moz- is applicable only for Mozilla/Gecko based web browser like Firefox or Iceweasel, where -webkit- is applicable only for Webkit based browser like: Google Chrome; Safari; & Konqueror. So, to make box-shadow appeared in all kind of browser, those three lines must be declared.

Implementation

Box-shadow can be declared as in-line or internal CSS. In-line declaration is written inside the style='' properties of <img> tag. See below sample.
In-line stylesheet declaration inside <img> tag.
<img 
src='image URL'
style='box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);'
/>

Using Internal CSS class

Now, let's see how it is used separately using a CSS class. Here, our box-shadow declarations are written in a style class. Where CSS classes is declared inside <style> tag. See below.
Internal stylesheet declaration. See the box-shadows written inside “.img_shadow” class.
<style type='text/css'>
.img_shadow {
box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
</style>
To set CSS class to images, set class property to “.img_shadow” in all <img> tags. See below sample.
<img src='image URL' class='img_shadow'/>
I think internal CSS class method is easier and more effective than in-line CSS style, does it ?

In Blogger (only)

If You want to use CSS class method, You may be interested how to automatically embed Your CSS class definitions in Blogger/Blogspot. There are 2 methods You can choose either post-template or blog-template. Here, only internal CSS class method is applicable.

To put in post-template, navigate to Settings → Formatting, scroll-down You'll find “Post Template”. Put internal CSS codes in the text area and save. Next time You compose a new writing, these codes will be added automatically.

Next, to put in a blog-template, navigate to Design → Edit HTML, in the text-area find text </style> and put Your CSS codes before that text.

Remember, always check if You write the codes correctly. If not, Your stylesheet is not shown correctly — yeah that's for sure. And don't worry, typo wont make Your blog error, just visual mess, so keep practising :)