Come creare un disegno di bordo ritagliato con CSS
Con un disegno del bordo ritagliato possiamo mostrare agli utenti ciò che può essere trovato sotto l'area del bordo di un elemento HTML. Questo compito è in genere risolto da impilare due o più elementi di blocco (nella maggior parte dei casi div) di diverse dimensioni uno sopra l'altro. 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, vi mostrerò un'elegante soluzione CSS-only che utilizza solo un elemento HTML per ottenere lo stesso effetto. Questa tecnica è ottima anche per l'accessibilità, in quanto tale carica l'immagine di sfondo nel CSS, separato dall'HTML.
Alla fine di questo post, saprai come mostra un'immagine di sfondo nell'area del bordo per creare il disegno del bordo ritagliato puoi vedere sotto. Mostrerò anche come è possibile rendere il design reattivo usando le unità viewport.
Codice iniziale
L'unico requisito nel fronte HTML è a elemento di blocco:
Avremo bisogno di riutilizzo le dimensioni (larghezza e altezza) e i valori della larghezza del bordo del div, quindi li sto presentando come variabili CSS. La variabile --w denota il larghezza del .CB elemento di blocco, --h indica il suo altezza, --B va per il larghezza del bordo, e --b2 per la larghezza del bordo moltiplicata per 2. Vedremo in seguito l'uso dell'ultima variabile.
Sto dimensionando il L'unità Miglioriamo il codice precedente aggiungendo uno sfondo e impostando il bordo, l'altezza e la larghezza usando le nostre variabili CSS predefinite. Ecco come dovrebbe apparire la demo in questo momento: Abbiamo bisogno dell'immagine di sfondo per copre 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 Il larghezza dell'immagine di sfondo [ Allo stesso modo, il altezza dell'immagine di sfondo [ In questo modo, abbiamo ridimensionato l'immagine di sfondo in un'area uguale alla dimensione di Il Nota: Se stai aggiungendo il padding al Questo è ciò che abbiamo adesso: Ora che abbiamo coperto l'area inclusiva di confine con l'immagine di sfondo, tutto ciò che rimane è farlo coprire l'area centrale all'interno del confine (area esclusa il bordo) con un colore solido, per il quale raggiungiamo a L'ombra orizzontale con valore Nella demo Codepen, potresti vedere un bordo bianco attorno all'immagine. C'è un famoso trucco di usando le ombre delle caselle per creare più bordi-possiamo usare la stessa tecnica per aggiungere uno o più bordi colorati solidi al nostro design. L'aggiornato Il 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 è opzionale, ma può essere estremamente utile se vuoi riutilizzare il layout del disegno del bordo ritagliato in più elementi, e aggiungere l'estetica (immagine di sfondo + colore) per ogni elemento in modo indipendente. Ho aggiunto una classe chiamata Da Per impostare il valore di Poiché le dimensioni sono tutte nell'unità Nota: Non dimenticare di aggiungi il meta tag viewport alla tua pagina HTML se hai deciso di ottimizzarlo per la visualizzazione mobile.vw unità (puoi usare unità fisse se vuoi). .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2);
Spiegazione rapida -
vw e vh unitàvw rappresenta il 1/100esimo della larghezza della finestra. Per esempio, 50vw è 50 parti di una larghezza di finestra affettato verticalmente in 100 parti uguali, mentre 50vh è 50 parti di altezza di una finestra affettato orizzontalmente in 100 parti uguali. .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); background: url (bg.jpg); border: var (- b) solido trasparente; altezza: var (- h); larghezza: var (- w);
Ridimensiona l'immagine di sfondo
sfondo valore che sto dando: .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)); border: var (- b) solido trasparente; altezza: var (- h); larghezza: var (- w);
calc (var (- w) + var (- b2))] è la somma di larghezza del div [var (- w)] e il larghezza dei bordi sinistro e destro [var (- b2)].calc (var (- h) + var (- b2))] è la somma di altezza del div [var (- h)] e il larghezza dei bordi superiore e inferiore [var (- b2)].div (compresa l'area di confine).centro parola chiave allinea l'immagine di sfondo al centro del div.div, ricordati di includere l'area di imbottitura anche alla dimensione dello sfondo, come l'area del bordo.
Coprire l'area esclusiva del confine
box-ombra inserire. .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)); border: var (- b) solido trasparente; box-shadow: inset var (- w) 0 0 rgba (0,120,237, .5); altezza: var (- h); larghezza: var (- w);
var (- w) copre l'intera larghezza del div. L'uso di RGBA la funzione colore consente un po 'di trasparenza da aggiungere nel mix, tuttavia è anche possibile utilizzare un colore opaco se si desidera coprire completamente l'area centrale.
Aggiungi un bordo in più con
box-ombrabox-ombra il valore è: .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)); border: var (- b) solido trasparente; 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);
calc (var (- b) / 2) la funzione crea un'ombra del metà della larghezza del bordo.
Opzionale: layout ed estetica separati
.Poster1 al .poster1 --tbgc: rgba (0,120,237, .5); background-image: url ("http://bit.ly/2eQBij2"); sfondo è una proprietà stenografica, le sue proprietà di longhand possono essere ignorate / impostate individualmente. Quindi, possiamo impostare immagine di sfondo nel .Poster1, e rimuovere il valore dell'URL dal sfondo proprietà in .CB.box-ombra, possiamo usare un'altra variabile CSS. Il --TBGC variabile detiene il valore del colore vogliamo dare al box-shadow (lightblue nella demo), quindi tra le regole di stile per .CB noi sostituire il valore del colore del box-ombra proprietà 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)); border: var (- b) solido trasparente; 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
vw, lo farà sembra troppo piccolo quando visualizzi il disegno in modalità verticale (larghezza ridotta rispetto all'altezza), in cui tutti i dispositivi mobili sono inseriti per impostazione predefinita. Per risolvere questo problema, interruttore vw con vh, e ridimensiona il design come meglio credi per le modalità ritratto. @media (orientation: portrait) .cb --w: 35vh; --h: 40vh; --b: 4vh;
