Questa settimana abbiamo un altro divertente e semplice progetto CSS per aiutarti a perfezionare le tue abilità di codifica. Questa volta creeremo l'illusione di una pagina con un angolo che è stato ripiegato.
Con la forza degli pseudo elementi, creeremo alcuni triangoli CSS che possiamo quindi attivare per creare la nostra piega di pagina. Una volta che abbiamo finito, sarai in grado di applicare semplicemente una classe a qualsiasi div per aggiungere l'effetto.
Il concetto
demo: Clicca qui per il lancio.
Recentemente, ho voluto aggiungere un po 'di carattere a un semplice contenitore di testo e ho deciso di provare a piegare su uno degli angoli. Con l'aiuto di un'immagine, questo è un compito piuttosto facile. Tuttavia, se stiamo tentando di seguire una pura rotta CSS, ci vuole più tempo e fatica.
Il metodo che ho trovato non è sicuramente innovativo, ma ho pensato che fosse abbastanza interessante da condividere qui. Fondamentalmente, ciò di cui abbiamo bisogno, oltre a una scatola rettangolare, sono due triangoli. Spingeremo questi triangoli nelle posizioni mostrate sotto.
Una volta posizionati i triangoli, possiamo cambiare il triangolo superiore dello stesso colore dello sfondo, e improvvisamente abbiamo il nostro bel piccolo effetto di piegatura della pagina. Molto facile!
Ora che abbiamo un piano, possiamo iniziare a costruire le nostre forme usando i CSS. Non c'è davvero una grande metodologia integrata per creare triangoli con i CSS, quindi dovremo rivolgerci a un voodoo di confine.
L'HTML
Per iniziare, crea un div come quello mostrato di seguito. Ho inserito un titolo con un paragrafo, una classe per gli stili di pagina generali che potremmo voler riutilizzare altrove e infine una classe per applicare l'effetto di piegatura di pagina (tl sta per? In alto a sinistra ?, ne creeremo un altro per un in alto a destra piega in seguito).
Questo è tutto ciò di cui abbiamo bisogno per ora. Passiamo al nostro CSS e prendiamo questa cosa in stile!
Pagina CSS
Per il CSS, inizieremo a codificare l'aspetto generale della nostra piccola pagina senza l'effetto di piegatura. Ho iniziato conferendo allo sfondo un bel colore scuro, per poi passare allo styling della classe di pagine effettiva. Dagli larghezza, altezza e margine e assegna il bianco al colore di sfondo.
Come passaggio facoltativo, ho incluso un gradiente di sfondo molto sottile. Come sempre, questo prende un pezzo di codice empio se stiamo cercando di giocare con il maggior numero di browser possibile. Se ritieni che non ne valga la pena, lascia semplicemente la sfumatura.
Ora che abbiamo il contenitore di base in stile, è tempo di rendere il testo un po 'migliore. Per la h2, l'ho reso bello e grande e lo ho fatto molto lontano dalla cima, in modo che non si intromettesse nella piegatura della pagina. Inoltre, ho utilizzato Google Web Font Lilita One. Incorporare questo è facile come copiare e incollare il codice che ti è stato dato sulla pagina in quel link.
Infine, per completare il testo, ho aggiunto un po 'di padding al paragrafo, ne ho impostato il font e reso il suo colore di qualche sfumatura dal nero per rimuoverlo dal titolo.
Controllo avanzamento
A questo punto, dovresti avere una bella pagina simile a quella mostrata sotto. Non è molto da guardare in questo momento, ma è un buon inizio.
Triangoli CSS
Prima di procedere, dobbiamo imparare a creare un triangolo con i CSS. Per iniziare questo processo, crea un div vuoto e assegnagli una classe di? Triangle ?. Ora imposta sia l'altezza che la larghezza a zero, ma applica un bordo molto spesso sul lato inferiore e sinistro (usa due colori diversi). Ecco il risultato che otterrai:
Come puoi vedere, questo ha creato un quadrato che è diviso in diagonale dall'angolo in basso a sinistra all'angolo in alto a destra. Ogni bordo corrisponde a uno dei triangoli che risultano. Ora guarda cosa succede se trasformiamo uno di quei bordi trasparenti:
Eccolo lì, un triangolo realizzato con puro CSS. Possiamo persino modificare la direzione del triangolo applicando i bordi a lati diversi:
Assicurati di impostare il bordo trasparente nella direzione in cui desideri che l'ipotenusa sia rivolta. Quindi, se vuoi che sia corretto, rendi trasparente il bordo giusto. Il contrario è vero per gli altri confini. Se vuoi che l'ipotenusa sia rivolta verso il basso, imposta il bordo superiore. Se vuoi che sia rivolto verso l'alto, imposta il bordo inferiore.
Dai un'occhiata a questo Tinkerbin per vedere un esempio di tutte e quattro le opzioni al lavoro.
Piegare la pagina
Ora è il momento di usare questa conoscenza per piegare la pagina. Per fare ciò, dobbiamo seguire tre passaggi. In primo luogo, modelleremo il? Foldtl? classe che abbiamo creato prima. Successivamente, aggiungeremo un triangolo usando l'elemento: before pseudo.Infine, aggiungeremo il secondo triangolo usando l'elemento: dopo pseudo.
Come puoi vedere, tutto ciò che abbiamo fatto per la classe principale è applicare il posizionamento relativo (questo aiuta i triangoli posizionati in modo assoluto) e impostare un'ombra di riquadro. Come nota a margine, questo progetto è molto più semplice senza ombre, ma volevo assicurarmi che tu sapessi che poteva ancora funzionare. Devi solo assicurarti che l'ombra sia abbastanza sfalsata da non sporgere di lato con la piega della pagina.
Ora è il momento di creare il nostro primo triangolo. Richiama il: before pseudo element, imposta il suo contenuto su nothing, posizionalo assolutamente sull'origine, quindi usa il codice triangolare che abbiamo appena appreso sopra.
Come puoi vedere, ho impostato la dimensione su 70px e il colore su #eee, che è un po 'più scuro del colore della pagina perché questo è il triangolo che crea l'effetto fold-over. Ancora una volta, l'ombra deve essere significativamente spostata per apparire corretta.
Ritaglia l'angolo
Per finire, dobbiamo posizionare il nostro secondo triangolo per tagliare quell'angolo in alto a sinistra. Questo utilizza praticamente la stessa sintassi dell'ultimo, solo il colore del triangolo è lo stesso del corpo e la direzione è stata invertita.
Si scopre che questo passaggio non è realmente necessario, vedere la sezione Aggiornamento di seguito per ulteriori informazioni.
Con questo, il nostro effetto di piegatura della pagina è tutto finito! Ecco come appare:
Flipping Around
Ora che abbiamo terminato la nostra piegatura in alto a sinistra, è tempo di girarla e vedere se siamo in grado di tirare fuori la stessa cosa dall'altra parte. La sintassi è quasi identica, basta spostarla da destra invece che a sinistra con il posizionamento assoluto e capovolgere i triangoli.
Una cosa che potrebbe farti inciampare qui è l'ombra, dovrai capovolgere anche quelli altrimenti l'illusione sarà rovinata. Questa immagine illustra cosa intendo:
Guardalo in azione
Ora che abbiamo finito, è tempo di testare questo cattivo ragazzo. Tieni presente che, poiché stiamo utilizzando: before e: after, IE7 e before non suoneranno bene. Ci sono correzioni disponibili usando JavaScript se questa è una delle maggiori preoccupazioni per te.
demo: Clicca qui per il lancio.
Aggiornare
Ecco la cosa, a volte un progetto come questo ha un senso nella tua testa quando lo codifichi, poi torni più tardi e ti rendi conto che stavi sbagliando tutto! Questo è esattamente quello che è successo qui. Subito dopo averlo pubblicato, ho notato che dal momento che il mio trucco per i bordi si divideva in due triangoli da solo, non avevo davvero bisogno di passare attraverso il passaggio di aggiungere la sezione: after. Le informazioni di cui sopra sono ancora belle da imparare, quindi la lascerò in pace, ma ecco un modo migliore per farlo.
Tutto quello che dobbiamo fare è prendere il bordo che stavamo facendo trasparente e impostarlo sul colore dello sfondo. Quello da solo serve come il nostro secondo triangolo, permettendoci di tagliare completamente la sezione: dopo.
Vivi e impara gente, vivi e impara. Fai sempre attenzione e assicurati che il tuo codice sia il più conciso possibile. A volte fai errori stupidi (lo so fare). Non scoraggiarti, invece conforta il fatto che ci sia quasi sempre un modo migliore per fare qualcosa e ogni volta che ne trovi una, ti stai rendendo un programmatore migliore.
Assicurati di controllare il Tinkerbin aggiornato per vedere questa versione nuova e migliorata.
Conclusione
Grazie per aver letto questo tutorial su come creare un effetto di pagina con i CSS. Spero che abbiate trovato utili le informazioni e ora state abbastanza bene maneggiando sia i triangoli CSS che gli elementi pseudo prima e dopo.
Lascia un commento qui sotto e fammi sapere cosa ne pensi e assicurati di controllare presto altre fantastiche procedure CSS.