Vai direttamente al contenuto

CSS day 2020

Take away per il CSS day 2020 ❤️ 

...due copia-incolla non hanno mai fatto male a nessuno 😇

Conf city faenza

Nel titolo:

Ci sono tre cose che devi sapere su titolo di questa pagina. Browser permettendo.

  1. Il testo ha un'immagine di sfondo 🌄.
  2. Ho usato il text-stroke come la matita per gli occhi 👨🏼‍🎤.
  3. 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;
}

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)

Alla prossima

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

    Bello ‘sto sito eh, ma me lo dimentico tra meno di subito

    Ti capisco amico mio. Neanche io mi ricorderei di me. Per questo ho fatto una pagina about e creato una newsletter che uso per avvisarti quando pubblico qualcosa di nuovo. Metti che ti fa comodo.

    Una newsletter? Sì: email molto brevi, molto di rado (la stessa frequenza con cui pubblico), e puoi cancellarti quando vuoi. Non mi offendo.

    Facciamolo 💌