Ruota e maschera perfettamente le miniature con CSS3

Hai mai visto un sito Web che mostra miniature di immagini che sono leggermente ruotate? È un effetto semplice che aggiunge uno strato di personalità visiva. Dicendo che, se non stai raggiungendo l'effetto di rotazione con i CSS, stai lavorando troppo! Impara come farlo bene!

Tutorial ripubblicato

Ogni poche settimane, rivisitiamo alcuni dei post preferiti del nostro lettore da tutta la cronologia del sito. Questo tutorial è stato pubblicato per la prima volta nell'agosto del 2011.

introduzione

Le gallerie di immagini con miniature ruotate sono piuttosto rari, ma è un semplice trucco per aggiungere stile alla tua pagina web. Tuttavia, se non viene fatto bene, il raggiungimento e il mantenimento di questo effetto a volte può rivelarsi un grosso problema!

Per ottenere correttamente questo effetto, le tue prime riflessioni potrebbero essere rivolte alla creazione di miniature ruotate in Photoshop. Tuttavia, questo può rivelarsi difficile a lungo termine. Gli svantaggi nella creazione di miniature ruotate in questo modo includono:

Consistenza angolo: Se le immagini non vengono tutte ruotate con lo stesso angolo, la consistenza visiva della pagina viene persa. Ciò significa mantenere un PSD di ogni singola miniatura correttamente ruotata con un angolo coerente. Ad esempio, puoi aprire il tuo PSD e capire che hai dimenticato l'angolo di rotazione delle tue miniature.
Generazione di miniature CMS:Se stai utilizzando un CMS (come Wordpress), probabilmente le tue miniature verranno generate automaticamente. Utilizzando il metodo PSD descritto sopra, dovrai creare e caricare manualmente ogni singola miniatura nel tuo CMS. Inoltre, se hai già un sito esistente ma desideri applicare l'effetto di rotazione alle tue miniature, dovrai ricreare tutte le miniature in Photoshop, quindi ricaricarle tutte!
Maneggevolezza a lungo termine: Supponiamo che tu abbia creato tutte le miniature leggermente ruotate, ma ora vuoi riallineare o ridisegnare la tua galleria. Ciò significa che dovrai rigenerare tutte le tue miniature. Se hai gestito le tue miniature in Photoshop, ciò significa che devi aggiustare e ri-salvare di nuovo ogni singola miniatura. Ugh.

Non sarebbe bello se potessi eseguire questa piccola rotazione con una riga di codice? Bene, puoi! Impariamo come.

Step 1: Capire il nostro obiettivo

Una breve panoramica di ciò che stiamo cercando di realizzare rivela i seguenti passi:

Creare una miniatura dell'immagine in Photoshop (non ruotata)
Inserisci la miniatura usando il img etichetta
Mascherala in modo appropriato usando i CSS (pensa alle maschere di Photoshop)
Ruota la miniatura all'interno della maschera usando CSS3

Per assicurarci che la nostra galleria degrada con grazia, i passaggi da 1 a 3 saranno realizzati usando i CSS. Il passaggio 4 (l'effetto di rotazione) verrà realizzato utilizzando CSS3.

Passo 2: Capire le dimensioni dell'anteprima e l'angolo di rotazione aumenta

Prima di creare le nostre miniature, è necessario determinare la dimensione di ciascuna miniatura sullo schermo.

Se le nostre miniature sono troppo piccole e le ruotiamo troppo di un angolo, alcuni degli angoli ci daranno uno spazio vuoto. Come questo:

Quindi, per riempire adeguatamente l'area della maschera, possiamo concludere che quanto più la nostra miniatura viene ruotata tanto più grande dovrà essere. In termini matematici, all'aumentare dell'angolo di rotazione della miniatura, anche le dimensioni della miniatura (e viceversa).

Ricorda questa chiave: la miniatura dell'immagine sarà sempre più grande della maschera immagine (dimensione della miniatura> dimensione maschera)

Un avvertimento per quelli respinti da Math

I passaggi 3-6 descrivono come calcolare matematicamente il dimensionamento proporzionato per la maschera immagine e la miniatura. Capire che non è necessario essere in grado di ruotare le immagini con il CSS trasformare proprietà. Piuttosto, il suo scopo è quello di aiutarti a capire come determinare correttamente il dimensionamento dei tuoi elementi per consentire una rotazione completa a 360 °. Questo garantisce che non rimarrai con brutti angoli vuoti.

Passaggio 3: proporzionalmente uguale

Per evitare di mostrare uno spazio vuoto nella nostra maschera, dobbiamo determinare UNO dei seguenti:

Dimensione della miniatura attuale
Dimensione della maschera immagine (porzione visibile della miniatura)

Poiché la miniatura e la maschera immagine sono proporzionalmente di dimensioni uguali, se impostiamo la dimensione di uno possiamo calcolare la dimensione dell'altro.

Passaggio 4: determinazione delle dimensioni

In questo esempio, imposteremo prima la dimensione della maschera dell'immagine. Impostando la dimensione della nostra maschera immagine possiamo usare un po 'di matematica per calcolare la dimensione della miniatura:

Determina la dimensione della maschera immagine: 180x240 pixel
Trova la lunghezza del lato diagonale
- Usa il teorema di Pitagora (a² + B² = c² )
  - Il nostro primo lato (a) è 180 px
  - Il nostro secondo lato (b) è 240 px
  - Quindi, 180² + 240² = c² (lunghezza diagonale)
  - 90.000 = c²
  - 300 = c (prendi la radice quadrata di ciascun lato)
- La nostra lunghezza diagonale (c) è uguale a 300

La lunghezza diagonale è un numero importante. Per consentire alla nostra anteprima di girare a 360 °, il suo lato più corto deve essere uguale al lato più lungo della maschera dell'immagine. (Anche se potresti non averne bisogno, il provisioning per la rotazione di 360 ° consentirà di apportare modifiche future all'angolo di rotazione senza dover ridimensionare le miniature).

Passaggio 5: calcolo delle dimensioni delle miniature

Come puoi vedere, il lato più corto della nostra miniatura deve essere uguale al lato più lungo della nostra maschera. Se non lo è, resteremo con lo spazio vuoto. Ricorda: la dimensione della miniatura è proporzionalmente maggiore della dimensione della maschera dell'immagine.

Calcolare le dimensioni della miniatura in modo che si adatti correttamente è facile una volta che conosciamo le dimensioni della maschera immagine. Semplicemente prendiamo il lato più grande della maschera (la diagonale) e lo lasciamo uguale al lato più corto della nostra miniatura.

Il lato più grande della maschera (300) è uguale al lato più corto della miniatura (x)
Usa le relazioni proporzionate per trovare la lunghezza della miniatura
- 180: 300 (altezza maschera: altezza miniatura)
- 240: y (lunghezza della maschera: lunghezza della miniatura)
Croce moltiplicare per risolvere
- 180y = 72.000
y = 400 (lunghezza della miniatura)

Abbiamo ora determinato la nostra maschera e le dimensioni delle miniature. Sappiamo se la nostra maschera immagine è 180x240px, che la miniatura dell'immagine all'interno di quella maschera deve essere 300x400px per consentire la rotazione di 360 °.

Una nota felice: Poiché la maschera di immagine e le dimensioni delle miniature sono proporzionalmente uguali, questa matematica funzionerebbe anche se prima impostiamo la dimensione della miniatura! Useremo lo stesso teorema di Pitagora e le relazioni proporzionali per determinare le dimensioni corrette.

Passaggio 6: infine alcuni HTML

Ora che conosciamo tutte le nostre dimensioni, creiamo le miniature ruotate iniziando con un codice HTML di base.

    Miniature ruotate con CSS3     Miniature ruotate con CSS3
 Angolo di trasformazione:     Solo valori numerici

Questo markup HTML di base inserisce quanto segue:

- Ciò consentirà all'utente di cambiare l'angolo di rotazione. Inoltre, abbiamo impostato il nostro valore attributo uguale alla stessa quantità che verrà inizialmente impostata nel nostro CSS (15 in questo caso).
- Questo messaggio di errore verrà nascosto alla vista. Usando jQuery, lo mostreremo se l'utente inserisce qualcosa oltre a un numero nella casella di input.
- Queste sono le nostre miniature che possono essere collegate a qualsiasi cosa tu voglia.
clear: both - Cancella le nostre miniature fluttuanti
class = "maschera" - La classe per la nostra maschera immagine

Passaggio 7: Stile della pagina di base CSS

Applichiamo uno stile di base alla nostra pagina per dargli struttura e semplicità.

 body margin: 0; padding: 0; sfondo: #eee; famiglia di font: Ginevra, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif;  #wrapper width: 840px; margine: 0 auto; sfondo: #fff; border: 1px solid #ccc; padding: 25px; border-top: none;  #error_message color: red; display: none; font-size: .8em;

Nota qui che abbiamo nascosto il nostro messaggio di errore per impostazione predefinita, la commutazione verrà attivata più tardi in jQuery.

Aggiungi alcuni effetti CSS3

Aggiungiamo qualche altro dettaglio per migliorare il nostro stile di base

 # wrapper border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; box-shadow: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc;

Ora il nostro contenuto è centrato con una buona spaziatura e alcuni effetti CSS3 per uno stile di pagina ottimizzato.

Passaggio 8: Maschera di immagine Styling CSS

Applichiamo la maschera immagine alle nostre miniature. Nel nostro HTML, abbiamo avvolto ogni miniatura in un tag di ancoraggio e gli abbiamo dato una classe di maschera che useremo nel nostro CSS.

 .maschera posizione: relativa; altezza: 180px; larghezza: 240px; float: sinistra; overflow: hidden; margin: 15px; border: 5px solid # f6f6f6; box-shadow: 0 0 1px # 000; -moz-box-shadow: 0 0 1px # 000; -webkit-box-shadow: 0 0 1px # 000;

Ecco una descrizione delle proprietà CSS che abbiamo usato (e del perché le abbiamo usate):

position: relative - Nostro img i tag saranno posizionati assolutamente all'interno della nostra maschera immagine
altezza, larghezza - In precedenza abbiamo determinato le dimensioni della nostra maschera di immagine. Questo è dove mettiamo quelle dimensioni.
float: sinistra - Galleggia le nostre immagini in modo che appaiano in una forma di galleria.
overflow: hidden - Come calcolato in precedenza, le nostre miniature saranno 300x400px. Tuttavia, mostreremo solo una porzione (180x240px) di essi. Questa proprietà agisce come maschera, nascondendo la porzione delle nostre miniature che si estende al di fuori delle dimensioni 180x240.
margine - Distanzia le nostre immagini
confine, box-ombra - Questo ci dà un doppio bordo (nel supporto dei browser). Il confine proprietà ci dà un bordo spesso, bianco sporco intorno all'immagine mentre il box-ombra ci dà un bordo sottile e nero intorno al nostro bordo spesso bianco sporco.

Passaggio 9: dimensionamento CSS le miniature

Imposta le dimensioni delle miniature in base alle dimensioni calcolate nel passaggio 5.

 .mask img height: 300px; larghezza: 400px;

Passaggio 10: centratura CSS le miniature

In questo momento, le nostre miniature sono posizionate relativamente (dall'angolo in alto a sinistra).

Vogliamo che la nostra miniatura sia centrata orizzontalmente e verticalmente all'interno della maschera.

Per fare ciò, usiamo le seguenti regole CSS:

 .mask img position: absolute; margin-top: -150px; / * metà altezza * / margine-sinistra: -200px; / * metà larghezza * / superiore: 50%; a sinistra: 50%;

Ecco una descrizione di ciò che abbiamo fatto:

position: absolute - Questo posiziona la miniatura assolutamente all'interno della maschera immagine
margine - Impostiamo margini negativi che sono esattamente la metà dell'altezza e della larghezza dell'immagine (300x400), quindi impostiamo le nostre proprietà di posizionamento superiore e sinistra che riporta gli elementi nel centro perfetto.

Passaggio 11: rotazione delle miniature CSS

Useremo la proprietà CSS3 trasformare ruotare i nostri elementi. Quindi, il nostro CSS includerà tutti i prefissi del browser

 .mask img -webkit-transform: ruotare (15 gradi); -moz-transform: rotate (15deg); -o-transform: rotate (15deg); -ms-transform: ruotare (15deg); transform ruotare (15deg);

Il CSS qui è piuttosto semplice. Abbiamo appena posto il nostro angolo di rotazione tra parentesi seguito da "deg".

In questo esempio abbiamo usato 15 come valore di rotazione, ma potresti inserire un valore diverso lì. Poiché abbiamo calcolato correttamente le dimensioni della nostra maschera e miniatura, abbiamo predisposto lo spazio per una rotazione completa di 360 °! Un intero positivo ruota l'immagine verso destra, un numero intero negativo ruota l'immagine verso sinistra.

Passaggio 12: Effetto Hover dell'immagine CSS

Come ulteriore effetto, aggiungeremo una semplice linea di CSS che cambia il nostro colore del bordo quando l'utente passa con il mouse sopra l'immagine.

 .mask: hover border-color: #ddd;

Passaggio 13: jQuery Modifica del valore di rotazione in modo dinamico

Come bonus, consentiremo all'utente di inserire un valore nella nostra casella di input che modifica l'angolo di rotazione CSS. Quindi, per prima cosa, aggiungiamo jQuery alla fine della nostra pagina subito prima della chiusura corpo tag con un link al nostro script personalizzato:

Passaggio 14: jQuery Document Ready

Ora configuriamo jQuery per quando il documento è pronto:

 jQuery (document) .ready (function ($) // code here);

Passaggio 15: Funzione iniziale jQuery

Creiamo una funzione ogni volta che il nostro pulsante "aggiorna" viene cliccato.

 $ ('button'). click (function () // code here);

Passaggio 16: jQuery Memorizzazione del valore di rotazione corrente

Vogliamo memorizzare il valore numerico CSS per l'angolo di rotazione corrente in una variabile.

 var rotation_angle_value = $ ('# rotation_amount'). val ();

Questo codice trova il rotation_amount id (che abbiamo assegnato al ingresso) e ottiene il suo valore corrente. Se ricordi, impostiamo l'iniziale valore attributo uguale a 15 (lo stesso del nostro codice CSS per l'angolo di rotazione).

Passaggio 17: jQuery Using isNaN () Function

Vogliamo rendere il valore di input dell'utente il nostro nuovo angolo di rotazione. Tuttavia, vogliamo assicurarci che l'utente non inserisca accidentalmente un valore non numerico. Ecco dove il isNaN () entra la funzione javascript. isNaN () sta per "non è un numero". Questa funzione fa esattamente ciò che implica il suo nome: controlla se il valore che gli passi "non è un numero".

Quindi, useremo il isNaN () funzione e passare ad esso il nostro valore dell'angolo di rotazione (come inserito dall'utente). Se non è un numero, verrà visualizzato il nostro messaggio di errore.

 // controlla se il valore di input dell'utente è un numero o meno se (isNaN (rotation_angle_value)) // non un numero $ ('# error_message'). show (); // resto del codice qui

Passaggio 18: jQuery Aggiornamento di un nuovo angolo di rotazione

Se il valore immesso dall'utente non è un numero, abbiamo visualizzato un messaggio di errore. Ora useremo un altro dichiarazione per quando loro avere inserito un valore numerico. Per prima cosa nascondiamo il messaggio di errore.

 else $ ('# error_message'). hide ();

Poiché l'angolo di rotazione è memorizzato più volte nel nostro CSS (a causa dei vari prefissi del browser) dobbiamo aggiornare TUTTI questi valori con jQuery. Quindi, quello che faremo è memorizzare la sintassi del valore CSS in una variabile (con il nuovo valore di angolo). In sostanza, stiamo scrivendo rotate (15deg) e sostituendo il valore di '15' con il valore inserito dall'utente.

 var rotation_angle = 'rotate (' + rotation_angle_value + 'deg)';

Quindi creiamo un oggetto CSS con valori relazionali. Definiamo ciascuna delle nostre proprietà CSS (i prefissi del browser per la trasformazione), quindi inseriamo il valore come variabile appena definita.

 var updated_css = '-webkit-transform': rotation_angle, '-moz-transform': rotation_angle, '-o-transform': rotation_angle, '-ms-transform': rotation_angle, 'transform': rotation_angle,

Ora passiamo semplicemente quella variabile memorizzando le proprietà e i valori CSS in jQuery per aggiornare il nostro CSS!

 $ ('. mask img'). css (updated_css);

Passaggio 19: codice jQuery finale jQuery

Questo è ciò che assomiglia a tutto il nostro jQuery:

 jQuery (document) .ready (function ($) $ ('button'). click (function () // ottiene il valore dell'angolo di rotazione var rotation_angle_value = $ ('# rotation_amount'). val (); if (isNaN (rotation_angle_value)) // non è un numero $ ('# error_message'). show (); else // è un numero $ ('# error_message'). hide (); // memorizza la sintassi del valore CSS con il nuovo valore dell'angolo di rotazione var rotation_angle = 'ruotare (' + rotation_angle_value + 'deg)'; // memorizzare proprietà e valori CSS var updated_css = '-webkit-transform': rotation_angle, '-moz-transform': rotation_angle, ' -o-transform ': rotation_angle,' -ms-transform ': rotation_angle,' transform ': rotation_angle, // aggiorna il nostro CSS $ ('. mask img '). css (updated_css);););

Conclusione

Spero che tu abbia imparato qualcosa, soprattutto che affidarti a progetti non flessibili in Photoshop è spesso evitabile utilizzando le tecniche CSS3 direttamente nel browser. Grazie per il seguito!

Web design