Tech Wisdom » CSS http://blog.ujjwalkumar.com Its all about Zeroes or Ones Sun, 11 Sep 2011 05:19:14 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Style Images with good looking Frames in CSS http://blog.ujjwalkumar.com/2008/06/09/style-images-with-good-looking-frames-in-css/ http://blog.ujjwalkumar.com/2008/06/09/style-images-with-good-looking-frames-in-css/#comments Mon, 09 Jun 2008 08:33:47 +0000 ujjwal http://techwisdom.wordpress.com/?p=4 hey..
I was just wondering how to add a good looking frame to an image. I googled it a lot, but, couldn’t find a good enough solution.. So, I decided to use my own creativity with CSS and developed it.. Here’s the result:

CSS Example

(Oops!! its my Boss’s photo.. sorry boss! )

The code for this one is ->

In the HTML page:

<img class=”framesection“ src=”/images/urImage.jpg“/>
In the CSS File:
.framesection {
background-color:white;
border-bottom:2px solid black;
border-right:2px solid #555555;
border-width:2px;
padding:4px;
}
So, this is all thats needed to be done.. One final question: How does this stuff work?? 5 CSS attributes are used in this formatting.. background-color attribute changes the color of the frame (this div background basically).. border-bottom and border-right adds shadow like effect to the frame.. The padding is for the frame width.. border-width is for the shadow width..
Hope u enjoyed this simple tutorial..
Best of luck with your designing experience..
]]> http://blog.ujjwalkumar.com/2008/06/09/style-images-with-good-looking-frames-in-css/feed/ 1