Adding shading and mask to a picture : Image « CSS Controls « HTML / CSS






  1. HTML / CSS
  2. CSS Controls
  3. Image

Adding shading and mask to a picture

  
<html>
<head>
<style type="text/css">
body {
  background-color: #fff;
}
div.imgholder {
  float: left;
  background: url(./css-book/dropshadow.gif) no-repeat bottom right; 
  margin: 0 7px 7px 0;

}
 

div.imgholder div {
  background: url(shadowmask.png) no-repeat; 
  padding: 0 6px 6px 0;
}

div.imgholder img { 
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #666;
  padding: 2px;
} 
</style>
</head>
<body>
<div class="imgholder">
  <div>
    <img src="http://java2s.com/style/logo.png" alt="Photo of Dad, Sara, Nick" />
  </div>
</div> 
</body>
</html>








Related examples in the same category

1.Image wrap text
2.Image floating
3.Image as list icon
4.Using huge image as background
5.Image and text
6.Huge topic image
7.Image gallary inside the sidebar
8.Image on the left
9.Image centered design
10.Fill left and right side of the content with image pattern
11.Single column with Top image section
12.Anchor hover with image background
13.List with image background
14.Flowing text around an image
15.inline images
16.Gallery Grid Demo