Adding shading to the picture : img « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. img

Adding shading to the picture

      
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div.imgholder {
 float:left; 
 background: url(./css-book/dropshadow.png) no-repeat bottom right !important; 
 background: url(./css-book/dropshadow.gif) no-repeat bottom right; 
 margin: 10px 7px 0 10px !important; 
 margin: 10px 0 0 5px; 
}

div.imgholder img { 
 display: block; 
 position: relative; 
 background-color: #fff; 
 border: 1px solid #666;
 margin: -3px 5px 5px -3px; 
 padding: 2px; 
}
</style>
</head>

<body>
  <div class="imgholder"> 
   <img src="http://java2s.com/style/logo.png" alt="png" /> 
   </div><h2>Adipiscing Elit</h2>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

  <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.</p>
  
</body>
</html>








Related examples in the same category

1.Adding images and alt message with XHTML
2.Alternative Text Rendering
3.Set background to #fff for an image
4.Set padding to 4px
5.display block
6. in a
7.Set image margin top and left to negative value
8.Image block
9.image clear: left;
10.Switch image for link
11.Adding caption to Image
12.Image as a link
13.Creating an Image Map
14.Top link with image
15.Wrap text along with image
16.Using arrow image for LI
17.Use image to create line
18.Using color image to create round corner
19.Large corner image for the top bar
20.Image slide show
21.Text wrap around image
22.Image side bar
23.Text wrap image
24.Using huge image to highlight your content
25.Using image to add shading to your text
26.Image Text wraper
27.Marginal Graphic Dropcap
28.Raised image
29.Lowered text
30.Image with clear left
31.Using css to wrap text around images
32.Image map area
33.HTML Image map
34.Creating and Using Image Maps
35.shape = "rect" indicates a rectangular area, with coordinates for the upper-left and lower-right corners
36.value "poly" creates a hotspot in the shape of a polygon, defined by coords
37.shape = "circle" indicates a circular area with the given center and radius
38. indicates that the specified image map is used with this image
39.Client-side Image Map Example
40.'area' defines the clickable area on a graphic or image
41.'coords' sets the coordinates of an 'a' or 'area' element
42.'galleryimg' eliminate the appearance of the toolbar for all 'img' elements
43.'img' displays a picture or a video clip
44.HTML code for image scaling
45.'ismap': Whether the image in 'img' element is a server-side image map
46.'lowsrc' gives the URL of a low-resolution image
47.'map' specifies the coordinates of an image map
48.'nohref' indicates that the 'area' in the 'map' has no link
49.'shape' sets the shape of an 'a' or 'area' element
50.'src' specifies a URL to be loaded by the element
51.'start' specifies when a video clip should start playing
52.'usemap' sets the image map for the map element
53.'hspace' sets the space in pixels between the left and right sides of an element
54.'vspace' sets the size in pixels of the vertical margins