Con che frequenza ti rivolgi al CSS background-size proprietà? Se sei come me - e probabilmente molte altre persone front-end - allora di solito è quando sei tu background-size: cover un'immagine per riempire lo spazio di un intero elemento.
Bene, mi è stata presentata una sfida interessante che richiedeva un dimensionamento dello sfondo più avanzato: strisce di sfondo che passano al passaggio del mouse. Dai un'occhiata e passaci sopra con il cursore:
C'è molto di più da fare rispetto alle dimensioni dello sfondo, ma quello era il trucco di cui avevo bisogno per far passare le strisce. Ho pensato di mostrarti come sono arrivato lì, non solo perché penso che sia un effetto visivo davvero carino, ma perché mi ha richiesto di essere creativo con sfumature e metodi di fusione che penso potrebbero piacerti.
Iniziamo con una configurazione molto semplice per semplificare le cose. Parlo di un singolo
nell'HTML con lo stile di un quadrato verde:
div {
width: 500px;
height: 500px;
background: palegreen;
}Impostazione delle strisce di sfondo
Se la tua mente è andata dritta a un gradiente lineare CSS quando hai visto quelle strisce, allora siamo già sulla stessa pagina. In questo caso non possiamo esattamente eseguire un gradiente ripetuto poiché vogliamo che le strisce occupino quantità irregolari di spazio e le trasformino, ma possiamo creare cinque strisce concatenando cinque sfondi sopra il nostro colore di sfondo esistente e posizionandoli in cima -a destra del contenitore:
div {
width: 500px;
height: 500px;
background:
linear-gradient(black, black) top right,
linear-gradient(black, black) top 100px right,
linear-gradient(black, black) top 200px right,
linear-gradient(black, black) top 300px right,
linear-gradient(black, black) top 400px right,
palegreen;
}Ho realizzato strisce orizzontali, ma potremmo anche andare in verticale con l'approccio che stiamo coprendo qui. E possiamo semplificarlo un po' con le proprietà personalizzate:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
}Così, la --gt il valore è il gradiente e --n è una costante che stiamo usando per spostare le strisce verso il basso in modo che siano sfalsate verticalmente. E potresti aver notato che non ho impostato un vero gradiente, ma piuttosto solide strisce nere nel linear-gradient() funzione: è intenzionale e capiremo perché l'ho fatto tra poco.
Un'altra cosa che dovremmo fare prima di andare avanti è evitare che i nostri background si ripetano; in caso contrario, affiancano e riempiono l'intero spazio:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
background-repeat: no-repeat;
}Avremmo potuto ambientarci background-repeat nel background stenografia, ma ho deciso di suddividerla qui per mantenere le cose facili da leggere.
Compensare le strisce
Tecnicamente abbiamo delle strisce, ma è abbastanza difficile da dire perché non c'è spazio tra loro e coprono l'intero contenitore. È più come se avessimo un solido quadrato nero.
Qui è dove possiamo usare il background-size proprietà. Vogliamo impostare sia l'altezza che la larghezza delle strisce e la proprietà supporta una sintassi a due valori che ci consente di fare esattamente questo. E possiamo concatenare quelle dimensioni separandole con una virgola nello stesso modo in cui abbiamo fatto background.
Iniziamo in modo semplice impostando prima le larghezze. Utilizzando la sintassi a valore singolo per background-size imposta la larghezza e l'altezza predefinita auto. Sto usando valori totalmente arbitrari qui, quindi imposta i valori su ciò che funziona meglio per il tuo progetto:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
background-repeat: no-repeat;
background-size: 60%, 90%, 70%, 40%, 10%;
}Se stai usando gli stessi valori che sono io, otterrai questo:
Non sembra esattamente che abbiamo impostato la larghezza per tutte le strisce, vero? Questo a causa del auto comportamento dell'altezza della sintassi a valore singolo. La seconda striscia è più larga delle altre sottostanti e le copre. Dovremmo impostare le altezze in modo da poter vedere il nostro lavoro. Dovrebbero essere tutti della stessa altezza e possiamo effettivamente riutilizzare il nostro --n variabile, ancora una volta, per mantenere le cose semplici:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
background-repeat: no-repeat;
background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n); // HIGHLIGHT 15
}Ah, molto meglio!
Aggiunta di spazi tra le strisce
Questo è un passaggio totalmente facoltativo se il tuo disegno non richiede spazi tra le strisce, ma il mio sì e non è eccessivamente complicato. Cambiamo l'altezza di ogni striscia background-size un fumo, diminuendo il valore in modo che non riescano a riempire l'intero spazio verticale.
Possiamo continuare a utilizzare il nostro --n variabile, ma sottrarre una piccola quantità, diciamo 5px, utilizzando calc() per ottenere quello che vogliamo.
background-size: 60% calc(var(--n) - 5px), 90% calc(var(--n) - 5px), 70% calc(var(--n) - 5px), 40% calc(var(--n) - 5px), 10% calc(var(--n) - 5px);Sono molte le ripetizioni che possiamo eliminare con un'altra variabile:
div {
--h: calc(var(--n) - 5px);
/* etc. */
background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}Mascheratura e sfumatura
Ora scambiamo il palegreen colore di sfondo che abbiamo usato per scopi visivi fino a questo punto per il bianco.
div {
/* etc. */
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
#fff;
/* etc. */
}Un motivo in bianco e nero come questo è perfetto per mascherare e sfumare. Per fare ciò, per prima cosa avvolgeremo il nostro
in un nuovo contenitore padre e introdurre un secondo
sotto di essa:
Faremo un piccolo refactoring CSS qui. Ora che abbiamo un nuovo contenitore padre, possiamo passare il fixed width ed height proprietà che stavamo usando sul nostro
laggiù:
section {
width: 500px;
height: 500px;
} Userò anche CSS Grid per posizionare i due
elementi uno sopra l'altro. Questo è lo stesso trucco che Temani Afif usa per creare il suo fantastiche gallerie di immagini. L'idea è che posizioniamo entrambi i div sul contenitore completo usando il grid-area property e allinea tutto verso il centro:
section {
display: grid;
align-items: center;
justify-items: center;
width: 500px;
height: 500px;
}
section > div {
width: inherit;
height: inherit;
grid-area: 1 / 1;
}Ora, controlla questo. Il motivo per cui prima ho usato un gradiente solido che va dal nero al nero è per prepararci a mascherare e fondere i due
strati. Questo non è vero mascheramento nel senso che chiamiamo il mask proprietà, ma il contrasto tra i livelli controlla quali colori sono visibili. L'area coperta dal bianco rimarrà bianca e l'area coperta dal nero filtra. La documentazione di MDN sui metodi di fusione ha una bella spiegazione di come funziona.
Per farlo funzionare, applicherò il gradiente reale che vogliamo vedere sul primo
applicando le regole di stile della nostra iniziale
su quello nuovo, utilizzando il :nth-child() pseudo-selettore:
div:nth-child(1) {
background: linear-gradient(to right, red, orange);
}
div:nth-child(2) {
--gt: linear-gradient(black, black);
--n: 100px;
--h: calc(var(--n) - 5px);
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
white;
background-repeat: no-repeat;
background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}Se ci fermiamo qui, in realtà non vedremo alcuna differenza visiva rispetto a ciò che avevamo prima. Questo perché non abbiamo ancora eseguito la miscelazione vera e propria. Quindi, facciamolo ora usando il screen modalità di fusione:
div:nth-child(2) {
/* etc. */
mix-blend-mode: screen;
}Ho usato un colore di sfondo beige nella demo che ho mostrato all'inizio di questo articolo. Quel tipo leggermente più scuro di colorazione bianco sporco consente a un po 'di colore di sanguinare attraverso il resto dello sfondo:
L'effetto al passaggio del mouse
L'ultimo pezzo di questo puzzle è l'effetto hover che allarga le strisce a tutta larghezza. Innanzitutto, scriviamo il nostro selettore per esso. Vogliamo che ciò accada quando il contenitore padre (
nel nostro caso) è aleggiata. Quando è al passaggio del mouse, cambieremo la dimensione dello sfondo delle strisce contenute nel secondo
:
/* When is hovered, change the second div's styles */
section:hover > div:nth-child(2){
/* styles go here */
} Vorremo cambiare il background-size delle strisce per tutta la larghezza del contenitore mantenendo la stessa altezza:
section:hover > div:nth-child(2){
background-size: 100% var(--h);
}Questo "scatta" lo sfondo a tutta larghezza. Se aggiungiamo un po ' transition a questo, poi vediamo le strisce espandersi al passaggio del mouse:
section:hover > div:nth-child(2){
background-size: 100% var(--h);
transition: background-size 1s;
}Ecco di nuovo la demo finale:
Ho aggiunto del testo solo per mostrare come potrebbe essere usato in un contesto diverso. Se fai lo stesso, allora vale la pena assicurarsi che ci sia abbastanza contrasto tra il colore del testo e i colori usati nel gradiente per rispettare Linee guida WCAG. E mentre tocchiamo brevemente l'accessibilità, ne vale la pena considerando le preferenze dell'utente per il movimento ridotto quando si tratta dell'effetto hover.
Questo è un involucro!
Abbastanza pulito, vero? Lo penso certamente. Anche quello che mi piace di questo è che è abbastanza gestibile e personalizzabile. Ad esempio, possiamo modificare l'altezza, i colori e la direzione delle strisce modificando alcuni valori. Potresti anche variare alcune altre cose lì dentro, come i colori e le larghezze, per renderlo ancora più configurabile.
Sono davvero interessato se ti saresti avvicinato a questo in un modo diverso. Se è così, per favore condividi nei commenti! Sarebbe bello vedere quante variazioni riusciamo a raccogliere.
