Un modo molto semplice per ruotare gli elementi di una pagina del sito Web: basta applicare alcuni stili CSS. La familiarità con questa lezione ti consentirà di posizionare un ventaglio di carte aperto, foglie cadute sparse o foto eleganti in un album sulla pagina. La lezione contiene un esempio dell'implementazione di un album fotografico e prende in considerazione la soluzione per tutti i browser moderni.
È necessario
Quattro foto fino a 450 px di larghezza
Istruzioni
Passo 1
Questo esempio si concentrerà sulla creazione di una pagina di album elegante con foto ruotate.
Ho preparato in anticipo immagini (larghezza 400px) con indirizzi:
In futuro, assegneremo gli ID alle immagini in base ai loro nomi.
Passo 2
Innanzitutto, prepareremo un blocco per il nostro album fotografico utilizzando il tag div e aggiungeremo anche le foto utilizzando il tag img (ogni immagine deve essere racchiusa nel proprio tag div), in questo modo:
Si prega di notare che abbiamo assegnato un identificatore al blocco -. Con l'identificatore, possiamo fare riferimento al blocco usando css.
Passaggio 3
Successivamente, è necessario impostare gli stili CSS sul blocco. Elenco degli stili: "posizione: relativa;" - imposterà l'origine dall'angolo in alto a sinistra del nostro blocco; "margine: 50 px automatico;" - imposterà il rientro del nostro blocco "50px" sopra e sotto il resto del contenuto della pagina, nonché imposterà il rientro automatico a destra e a sinistra, allineando così il nostro blocco al centro; "larghezza: 900 px; altezza: 650 px;" - imposterà la larghezza a 900px e l'altezza a 650px, rispettivamente.
L'elenco di stili specificato deve essere posizionato in questo modo:
#foto_pagina {
posizione: relativa;
margine: 0 automatico;
larghezza: 900px;
altezza: 650px;
allineamento del testo: centro;
}
Nota l'uso di "#photo_page" - questo è il modo in cui ci riferiamo all'ID blocco.
Passaggio 4
Ora assegneremo stili generali per ogni immagine all'interno del blocco photo_page. Questi sono angoli arrotondati, bordo grigio, sfondo bianco, imbottitura e ombra esterna.
Questo creerà un effetto fotografico:
#photo_page img {
raggio di confine: 7px;
bordo: 1px grigio solido;
sfondo: #ffffff;
imbottitura: 10px;
box-shadow: 2px 2px 10px # 697898;
}
Nota l'uso di "#photo_page img" - questo si riferirà a tutte le immagini all'interno del blocco photo_page
Passaggio 5
È anche importante aggiungere uno stile breve come questo:
#photo_page div {
galleggiante: sinistro;
}
Riduce tutti i blocchi all'interno del blocco photo_page a sinistra.
Passaggio 6
La fase intermedia della lezione è stata ora completata. Se il tuo lavoro è simile all'immagine nello screenshot, non hai commesso alcun errore e puoi procedere al passaggio successivo.
Passaggio 7
Ora passiamo a ruotare le foto pubblicate. Per questo abbiamo bisogno dello stile di trasformazione. Al momento, nella sua forma pura, non viene utilizzato, ma solo con un prefisso per ogni browser all'inizio, in questo modo:
-webkit-transform: ruotare (valore);
-moz-transform: ruotare (valore);
-o-transform: ruotare (valore);
Questo è lo stile di rotazione per i browser: Google Chrome, Mazilla, Opera (rispettivamente). Invece della parola "valore", inseriremo un numero con deg alla fine, in questo modo:
90 gradi: ruota di 90 gradi in senso orario.
-5 gradi - ruota di -5 gradi in senso antiorario.
Eccetera.
Passaggio 8
Stile per foto foto_1:
# foto_1 {
-webkit-transform: ruota (5 gradi);
-moz-trasformare: ruotare (5 gradi);
-o-trasformare: ruotare (5 gradi);
}
La prima immagine viene ruotata di 5 gradi.
Passaggio 9
Stile per foto foto_2:
# foto_2 {
-webkit-transform: ruota (-3deg);
-moz-transform: ruota (-3deg);
-o-transform: ruota (-3deg);
}
La seconda immagine viene ruotata di -3 gradi.
Passaggio 10
Stile per foto foto_3:
# foto_3 {
-webkit-transform: ruota (-2°);
-moz-transform: ruota (-2°);
-o-trasformare: ruotare (-2°);
}
La terza immagine viene ruotata di -2 gradi.
Passaggio 11
Stile per foto foto_4:
# foto_4 {
-webkit-transform: ruota (8 gradi);
-moz-trasformare: ruotare (8 gradi);
-o-trasformare: ruotare (8 gradi);
}
La quarta immagine viene ruotata di 8 gradi.
Passaggio 12
Vediamo come è possibile correggere la posizione delle immagini. Ad esempio, vuoi spostare la prima immagine di 20 px dall'alto e di 10 px da sinistra. In questo caso, è necessario utilizzare lo stile del margine. Ecco il modo corretto di usarlo per il nostro caso:
# foto_1 {
margine: 20px -10px -20px 10px;
-webkit-transform: ruota (5 gradi);
-moz-trasformare: ruotare (5 gradi);
-o-trasformare: ruotare (5 gradi);
}
Si noti che il primo valore dello stile è il margine superiore; il secondo è il trattino a destra; il terzo è un trattino dal basso; quarto - trattino sinistro.
Importante: nel nostro caso il margine inferiore è uguale al valore negativo del margine superiore. Se vedi uno spazio bianco sotto l'immagine sulla tua pagina, prova a far rientrare la parte inferiore dell'immagine in modo ancora più negativo.
Passaggio 13
Il lavoro è completo, fornisco uno screenshot (tenendo conto della modifica del rientro della prima immagine descritta nel passaggio 12).
Aggiungi uno stile di rientro a tutte le immagini che non sono in una posizione adatta a te.
