Use CSS sliding door technology to add shadow effects to images

Adding a shadow to an image can make the image look much more refined. In image processing software, adding shadow effects to images is very easy to implement. However, if you need to use software to process each image, it is obviously very annoying, in addition, if you need to remove the watermark one day, you have to re-process the image. The following describes how to implement the shadow effect through CSS without changing the image itself. This method was invented by Mexican designer Sergio Villarreal in 2004.
General method,CodeExample:

 <!  Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  >  <  Html  Xmlns  = "Http://www.w3.org/1999/xhtml"  >  <  Head >  <  Meta  HTTP-equiv  = "Content-Type"  Content  = "Text/html; charsets = UTF-8"   />  <  Title  > Head Line </  Title  >  <  Style Type  = "Text/CSS"  >  . Shadow  {  Float  :  Left  ;  Background  :  URL (images/bottom-right.gif) No-repeat bottom right ;  }  . Shadow Div  {  Background  :  URL (images/top-left.png) No-repeat  ;  Padding  :  0 4px 4px 0 ;  }  . Shadow img  {  Border  :  1px solid #000  ;  }  </  Style  >  <! -- [If GTE ie 5.5000]> <style type = "text/CSS">. shadow Div {filter: progid: DXImageTransform. microsoft. alphaimageloader (src = "images/top-left.png", sizingmethod = 'crop'); width: 1px; Background: None ;}</style> <! [Endif]  -->  </  Head  >  <  Body  >  <  Div  Class  = "Shadow"  >  < Div  > <  IMG  SRC  = "Cup.gif"  /> </  Div  >  </  Div  >  </  Body  >  </  Html  > 

 

Material download: http://files.cnblogs.com/likebeta/201205292522859.zip