Share
In questo tutorial impareremo a creare un effetto di carta piegato flessibile (reattivo) utilizzando le funzionalità CSS3 come gradienti di sfondo e ombre di riquadri, che possono dare uno sfondo interessante all'area del contenuto del tuo sito web.
Accentsconagua
Iniziamo creando una pagina HTML di base. Useremo HTML5 perché ... perché no??!
Flessibile effetto carta piegata <
Nella testa ci assicuriamo di usare il doctype HTML5, impostiamo il nostro titolo, chiamiamo nei nostri fogli di stile, utilizziamo anche il meta tag viewport in modo che il nostro effetto sia sensibile sui dispositivi mobili e tablet. Infine, c'è un polyfill per ottenere elementi html5 riconosciuti nei browser più vecchi, e c'è anche una correzione per i gradienti CSS3 per IE di cui avremo bisogno in seguito nel tutorial.
Flessibile effetto carta piegata
Ottenuto con una miscela di gradienti CSS3 e ombre di riquadri.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sollicitudin sapien quis auguste pellentesque pulvinar. Morbi non ligula eu justo posuere tincidunt sit amet id nulla. Il lectus lacus, tristique al dictum ac, porta alla magna. Phasellus est nunc, pulvinar non temporale a, condimentum vitae eros. Aliquam auctor posuere lacinia. Praesent eu risus dolor, un mollis leo. Aliquam pharetra, risus vel rutrum volutpat.Aliquam auctor posuere lacinia. Praesent eu risus dolor, un mollis leo. Aliquam pharetra, risus vel rutrum volutpat.
Aliquam auctor posuere lacinia. Praesent eu risus dolor, un mollis leo. Aliquam pharetra, risus vel rutrum volutpat.
Ora, nella sezione principale della pagina abbiamo un contenitore div che avvolge la pagina e un altro che avvolge la "carta". All'interno di questo div aggiungeremo un tag ogni volta che vogliamo una sezione piegata nel foglio. Ci sono due tipi di queste sezioni, quindi più avanti nel CSS saremo in grado di distinguere tra loro usando i selettori "dispari" e "pari". In questo modo, il nostro HTML rimane il più semantico possibile senza nomi di classi superflui.
In queste sezioni ho aggiunto alcuni contenuti; titoli e qualche testo segnaposto. Questa è una struttura di pagina normale piuttosto normale, ma abbiamo tutto ciò di cui abbiamo bisogno per creare l'effetto carta piegata passando al CSS.
Nel CSS creeremo l'effetto completamente da zero, senza immagini, solo per divertimento.
* -moz-box-dimensionamento: border-box; -webkit-box-dimensionamento: border-box; dimensionamento della scatola: border-box; body background: # 777; # page-wrap margin: 0 auto; larghezza massima: 980 px; larghezza: 100%; .paper margin: 30px auto; sfondo: # f5f4f0; larghezza massima: 960 px; larghezza: 90%; -webkit-box-shadow: 0 0 2px rgba (0, 0, 0, 0,7); -moz-box-shadow: 0 0 2px rgba (0, 0, 0, 0,7); box-shadow: 0 0 2px rgba (0, 0, 0, 0,7); h1 font: bold 50px "Georgia", serif; allineamento del testo: centro; text-shadow: 0 1px 0 #fff; margin-bottom: 20px; h2 font: bold 25px "Georgia", serif; allineamento del testo: centro;
Questi sono gli stili di base per la pagina. Dichiariamo una larghezza massima fissa e una percentuale per la larghezza effettiva per rendere flessibile l'intero elemento "carta". Gli stili di intestazione sono solo per l'esempio, ovviamente, dipende dalle tue capacità artistiche modificarli in base al tuo design.
sezione larghezza: 100%; altezza minima: 100 px; posizione: relativa; imbottitura: 30px;
Qui ci stiamo assicurando che ogni sezione si estenda al 100% attraverso il suo elemento genitore. Definiamo un'altezza minima, in questo modo se vuoi aggiungere sezioni di piega vuote come quelle che abbiamo nell'esempio, non saranno alte 0 px. Quindi dichiariamo la posizione relativa e aggiungiamo un po 'di padding, ancora una volta solo per questo design.
Nota: È molto importante dichiarare posizione: relativa; in questa sezione; ne abbiamo bisogno per posizionare gli elementi ombra che veramente vendono l'effetto.
.sezione carta: nth-child (pari) background: -moz-linear-gradient (-45deg, # e9eae5 0%, rgba (244, 245, 240, 0) 100%); background: -webkit-gradient (lineare, sinistra in alto, in basso a destra, color-stop (0%, # e9eae5), color-stop (100%, rgba (244, 245, 240, 0))); background: -webkit-linear-gradient (-45deg, # e9eae5 0%, rgba (244, 245, 240, 0) 100%); background: -o-linear-gradient (-45deg, # e9eae5 0%, rgba (244, 245, 240, 0) 100%); background: -ms-linear-gradient (-45deg, # e9eae5 0%, rgba (244, 245, 240, 0) 100%); sfondo: sfumatura lineare (135 gradi, # e9eae5 0%, rgba (244, 245, 240, 0) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# e9eae5', endColorstr = "# 00f4f5f0", GradientType = 1);
Stavolta modelliamo solo ogni elemento di sezione pari, quindi questo significa il secondo, il quarto, il sesto ecc. Applichiamo una sfumatura per dare l'impressione di un'ombra proiettata sulla carta nello spazio 3D. Questo gradiente è una delle parti più essenziali di questo design ed è importante scegliere un colore che faccia da complemento alla carta.
In questo caso il foglio era # f5f4f0 e quindi il grigio del gradiente (che sfuma diagonalmente da in alto a sinistra a in basso a destra) è # e9eae5 completamente trasparente.
Puoi utilizzare diversi strumenti per generare le tue sfumature, ad esempio:
Fatto questo, aggiungiamo alcune ombre sotto il foglio.
.paper section: nth-child (dispari): before z-index: -1; posizione: assoluta; contenuto: ""; fondo: 0px; a sinistra: 10px; larghezza: 50%; sopra: 20px; background: rgba (0, 0, 0, 0.7); -webkit-box-shadow: -10px 20px 15px rgba (0, 0, 0, 0,5); -moz-box-shadow: -10px 20px 15px rgba (0, 0, 0, 0,5); box-shadow: -10px 20px 15px rgba (0, 0, 0, 0.5); -webkit-transform: ruotare (5deg); -moz-transform: ruota (5deg); -o-trasforma: ruota (5 gradi); -ms-transform: ruota (5 gradi); transform: ruotare (5deg); . sezione carta: nth-child (dispari): dopo z-index: -1; posizione: assoluta; contenuto: ""; fondo: 0px; a destra: 10px; a sinistra: auto; larghezza: 50%; sopra: 20px; background: rgba (0, 0, 0, 0.7); -webkit-box-shadow: 10px 20px 15px rgba (0, 0, 0, 0,5); -moz-box-shadow: 10px 20px 15px rgba (0, 0, 0, 0,5); box-shadow: 10px 20px 15px rgba (0, 0, 0, 0,5); -webkit-transform: ruotare (-5deg); -moz-transform: ruotare (-5deg); -o-transform: ruotare (-5deg); -ms-transform: ruotare (-5deg); transform: ruotare (-5deg);
Ora so che questo può sembrare scoraggiante per le persone che non sono abituate a usare trasformazioni o pseudo-elementi CSS3, ma questo è in realtà abbastanza semplice.
Qui stiamo solo aggiungendo le ombre per ogni sezione dispari. Iniziamo spingendo l'elemento extra dietro la carta con lo z-index. È qui che dichiariamo una posizione di assoluto ed è per questo che abbiamo dovuto dichiarare la posizione a relativa nell'elemento padre in precedenza.
Fondamentalmente, stiamo creando due riquadri neri che occupano metà della larghezza della nostra sezione di piegatura (larghezza: 50%;) quindi diamo loro delle ombre di riquadri e quindi ruotiamo di 5 °. Questi elementi extra sono per lo più nascosti, ma sono collocati in modo tale da dare l'illusione della profondità, come se la carta stesse venendo fuori dalla pagina. Queste ombre accentuano l'effetto creato dal gradiente in precedenza.
Ora dobbiamo ripetere un processo simile per le nostre sezioni con numeri uguali.
.paper section: nth-child (even): before z-index: -1; posizione: assoluta; contenuto: ""; fondo: 20px; a sinistra: 10px; larghezza: 50%; inizio: 0; background: rgba (0, 0, 0, 0.7); -webkit-box-shadow: -10px -25px 15px rgba (0, 0, 0, 0,5); -moz-box-shadow: -10px -25px 15px rgba (0, 0, 0, 0,5); box-shadow: -10px -25px 15px rgba (0, 0, 0, 0.5); -webkit-transform: ruotare (-5deg); -moz-transform: ruotare (-5deg); -o-transform: ruotare (-5deg); -ms-transform: ruotare (-5deg); transform: ruotare (-5deg); .campo della carta: nth-child (pari): dopo z-index: -1; posizione: assoluta; contenuto: ""; fondo: 20px; a destra: 10px; a sinistra: auto; larghezza: 50%; inizio: 0; background: rgba (0, 0, 0, 0.7); -webkit-box-shadow: 10px -25px 15px rgba (0, 0, 0, 0,5); -moz-box-shadow: 10px -25px 15px rgba (0, 0, 0, 0,5); box-shadow: 10px -25px 15px rgba (0, 0, 0, 0.5); -webkit-transform: ruotare (5deg); -moz-transform: ruota (5deg); -o-trasforma: ruota (5 gradi); -ms-transform: ruota (5 gradi); transform: ruotare (5deg);
Esattamente come prima ma per alcuni dettagli. Ovviamente stiamo prendendo di mira gli elementi di numero pari e non quelli dispari, e il posizionamento è diverso, quindi l'ombra si trova nella parte superiore della scatola e ruotata nell'altro senso, creando così una sorta di ombra triangolare vicino al punto di ogni " piega". Qui:
Avrai notato che abbiamo usato percentuali per la larghezza e abbiamo impostato un ambiente per un design reattivo. Se prendi l'esempio così com'è e ridimensionalo, funziona abbastanza bene. Ma ci sono imperfezioni. Questi possono essere corretti con alcune correzioni che si attivano in determinati punti.
@media solo schermo e (larghezza massima: 600px) h1 font-size: 25px; h2 font-size: smaller; Sezione .paper: nth-child (even): after right: 20px; . sezione carta: nth-child (dispari): after right: 20px; . sezione carta: nth-child (pari): before left: 20px; . sezione carta: nth-child (dispari): before left: 20px;
Quindi qui abbiamo ridotto le nostre intestazioni più piccole (ancora una volta solo per la demo), abbiamo dovuto anche sostituire gli pseudo-elementi in modo un po 'leggero perché venivano visualizzati in piccole finestre. Ho scelto 600px come punto di interruzione solo perché è quando le ombre sono diventate troppo grandi nei miei occhi, ancora una volta questo è completamente aperto per poter cambiare secondo il tuo design.
Poiché utilizziamo i gradienti CSS3, la compatibilità del browser è limitata ai browser moderni e a Internet Explorer 10. Le nostre sfumature hanno una proprietà di filtro di backup che ci consente di accedere a IE9, in modo tale da ottenere solo sconti IE8 e precedenti. IE8 in realtà funziona in vari modi (i nostri selettori CSS3, le regole di trasformazione e le ombre delle caselle, quindi dimentichiamoci completamente di IE8!) Per fortuna, è un degrado aggraziato e il contenuto della pagina è perfettamente accessibile:
Non dimenticare che le tue query multimediali dovranno anche contenere il file solo parola chiave, per impedire a IE8 di analizzare tutti i loro contenuti per impostazione predefinita.
Così il gioco è fatto! Un effetto carta piegato flessibile creato con gradienti CSS3, ombre di riquadri e pseudo elementi. Spero che ti sia piaciuto questo tutorial e spero di aver imparato qualcosa di utile da esso. Fatemi sapere nei commenti mi piacerebbe sentire le vostre opinioni.
