Nel seguente codice verrà mostrato come associare delle didascalie sulle immagini utilizzando le proprietà CSS3.
HTML
Nellesempio proposto ci sono 6 immagini su ognuna delle quali verrà applicata una didascalia (caption) differente nello stile.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<div id="mainwrapper"><!-- This #mainwrapper section contains all of our images to make them center and look proper in the browser -> <!-- Image Caption 1 --> <div id="box-1" class="box"> <img id="image-1" src="css3-image-captions/1.jpg"/> <span class="caption simple-caption"> <p>Simple Caption</p> </span> </div> <!-- Image Caption 2 --> <div id="box-2" class="box"> <img id="image-2" src="css3-image-captions/2.jpg"/> <span class="caption full-caption"> <h3>Full Caption</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </span> </div> <!-- Image Caption 3 --> <div id="box-3" class="box"> <img id="image-3" src="css3-image-captions/3.jpg"/> <span class="caption fade-caption"> <h3>Fade Caption</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </span> </div> <!-- Image Caption 4 --> <div id="box-4" class="box"> <img id="image-4" src="css3-image-captions/4.jpg"/> <span class="caption slide-caption"> <h3>Slide Caption</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </span> </div> <!-- Image Caption 5 --> <div id="box-5" class="box"> <div class="rotate"><!-- Rotating div --> <img id="image-5" src="css3-image-captions/5.jpg"/> <span class="caption rotate-caption"> <h3>This is rotate caption</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </span> </div> </div> <!-- Image Caption 6 --> <div id="box-6" class="box"> <img id="image-6" src="css3-image-captions/6.jpg"/> <span class="caption scale-caption"> <h3>Free Style Caption</h3> <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </span> </div> </div> <!-- end of #mainwrapper--> |
Da inserire prima della chiusura del tag HEAD il richiamo al foglio di stile associato alle 6 diverse tipologie di didascalie negli esempi sopra dichiarate.
|
1 |
<link href="style.css" rel="stylesheet" type="text/css" media="screen" /> |
Demo Download Info | Sito Web | Autore
pixolo ads
| Articolo pubblicato 5 anni fa nella categoria 
Pingback: TS TV Escorts from London()