Images with Frames for your Website

We always love when posts and articles come with attractive images which sometimes even though they are not related to the post they still give a good look! Now it’s always hard to get very good resolution images and also it’s a little tough to know the tricks of Photoshop!

So who cares, as usual let me share you some tricky info, with just some CSS and HTML code, you can have your own images in your posts/articles on your website look better than before!

How do we do it?


Image with a frame

img {
border: 10px groove #AAAAAA !important; padding: 5px;
}


Change the word 'groove' to ridge, inset, outset, double for different better effects.

Image with background Shadow

img {
box-shadow: 30px 30px #000; -webkit-box-shadow:#000 30px 30px ;
}


Give it a blur effect by, changing the code to,

img {
box-shadow: 30px 30px 10px #000; -webkit-box-shadow:#000 30px 30px 10px;
}


A dual-tone border effect

img{
border:2px solid #72a143;
padding:1px;
background:#ffeda5;
}


Peeling effect Image border
Just place a

tag,

for the image.

#img{
width:300px;
height:300px;
margin:50px auto;
position:relative;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
-webkit-border-bottom-right-radius: 36px 12px;
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
-moz-border-bottom-right-radius: 36px 12px;
}
#img:after{
-webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.7);
position:absolute;
content:'';
background:transparent;
bottom:11px;
right:10px;
width:70%;
height:70%;
-webkit-transform: rotate(5deg) skew(10deg);
z-index:-2;
-webkit-border-bottom-right-radius: 36px 12px;
-moz-transform: rotate(5deg) skew(10deg);
-moz-border-bottom-right-radius: 36px 12px;
}
#img:before{
-webkit-box-shadow: 11px 11px 32px rgba(255, 255, 255, 0.7);
position:absolute;
content:'';
background:transparent;
bottom:46px;
right:41px;
width:50%;
height:50%;
z-index:-1;
-webkit-transform: rotate(20deg) skew(45deg);
-webkit-border-bottom-right-radius: 36px 12px;
-moz-transform: rotate(20deg) skew(45deg);
-moz-border-bottom-right-radius: 36px 12px;
}


And the last (..for now) the 3D effect

img{
color:rgba(255,255,0,.7) ;
font-weight: bold;
box-shadow: 1px 1px rgba(255,128,0,.7),
2px 2px rgba(255,128,0,.7),
3px 3px rgba(255,128,0,.7),
4px 4px rgba(255,128,0,.7),
5px 5px rgba(255,128,0,.7);
}


These are a few one's you could try and have a look!
NOTE: Remember some of these are CSS3 tricks which you might not be able to view in all browsers

TIP for Bloggers
In the CODE just replace, 'img' with '.post img, .post a img' if you want these tricks only to be reflected for post images.

Image Source: wikipedia.org