CSS – Abbelliamo – Parte I
In questo appuntamento, parliamo di quelle proprietà che possono fare la differenza quando creiamo una pagina. Piccoli suggerimenti utili, e privi di sforzo, per aggiungere alle nostre pagine effetti che si notano.
Puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.
Sticky
Di certo vi sarà capitato di realizzare pagine contenenti menu, o porzioni della pagina, che volevate tenere visibili anche durante la fase di scorrimento della pagina. Probabilmente avrete trovato mille script che vi permettevano di farlo e così li avete aggiunti al vostro codice facendo vari copia e incolla dal web. Ma, forse, non sapevate che grazie a CSS questa funzionalità è già disponibile e facile da utilizzare.
Questo ne è un’esempio, se fate scorrere la pagina, gli elementi ai lati si bloccheranno, o meglio ancora, si ancoreranno in cima alla pagina smettendo di seguire lo scorrimento, che potrà essere via verticale che laterale (questo lo posso considerare un sotto suggerimento ;)).
Se arrivate in fondo al testo, ne trovate un terzo. Chi cerca trova.
Come facciamo per applicare questo effetto grazie a CSS…
.sticky-on {
position: sticky;
top: 10px;
}Vado a definire una classe nella quale assegno, alla proprietà position, il valore sticky. A questo poi devo associare anche il valore di quanto deve essere distante dal bordo superiore, top: 10px.
Un altro grande vantaggio nell’utilizzare Sticky, è che l’oggetto nella pagina occupa la sua posizione e la sua dimensione fino a quando non viene attivata la condizione di ancoraggio, molto meglio di elementi in posizione fissa o assoluta sui quali poi dobbiamo gestire gli scostamenti verso gli altri elementi.
Veramente semplice e di facile applicazione, con nessuno sforzo la nostra pagina ha già una forma diversa.
Puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.
Filtri sfondo
Un altro effetto che mi piace particolarmente e che con il tempo ho sempre cercato di realizzare nei modi più disparati, anche grazie a librerie grafiche JavaScript, è l’effetto di sfocatura dello sfondo, in pieno stile Apple Safari per IOS. Esempio…
La proprietà backdrop-filter:, è nata proprio per questo, applicare filtri di sfondo a tutti gli oggetti, al contenuto dell’elemento non viene applicato nulla. Nasce anche come funzionalità per estendere la parte SVG con effetti veramente interessanti. Cosa ulteriore da segnalare, con backdrop-filter, siamo anche in grado di applicare affetti aggiuntivi supportati da immagini. Ma andiamo a capire meglio di cose si tratta.
<!-- HTML -->
<header>
</header>
/* CSS */
header {
position: sticky;
top: 0px;
min-height: 200px;
background-color: rgba(255, 255, 255, 0.8);
border-bottom: 1px solid lightgray;
/* Applico il filtro allo sfondo*/
backdrop-filter: blur(4px);
}Nell’esempio, puoi vedere applicato l’effetto, quando scorri, il testo che passerà sotto l’intestazione (che utilizza lo sticky come position), avrà un effetto sfocato.
Non male anche questo come effetto, è applicabile a qualsiasi elemento, possiamo utilizzarlo per fare finestre di dialogo sovrapposte, menu di navigazione a scomparsa e molto altro, basta solo un po di fantasia.
Ma backdrop-filter fa molto di più della “semplice” sfocatura. ecco un elenco di possibili effetti, anche sommabili tra loro, che possiamo sfruttare per vestire la nostra pagina a festa.
/* Valore chiave */
backdrop-filter: none;
/* URL per filtro SVG */
backdrop-filter: url(commonfilters.svg#filter);
/* valore disponibili per i filtri */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);
/* applicazione filtri multipli */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
/* valori globali */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: unset;Se ti è piaciuto, ci vediamo al prossimo appuntamento.
Puoi registrarti adesso sul sito CSSsemantico.it per ricevere GRATUITAMENTE la tua copia del mio libro in formato elettronico appena sarà disponibile.
Se vuoi conoscermi e scambiare idee, la mia mappa è sempre pronta per essere estesa anche alle idee degli altri.
- La lampada magica di OpenAI - Gennaio 19, 2023
- BOB, il primo programmatore - Gennaio 17, 2023
- Software e Accessibilità - Febbraio 18, 2022
[…] al secondo appuntamento, se ve lo siete persi, ecco il primo articolo, con “abbelliamo le nostre pagine con i CSS”, suona un po’ come […]