CSS day 2020
Take away per il CSS day 2020 ❤️
...due copia-incolla non hanno mai fatto male a nessuno 😇
Nel titolo:
Ci sono tre cose che devi sapere su titolo di questa pagina. Browser permettendo.
- Il testo ha un'immagine di sfondo 🌄.
- Ho usato il text-stroke come la matita per gli occhi 👨🏼🎤.
- Quando scrolli si ancora in alto ⚓️.
Nel dettaglio, lo sfondo nel testo con le palme per stimolare la nostalgia di mare.
Prima di applicarlo controllo che il browser supporti -webkit-background-clip: text e -webkit-text-fill-color.
@supports (-webkit-background-clip: text) and (-webkit-text-fill-color: transparent) {
.c-intro__title {
background-image: url(https://source.unsplash.com/VZOPQBME6L4/);
background-position: center center;
-webkit-background-clip: text; // sempre webkit
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
}
Il -webkit-text-stroke l'ho usato per colorare il bordo del titolo. Ispirandomi alla matita per gli occhi della mia ragazza.
@supports (-webkit-text-stroke: 1px var(--color-text)) {
-webkit-text-stroke: 1px var(--color-text);
}
L'ancora in alto l'ho ottenuta via JavaScript. Scheeeerzo 🤗
È bastato un:
position: sticky; top: 0;
Snap Scroll
Hai presente quando ti obbligano a scrollare una pagina o un blocco alla volta? Odioso vero?
Ecco, adesso puoi farlo usando solo il CSS.
Scrolla ⬇️
.snap-scroll { // il contenitore
height: 25vh; // meglio se l'altezza è fissa
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.snap-scroll > div { // il contenuto
height: 25vh;
scroll-snap-align: center;
}
- Definire le gesture sugli schermi touch
- Stilare le form input SENZA extra markup
- Lazy load per le immagini (spoiler: loading="lazy")
Un saluto mascherato
Chiudo con un saluto da giovane mascherato. Mascherato cioè dentro un css-mask.
Più nel dettaglio, c'è l'immagine intera nello sfondo e il testo ha una maschera (visibile qui) messa sopra.
Il CSS che fa la magia è questo:
@supports (-webkit-mask-image: url([mask-path]) ) and (position: sticky) {
-webkit-mask-image: url([mask-path].png);
mask-image: url([mask-path].png);
-webkit-mask-size: 100%;
mask-size: 100%;
}
(devi scrollare tutta la pagina per vedere l'effetto)
Ciao grande,
sei un grazie!
That's all!
Questa volta è tutto davvero.
- Spero il talk ti sia piaciuto
- Ho fatto tutto con amore
- W il CSS day
- Alla prossima
