CSS3 image hover box-shadow effect Blogger
One of the coolest CSS3 features is box-shadow effect. Its a new way of displaying shadows simply by editing style sheets. This effect is almost easy to achieve in Photoshop as well in the CSS.You can open your blogs code in notepad++ and these few lines of code or implement it directly to the blogger dashboard.
At the first i was thinking that it is Jquery trick when i saw a foliogrid template (awesome).
I was looking for a blogger hack, but couldn't find it,so i decided to write it by myself.
Now find .post img (it may differ in templates) and just after this code add following lines:
padding: 5px;it wil add a border around the image.
border: solid 1px #EFEFEF;
and after .post img ending (styles usually ends with: } ):
.imgshadow .post img:hover {Now you can save your template and look at your results.
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}
Now find ]]> and just before/above add the following piece of code:
.imgshadow {
padding: 5px;
border: solid 1px #EFEFEF;
}
imgshadow:hover {border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}
And every time when you want to use it go to text editor Edit HTML tab and ad a class attribute just like in the example below:
class="imgshadow" href=""><img src="target URL Here" width="100px" height="100px" border="0px" />
You can see working example of the image and pull-quotes when hovering in:
Note. This CSS3 effect is supported by FireFox, Chrome and Safari, but i have added few lines that it makes possible to see another effect if your visitor is using IE. But you can add a nice plugin from freethefoxes in your page code so that make sure that this hack and other is seen by every visitor.
There is also nice button maker at dryicons
There is also nice button maker at dryicons
Thanks for reading. I hope you find this article useful. You can ask any questions in comment form.