it.hideout-lastation.com
Come creare un nastro CSS
Parliamo di nastri CSS nel web design quando una striscia di scatola (detta nastro) avvolge un'altra scatola . È una tecnica di progettazione abbastanza utilizzata per decorare il testo, in particolare i titoli. Sul sito Web di W3C è possibile verificare in che modo i nastri CSS utilizzati correttamente possono aiutare a strutturare il contenuto in modo sottile.
Quindi, in questo post vedremo come creare un semplice nastro CSS che puoi utilizzare per migliorare i titoli sul tuo sito web. Grazie alle 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 .card che rappresenta una casella rettangolare che avvolge il nastro .
Impostiamo anche le dimensioni di base e il colore di sfondo con i CSS.
.card {background-color: beige; altezza: 300 px; margine: 40px; larghezza: 500 px; } La parte centrale del nastro
Useremo una variabile CSS (ci permette di memorizzare e riutilizzare un valore CSS) chiamato --p per memorizzare il valore del padding . Il valore della proprietà padding utilizza la sintassi var(--p) per i padding sinistro e destro del nastro in modo che possa essere facilmente ampliato . La variabile --p successiva verrà riutilizzata più volte ; questo rende il nostro codice flessibile.
.ribbon {--p: 15px; background-color: rgb (170, 170, 170); altezza: 60px; 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 . Lo spingiamo a sinistra dalla dimensione del padding (contrassegnata dalla variabile - --p ) usando il posizionamento relativo.
.ribbon {--p: 15px; background-color: rgb (170, 170, 170); altezza: 60px; padding: 0 var (- p); posizione: relativa; a destra: var (- p); larghezza: 100%; } La demo aggiornata:
I lati del nastro Ora creiamo i lati sinistro e destro del nastro che dovrebbe apparentemente piegarsi attorno al bordo della carta. Per fare ciò, utilizziamo entrambi gli pseudo-elementi :before e :after di .ribbon .
Entrambi gli pseudo-elementi ereditano il colore di sfondo di .ribbon, e usiamo la regola filter: brightness(.5) per scurire un po 'il loro colore. Sono inoltre posizionati in modo assoluto all'interno del loro genitore (relativamente posizionato).
La loro larghezza deve essere uguale alla dimensione del padding e li posizioniamo alle estremità sinistra e destra del nastro usando le regole di stile left: 0 e right: 0 .
.ribbon: before, .ribbon: after {background-color: inherit; soddisfare:''; blocco di visualizzazione; filtro: luminosità (.5); altezza: 100%; posizione: assoluta; width: var (- p); } .ribbon: before {left: 0; } .ribbon: after {right: 0; } Ora il nastro con i lati che abbiamo appena aggiunto appare come di seguito:
Inclina i lati Per rendere piegati i lati del nastro, dobbiamo inclinare i lati di 45 ° . La transform: 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 si allineano dopo la trasformazione, quindi dobbiamo tirarli verso il basso .
Allinea i lati Per determinare la lunghezza corretta con cui dobbiamo spostare i lati verso il basso, passiamo alla trigonometria. Quello che dobbiamo trovare è x, poiché y è la larghezza dei lati (uguale alla dimensione di riempimento di .ribbon ), e l'angolo θ è 45 ° (l'angolo dell'inclinazione).
La x risultante deve quindi essere dimezzata, in quanto vi sono anche un lato sinistro e uno destro.
Se stai utilizzando qualsiasi CSS preprocessore controlla se ha una funzione tan, altrimenti fai riferimento a una tabella tangente o una calcolatrice per scoprire il valore tangente dell'angolo . Siamo fortunati perché tan 45° è 1, il che significa che il valore di x uguale a y nel nostro caso. .ribbon: before, .ribbon: after {background-color: inherit; soddisfare:''; blocco di visualizzazione; filtro: luminosità (.5); altezza: 100%; posizione: assoluta; top: calc (var (- p) / 2); width: var (- p); } Poiché x doveva essere dimezzato, usiamo la funzione calc() CSS per eseguire la divisione della variabile - --p .
Infine, dobbiamo allineare i lati lungo l'asse z, quindi aggiungiamo la regola z-index: -1 ai lati per posizionarli dietro la porzione centrale del nastro . .ribbon: before, .ribbon: after {background-color: inherit; soddisfare:''; blocco di visualizzazione; filtro: luminosità (.5); altezza: 100%; posizione: assoluta; top: calc (var (- p) / 2); width: var (- p); z-index: -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.
10 cose che vogliamo vedere in Windows 9
Affrontiamo la realtà, non c'è alcun modo in cui Microsoft ritorna al vecchio aspetto "classico" di Windows a cui siamo abituati. L'interfaccia utente Metro è qui per rimanere e sarà probabilmente migliorata quando Windows 9 verrà rilasciato nel 2015.Certo, non vediamo l'ora di nuove funzionalità e in questo post nomineremo 10 cose che vogliamo vedere in Windows 9 .Molto
20 Schizzi dettagliati per l'UI + Disegni pronti per la tua ispirazione
Uno schizzo è uno scheletro di un'idea che è nata originariamente come un pensiero. Mentre eravamo abituati a farlo a mano, e sulla carta, creare diversi modelli e schizzi in questi giorni può essere fatto digitalmente attraverso varie applicazioni. Mentre molti designer e artisti seguono i tempi e fanno i loro schizzi sui computer, un gran numero di creativi preferisce ancora disegnare a mano.È
