Scribd
Upload
24 views

CSS Codes

Drop Shadow Effect Add a drop shadow by using a background image with some padding. Double Border Effect This technique is probably the most common one out there right now. Watermark Effect You can add a watermark effect by lowering the opacity of the main image and all owing the background image to seep through.

Uploaded by

deep_111
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
24 views

CSS Codes

Drop Shadow Effect Add a drop shadow by using a background image with some padding. Double Border Effect This technique is probably the most common one out there right now. Watermark Effect You can add a watermark effect by lowering the opacity of the main image and all owing the background image to seep through.

Uploaded by

deep_111
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

Drop Shadow Effect Add a drop shadow by using a background image with some padding.

HTML Code <img class="shadow" src="sample.jpg" alt="" /> CSS Code 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 th e double border effect by doing the following:

HTML Code <img class="double-border" src="sample.jpg" alt="" /> CSS Code 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 tra nsparent image on top to create this effect. For those who need to get around th e IE6 PNG issue, check out my tutorial here for details. HTML COde <div class="frame-block"> <span>&nbsp;</span> <img src="sample.jpg" alt="" /> </div> CSS Code .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 all owing the background image to seep through. *Note this is just for the visual ef fect To implement the protection check out the CSS Watermark Tutorial.

HTML Code <div class="transp-block"> <img class="transparent" src="sample.jpg" alt="" /> </div> CSS Code .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 Code <div class="img-desc"> <img src="sample.jpg" alt="" /> <cite>Salone del mobile Milano, April 2008 - Peeta</cite> </div> CSS Code .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; } *************************************************** Scroll bar Color <style type="text/css"> /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ html, body{ scrollbar-face-color:#EBF5FF; scrollbar-base-color:#EBF5FF; scrollbar-arrow-color:black; scrollbar-track-color:#F3F3F3; scrollbar-shadow-color:#EBF5FF; scrollbar-highlight-color:#EBF5FF; scrollbar-3dlight-color:#78AAFF; scrollbar-darkshadow-Color:#78AAFF; } </style>

You might also like