it.hideout-lastation.com
Come creare un disegno di bordo ritagliato con CSS
Con un design del bordo ritagliato possiamo mostrare agli utenti ciò che può essere trovato sotto l'area del bordo di un elemento HTML . Questa attività viene in genere risolta accatastando due o più elementi di blocco (nella maggior parte dei casi div) di dimensioni diverse una sull'altra. Per prima cosa sembra una soluzione semplice, ma diventa più frustrante quando si desidera riutilizzare il layout più volte, spostarsi tra gli elementi, ottimizzare il design per dispositivi mobili o mantenere il codice.
In questo post, ti mostrerò un'elegante soluzione solo CSS che utilizza un solo elemento HTML per ottenere lo stesso effetto. Questa tecnica è ottima anche per l'accessibilità, poiché carica l'immagine di sfondo nel CSS, separata dall'HTML.
Alla fine di questo post, saprai come visualizzare un'immagine di sfondo nell'area del bordo per creare il disegno del bordo ritagliato che puoi vedere sotto. Mostrerò anche come rendere il design reattivo usando le unità viewport .
Codice iniziale
L'unico requisito nel fronte HTML è un elemento di blocco :
Dovremo riutilizzare le dimensioni (larghezza e altezza) e i valori della larghezza del bordo del div, quindi li sto introducendo come variabili CSS . La variabile --w indica la larghezza .cb blocco .cb, --h indica la sua altezza, --b va per la larghezza del bordo e --b2 per la larghezza del bordo moltiplicata per 2. Vedremo in seguito l'uso dell'ultima variabile.
Sto dimensionando il
vw (puoi usare unità fisse se vuoi). .cb {--w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); } Spiegazione rapida - unità vw e vh
L'unità vw rappresenta la 1/100 della larghezza della finestra . Ad esempio, 50vw è 50 parti di una larghezza della finestra tagliata verticalmente in 100 parti uguali, mentre 50vh è 50 parti di un'altezza della vista tagliata orizzontalmente in 100 parti uguali .
Miglioriamo il codice precedente aggiungendo uno sfondo e impostando il bordo, l'altezza e la larghezza utilizzando le nostre variabili CSS predefinite .
.cb {--w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); background: url (bg.jpg); bordo: var (- b) trasparente solido; altezza: var (- h); larghezza: var (- w); } Ecco come dovrebbe apparire la demo in questo momento:
Ridimensiona l'immagine di sfondo Abbiamo bisogno dell'immagine di sfondo per coprire l'intera area del
Se vuoi dare all'immagine di sfondo una dimensione fissa, assicurati solo che la dimensione che stai dando gli consenta di coprire l'area del bordo del
background che sto dando a questo: .cb {--w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); background: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); bordo: var (- b) trasparente solido; altezza: var (- h); larghezza: var (- w); } La larghezza dell'immagine di sfondo [ calc(var(--w) + var(--b2)) ] è la somma della larghezza del div [ var(--w) ] e della larghezza dei bordi sinistro e destro [ var(--b2) ].
Allo stesso modo, l' altezza dell'immagine di sfondo [ calc(var(--h) + var(--b2)) ] è la somma dell'altezza del div [ var(--h) ] e della larghezza della parte superiore e bordi inferiori [ var(--b2) ].
In questo modo, abbiamo ridimensionato l'immagine di sfondo in un'area uguale alla dimensione del div (inclusa l'area del bordo) .
La parola chiave center allinea l'immagine di sfondo al centro del div .
Nota: se si aggiunge il riempimento al div, ricordare di includere anche l'area di riempimento alla dimensione dello sfondo, come l'area del bordo.
Questo è ciò che abbiamo adesso:
Coprire l'area esclusiva del confine Ora che abbiamo coperto l'area inclusiva di confine con l'immagine di sfondo, non resta che coprire l'area centrale all'interno del bordo (area esclusiva del bordo) con un colore a tinta unita, per il quale raggiungiamo un box-shadow .
.cb {--w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); background: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); bordo: var (- b) trasparente solido; box-shadow: inset var (- w) 0 0 rgba (0, 120, 237, .5); altezza: var (- h); larghezza: var (- w); } L'ombra orizzontale con valore var(--w) copre l'intera larghezza del div . L'uso della funzione di colore rgba consente di aggiungere una certa trasparenza nel mix, tuttavia puoi anche utilizzare un colore opaco se vuoi coprire completamente l'area centrale.
Aggiungi un bordo in più con box-shadow Nella demo Codepen, potresti vedere un bordo bianco attorno all'immagine. C'è un trucco famoso dell'uso delle ombre di riquadri per creare più bordi: possiamo usare la stessa tecnica per aggiungere uno o più bordi colorati solidi al nostro progetto.
Il valore box-shadow aggiornato è:
.cb {--w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); background: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); bordo: var (- b) trasparente solido; box-shadow: inset var (- w) 0 0 rgba (0, 120, 237, .5), 0 0 0 calc (var (- b) / 2) bianco; altezza: var (- h); larghezza: var (- w); } La funzione calc(var(--b) / 2) crea un'ombra della metà della larghezza del bordo .
Opzionale: layout ed estetica separati Nella mia ultima demo di Codepen, ho inserito il codice per l'immagine di sfondo e il colore dell'ombra della scatola in una classe separata . Questo è facoltativo, ma può essere estremamente utile se si desidera riutilizzare il layout del disegno del bordo ritagliato in più elementi e aggiungere l'estetica (immagine di sfondo + colore) per ciascun elemento in modo indipendente.
Ho aggiunto una classe chiamata .poster1 al
.poster1 {--tbgc: rgba (0, 120, 237, .5); background-image: url ("http://bit.ly/2eQBij2"); } Poiché lo background è una proprietà abbreviata, le sue proprietà di longhand possono essere sovrascritte / impostate singolarmente . Quindi, possiamo impostare l' background-image in .poster1 e rimuovere il valore .cb dalla proprietà background in .cb .
Per impostare il valore di box-shadow, possiamo usare un'altra variabile CSS . La variabile --tbgc contiene il valore del colore che vogliamo dare al box-shadow (lightblue nella demo), quindi tra le regole di stile per .cb sostituiamo il valore del colore della proprietà box-shadow con var(--tbgc) .
.cb {--w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); background: center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); bordo: var (- b) trasparente solido; box-shadow: inset var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) bianco; altezza: var (- h); larghezza: var (- w); } Codice per la modalità verticale
Dal momento che le dimensioni sono tutte nell'unità vw, sembrerà troppo piccola quando visualizzi il disegno in modalità verticale (larghezza ridotta rispetto all'altezza), che tutti i dispositivi mobili sono in modalità predefinita. Per risolvere questo problema, cambia vw con vh e ridimensiona il disegno come preferisci per le modalità portrait.
@media (orientation: portrait) {.cb {--w: 35vh; --h: 40vh; --b: 4vh; }} 
Nota: non dimenticare di aggiungere il meta tag viewport alla tua pagina HTML se hai deciso di ottimizzarlo per la visualizzazione mobile.
40 Creative Remakes of The World Map
Se non hai il piacere di essere uno studente in una classe di geografia in cui l'insegnante può disegnare un'intera mappa del mondo dalla memoria (trama: l'insegnante è un insegnante di storia, secondo i commenti), allora è sicuro assumere che la geografia non è probabilmente la tua classe preferita . Va
Questo cheatsheet elenca tutti i tag che puoi inserire Elemento
Ogni pagina web ha un'intestazione del documento e c'è molto che va lì. Gli utenti di WordPress fanno spesso affidamento sui plugin SEO per gestire i meta tag complessi .Tuttavia, se stai codificando un tema da zero, potresti voler espandere un po 'l'intestazione del documento . Ci sono letteralmente centinaia di tag che puoi usare ognuno con il loro scopo sottile e Ottieni informazioni sulla testa è l'unico cheatheet che ti serve su questo argomento.El
