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:
(Oops!! i missed that photo! )
The code for this one is ->
In the HTML page:
<img class=”framesection“ src=”/images/urImage.jpg“/>
In the CSS File:
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..
No comments:
Post a Comment