5 Ways to Spice up Your Images with CSS
Tags: BeginnerHere are a few simple tricks to add some flavor to your typical bland images. Using Photoshop to style each image can be tedious and difficult to maintain in the long run. These following CSS techniques will help you ease that pain! If you have some of your own techniques, please share them!
Drop Shadow Effect
Add a drop shadow by using a background image with some padding.HTML
<img class="shadow" src="sample.jpg" alt="" />CSS
img.shadow {
background: url(shadow-1000x1000.gif) no-repeat right bottom;
padding: 5px 10px 10px 5px;
}Double Border Effect
This technique is probably the most common one out there right now. We create the double border effect by doing the following:HTML
<img class="double-border" src="sample.jpg" alt="" />CSS
img.double-border {
border: 5px solid #ddd;
padding: 5px; /*Inner border size*/
background: #fff; /*Inner border color*/
}Framed Image Effect
Best described on www.webdesignerwall.com, this technique basically layers a transparent image on top to create this effect. For those who need to get around the IE6 PNG issue, check out my tutorial here for details.HTML
<div class="frame-block"> <span> </span> <img src="sample.jpg" alt="" /> </div>CSS
.frame-block {
position: relative;
display: block;
height:335px;
width: 575px;
}
.frame-block span {
background: url(frame.png) no-repeat center top;
height:335px;
width: 575px;
display: block;
position: absolute;
}Watermark Effect
You can add a watermark effect by lowering the opacity of the main image and allowing the background image to seep through. *Note this is just for the visual effect – To implement the protection check out the CSS Watermark Tutorial.HTML
<div class="transp-block"> <img class="transparent" src="sample.jpg" alt="" /> </div>CSS
.transp-block {
background: #000 url(watermark.jpg) no-repeat;
width: 575px;
height: 335px;
}
img.transparent {
filter:alpha(opacity=75);
opacity:.75;
}Image with Caption
Add a quick caption using absolute positioning and transparency.HTML
<div class="img-desc"> <img src="sample.jpg" alt="" /> <cite>Salone del mobile Milano, April 2008 - Peeta</cite> </div>CSS
.img-desc {
position: relative;
display: block;
height:335px;
width: 575px;
}
.img-desc cite {
background: #111;
filter:alpha(opacity=55);
opacity:.55;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
width: 555px;
padding: 10px;
border-top: 1px solid #999;
}
Không có nhận xét nào:
Đăng nhận xét