6 fantastiche immagini sottotitolate con CSS3

CSS3 è davvero potente. In passato avevamo bisogno di immagini o di una serie di codici JavaScript per creare un semplice effetto di transizione. Al giorno d'oggi possiamo fare lo stesso con solo CSS3.

In questo tutorial, ti mostreremo come creare didascalie di immagini con varie transizioni usando semplicemente CSS3.

dimostrazione
Fonte di download

Supporto del browser

Questa didascalia dipenderà molto dalle proprietà di trasformazione e transizione che sono relativamente nuove funzionalità, quindi sarebbe opportuno prendere nota del supporto del browser necessario per eseguire la didascalia senza problemi.

I seguenti sono i browser che supportano già la trasformazione e la transizione:

Internet Explorer 10+ (non ancora rilasciato)
Firefox 6+
Chrome 13+
Safari 3.2+
Opera 11+

Ora, iniziamo il tutorial.

Struttura HTML

Abbiamo 6 immagini; ogni immagine con uno stile di didascalia diverso.

     Semplice didascalia
  
     Full Caption
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
     Dissolvenza Dissolvenza
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
     Slide Caption
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
      Questo è ruotare la didascalia
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
 
     Didascalia stile gratuito
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

CSS di base

Prima di creare qualsiasi elemento, è sempre un buon inizio ripristinare tutte le proprietà usando questo reset CSS e dare loro i loro valori di stile predefiniti, quindi tutti i browser renderanno lo stesso risultato (eccetto forse, IE6).

Gli stili saranno separati nel file style.css, quindi il nostro file HTML apparirà pulito. Tuttavia, non dimenticare di aggiungere uno stile di collegamento all'interno del tag head per applicare le regole di styling nel file.

OK, iniziamo a disegnare l'elemento, partendo dal tag html e dall'id wrapper principale:

 html background-color: #eaeaea;  #mainwrapper font: 10pt normal Arial, sans-serif; altezza: auto; margine: 80px auto 0 auto; allineamento del testo: centro; larghezza: 660 px;

Stile casella di immagine

Applichiamo alcuni stili comuni nelle scatole contenenti le immagini. Le caselle verranno visualizzate fianco a fianco usando il float a sinistra. Si noti che abbiamo anche aggiunto l'overflow: proprietà nascosta; questo renderà nascosti tutti gli oggetti che attraversano il div.

Dichiariamo anche la proprietà di transizione su ogni immagine all'interno della scatola, nel caso in cui avessimo bisogno della transizione dell'immagine in seguito.

 #mainwrapper .box border: 5px solid #fff; cursore: puntatore; altezza: 182 px; float: a sinistra; margine: 5px; posizione: relativa; overflow: nascosto; larghezza: 200 px; -webkit-box-shadow: 1px 1px 1px 1px #ccc; -moz-box-shadow: 1px 1px 1px 1px #ccc; box-shadow: 1px 1px 1px 1px #ccc;  #mainwrapper .box img position: absolute; a sinistra: 0; -webkit-transition: tutti i 300ms out-out; -moz-transition: tutti i 300ms di alleggerimento; -o-transizione: tutti i 300ms di alleggerimento; -ms-transizione: tutti i 300ms di alleggerimento; transizione: tutti i 300ms di alleggerimento;

Stile comune didascalia

La didascalia avrà alcuni stili comuni e anche la proprietà di transizione. Piuttosto che usare la proprietà di opacità, usiamo la modalità colore RGBA con 0.8 per il canale alfa per rendere la didascalia un po 'trasparente senza influenzare il testo all'interno.

 #mainwrapper .box .caption background-color: rgba (0,0,0,0,8); posizione: assoluta; colore: #fff; z-index: 100; -webkit-transition: tutti i 300ms out-out; -moz-transition: tutti i 300ms di alleggerimento; -o-transizione: tutti i 300ms di alleggerimento; -ms-transizione: tutti i 300ms di alleggerimento; transizione: tutti i 300ms di alleggerimento; a sinistra: 0;

Didascalia 1

La prima didascalia avrà un semplice effetto di transizione che viene comunemente utilizzato per una didascalia. La didascalia verrà dal basso quando passiamo il mouse sopra l'immagine. Per affrontarlo, la didascalia avrà un'altezza fissa di 30 px e applichiamo la sua posizione in basso -30 px per nasconderla sotto l'immagine.

 #mainwrapper .box .simple-caption height: 30px; larghezza: 200 px; blocco di visualizzazione; fondo: -30px; altezza della linea: 25pt; allineamento del testo: centro;

Didascalia 2

Il secondo tipo ha l'intera larghezza e altezza della dimensione immagine / riquadro (200x200px) e la transizione sarebbe come un effetto di porta scorrevole solo che scivolerà dall'alto verso il basso.

 #mainwrapper .box .full-caption width: 170px; altezza: 170 px; inizio: -200px; allineamento del testo: a sinistra; imbottitura: 15px;

Didascalia 3

La terza didascalia avrà un effetto sbiadito. Quindi, abbiamo aggiunto l'opacità: 0 per il suo stato iniziale.

 #mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption opacity: 0; larghezza: 170 px; altezza: 170 px; allineamento del testo: a sinistra; imbottitura: 15px;

Didascalia 4

La quarta didascalia scorrerà da sinistra a destra, quindi abbiamo fissato 200 px a sinistra (a sinistra: 200 px) come posizione iniziale.

 ** Didascalia 4: Diapositiva ** / #mainwrapper .box .slide-caption width: 170px; altezza: 170 px; allineamento del testo: a sinistra; imbottitura: 15px; a sinistra: 200 px;

Didascalia 5

La quinta didascalia avrà effetto rotante. Non è solo la didascalia che ruoterà, ma anche l'immagine. È più simile al cambio di posizione ruotando.

Quindi, aggiungiamo la proprietà di trasformazione con una rotazione di -180 gradi, a meno che non preferiate ruotare il monitor per leggere la didascalia.

 #mainwrapper # box-5.box .rotate-caption width: 170px; altezza: 170 px; allineamento del testo: a sinistra; imbottitura: 15px; superiore: 200 px; -moz-trasforma: ruota (-180 gradi); -o-trasforma: ruota (-180 gradi); -webkit-transform: ruotare (-180 gradi); transform: ruotare (-180 gradi);  #mainwrapper .box .rotate width: 200px; altezza: 400 px; -webkit-transition: tutti i 300ms out-out; -moz-transition: tutti i 300ms di alleggerimento; -o-transizione: tutti i 300ms di alleggerimento; -ms-transizione: tutti i 300ms di alleggerimento; transizione: tutti i 300ms di alleggerimento;

Didascalia 6

L'ultima didascalia avrà una trasformazione in scala. Tuttavia, nelle didascalie precedenti, il testo al suo interno verrà effettivamente visualizzato insieme al passaggio di transizione .caption. In questa sezione lo faremo un po 'diverso.

Il testo apparirà dopo lo spostamento della transizione. Quindi, aggiungiamo il ritardo alla transizione sul testo, in questo caso il tag h3 e p.

 #mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p position: relativo; a sinistra: -200px; larghezza: 170 px; -webkit-transition: tutti i 300ms out-out; -moz-transition: tutti i 300ms di alleggerimento; -o-transizione: tutti i 300ms di alleggerimento; -ms-transizione: tutti i 300ms di alleggerimento; transizione: tutti i 300ms di alleggerimento;  #mainwrapper .box .scale-caption h3 -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -o-transizione-ritardo: 300 ms; -ms-transition-delay: 300ms; ritardo di transizione: 300 ms;  #mainwrapper .box .scale-caption p -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transizione-ritardo: 500ms; -ms-transition-delay: 500ms; ritardo di transizione: 500 ms;

Facciamoli spostare

Nella sezione seguente, definiremo il comportamento della didascalia quando passiamo il mouse sopra le immagini o le caselle.

Comportamento didascalie 1: Mostra.

Per la prima didascalia, vorremmo che comparisse (dal basso) quando passiamo il mouse sopra la scatola. Per affrontare questa mossa usiamo la proprietà transform e il codice CSS sotto dice alla didascalia di spostare il 100% del suo peso in cima.

 #mainwrapper .box: hover .simple-caption -moz-transform: translateY (-100%); -o-transform: translateY (-100%); -webkit-transform: translateY (-100%); transform: translateY (-100%);

Se non ottieni il punto di avere un valore negativo per translateY, potresti voler leggere prima questo tutorial per ottenere maggiori informazioni.

Comportamento didascalie 2: spostalo verso il basso.

Viceversa, la seconda didascalia si sposterà dall'alto verso il basso. Quindi, avremo un valore positivo per translateY.

 #mainwrapper .box: hover .full-caption -moz-transform: translateY (100%); -o-transform: translateY (100%); -webkit-transform: translateY (100%); transform: translateY (100%);

Didascalia Comportamento 3: Dissolvenza in entrata.

La terza didascalia è in realtà la più semplice. Quando la casella è posizionata al passaggio del mouse, l'opacità della didascalia diventerà 1 rendendola visibile e, poiché abbiamo aggiunto la proprietà di transizione nella classe didascalia, la transizione dovrebbe svolgersi senza problemi.

 #mainwrapper .box: hover .fade-caption opacity: 1;

Comportamento didascalie 4: farlo scorrere a sinistra.

Come accennato in precedenza, questa didascalia scorrerà a sinistra, tuttavia l'immagine scorrerà verso destra. Quindi, qui abbiamo 2 dichiarazioni CSS.

Il codice CSS qui sotto indica che quando passiamo il mouse sulla casella la didascalia scorrerà il 100% della sua larghezza a sinistra. Si noti che ora usiamo translateX, perché vogliamo che la diapositiva si muova orizzontalmente da destra a sinistra.

 #mainwrapper .box: hover .slide-caption background-color: rgba (0,0,0,1)! importante; -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); opacità: 1; transform: translateX (-100%);

Quando passiamo il mouse sopra la scatola, l'immagine scivolerà verso sinistra.

 #mainwrapper .box: hover img # image-4 -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); transform: translateX (-100%);

Didascalia 5: Ruota.

Questa didascalia è diversa dal resto, in quanto non si muoverà da destra o sinistra, ma ruoterà. Quando la casella è al passaggio del mouse, il div contenente l'immagine e la didascalia ruoterà -180 in senso antiorario nascondendo l'immagine e mostrando la didascalia.

 / ** Rotate Caption: hover Behavior ** / #mainwrapper .box: hover .rotate background-color: rgba (0,0,0,1)! Important; -moz-trasforma: ruota (-180 gradi); -o-trasforma: ruota (-180 gradi); -webkit-transform: ruotare (-180 gradi); transform: ruotare (-180 gradi);

Comportamento didascalie 6: ridimensiona.

Questa didascalia combinerà diversi effetti di trasformazione. Quando la casella è posizionata al passaggio del mouse, l'immagine aumenterà del 140% (1.4) dalla sua dimensione iniziale.

 #mainwrapper .box: hover # image-6 -moz-transform: scale (1.4); -o-transform: scala (1.4); -webkit-transform: scale (1.4); transform: scale (1.4);

E se hai visto il CSS sopra sotto Didascalia 6 direzione, abbiamo nascosto il testo a sinistra di 200 px. Questo codice CSS sotto dice al testo di spostarsi nella loro posizione iniziale. Quindi, il testo scorrerà da sinistra a destra contemporaneamente.

 #mainwrapper .box: hover .scale-caption h3, #mainwrapper .box: hover .scale-caption p -moz-transform: translateX (200px); -o-transform: translateX (200px); -webkit-transform: translateX (200px); transform: translateX (200px);

dimostrazione
Fonte di download

Sommario

Sebbene queste funzionalità CSS siano interessanti, ma non è ancora ampiamente applicabile, a causa delle limitazioni del supporto del browser che abbiamo menzionato in precedenza. Tuttavia, continua a sperimentare con queste nuove funzionalità, perché questo è il modo in cui modelleremo una pagina web in futuro.

Titoli di coda

Le miniature delle immagini nel tutorial sono tratte dai seguenti siti web (screenshot):

Un libro a parte
Archiduchesse
Video blog
Hongkiat
The Greeting Farm
Mark Ecko