Come creare un nastro CSS
Parliamo di Nastri CSS nel web design quando a striscia di scatola (chiamato nastro) avvolge un'altra scatola. È una tecnica di progettazione abbastanza usata per decorare il testo, soprattutto titoli. Sul sito Web di W3C è possibile verificare l'utilizzo dei nastri CSS correttamente utilizzati contenuto della struttura in un modo sottile.
Quindi, in questo post andremo a vedere come creare un semplice nastro CSS che puoi usare migliorare le intestazioni sul tuo sito web. Grazie a Trasformazioni CSS, possiamo creare questo design con una base di codice molto più semplice di prima.
Puoi dare un'occhiata alla demo finale qui sotto.
HTML e stili di base
In primo luogo, creiamo a tag contrassegniamo con il .carta selettore che rappresenta a scatola rettangolare il nastro lo farà avvolgere in giro.
Abbiamo anche impostato il dimensioni di base e il colore di sfondo con CSS.
.card background-color: beige; altezza: 300 px; margine: 40px; larghezza: 500 px;
La metà porzione del nastro
Useremo a Variabile CSS (ci consente di memorizzare e riutilizzare un valore CSS) chiamato --p a memorizzare il valore del padding. Il valore del imbottitura la proprietà usa il var (- p) sintassi per i padding sinistro e destro del nastro in modo che possa essere facilmente allargato. Il --p variabile più tardi sarà riutilizzato più volte; questo rende il nostro codice flessibile.
.ribbon --p: 15px; background-color: rgb (170,170,170); altezza: 60 px; padding: 0 var (- p); larghezza: 100%;
Nello screenshot qui sotto puoi vedere come dovrebbe apparire la tua demo a questo punto:
Centrare il nastro
Abbiamo anche bisogno di centrare il nastro. Noi spingerlo a sinistra dalla dimensione del padding (contrassegnato dal --p variabile) utilizzando il posizionamento relativo.
.ribbon --p: 15px; background-color: rgb (170,170,170); altezza: 60 px; padding: 0 var (- p); posizione: relativa; a destra: var (- p); larghezza: 100%;
La demo aggiornata:
I lati del nastro
Ora creiamo il lati sinistro e destro del nastro che dovrebbe apparentemente piegarsi attorno al bordo della carta. Per fare ciò, usiamo entrambi :prima e :dopo pseudo-elementi di .nastro.
Entrambi gli pseudo-elementi ereditano il colore di sfondo di .nastro, e usiamo il filtro: luminosità (.5) regola per scurire un po 'il loro colore. Sono anche assolutamente posizionato all'interno del loro genitore (relativamente posizionato).
La loro larghezza deve essere il uguale alla dimensione del padding, e li mettiamo alle estremità sinistra e destra del nastro usando il a sinistra: 0 e a destra: 0 regole di stile.
.ribbon: before, .ribbon: after background-color: inherit; contenuto: "; display: block; filter: brightness (.5); height: 100%; position: absolute; width: var (- p); ribbon: before left: 0; .ribbon: after destra: 0;
Ora il nastro con i lati che abbiamo appena aggiunto appare come di seguito:
Inclina i lati
Per rendere i lati del nastro sembra piegato, abbiamo bisogno di inclinare i lati di 45 °. Il trasformare: skewy () Regola CSS inclina gli elementi verticalmente.
.ribbon: before left: 0; trasformare: skewY (45 gradi); .ribbon: after right: 0; trasformare: skewY (-45deg);
Come puoi vedere i bordi dei lati non allineare dopo la trasformazione, quindi abbiamo bisogno di abbatterli.
Allinea i lati
A determinare la lunghezza corretta con la quale dobbiamo spostare i lati verso il basso, ci rivolgiamo alla trigonometria. Quello che dobbiamo trovare è X, come y è la larghezza dei lati (uguale alla dimensione di imbottitura di .nastro), e l'angolo θ è 45 ° (l'angolo dello skew).
Il risultato X poi deve essere dimezzato, come ci sono anche un lato sinistro e uno destro.
Se stai utilizzando un preprocessore CSS, verifica se ha un abbronzatura funzione, altrimenti fare riferimento a una tabella tangente oa una calcolatrice scopri il valore tangente dell'angolo. Siamo fortunati come tan 45 ° è 1, il che significa che il valore di X uguale a y nel nostro caso.
.ribbon: before, .ribbon: after background-color: inherit; contenuto: "; display: block; filter: brightness (.5); height: 100%; position: absolute; top: calc (var (- p) / 2); width: var (- p);
Da X dovevamo essere dimezzati, usiamo il Calc () Funzione CSS per eseguire la divisione del --p variabile.
Finalmente abbiamo bisogno di allineare i lati lungo l'asse z pure, quindi aggiungiamo il z-index: -1 regola ai lati per posizionali dietro la metà del nastro.
.ribbon: before, .ribbon: after background-color: inherit; contenuto: "; display: block; filter: brightness (.5); height: 100%; position: absolute; top: calc (var (- p) / 2); width: var (- p); z- indice: -1;
Ora che abbiamo allineato i lati, il nostro nastro CSS è fatto.
Qui sotto puoi controllare di nuovo la demo dal vivo, tieni presente che utilizza anche alcuni stili aggiuntivi.
