Leggendo questa guida, acquisirete competenze preziose per elevare i vostri progetti web al di l\u00e0 dell’ordinario. E ci auguriamo ne trarrete anche un po’ di ispirazione.
\n
Transizioni CSS avanzate<\/h2>\n
Le transizioni CSS avanzate rendono gli elementi dell’interfaccia utente interattivi, coinvolgenti e piacevoli da vedere. Immaginate di avere un pulsante sul vostro sito. Normalmente se ne sta l\u00ec, ma con le transizioni CSS, quando qualcuno ci passa sopra, cambia colore o magari cresce un po’ di dimensioni.<\/p>\n
Il concetto ruota attorno all’idea dell’interpolazione, ovvero la transizione fluida tra diversi stati di una propriet\u00e0 CSS.<\/p>\n
Per creare questi effetti, bisogna conoscere alcune propriet\u00e0 CSS:<\/p>\n
- \n
- Propriet\u00e0 di transizione<\/strong>: queste comprendono l’indicazione della propriet\u00e0 che volete animare (come
background-color<\/code> oopacity<\/code>), l’impostazione della durata della transizione e la scelta del parametrotransition-timing-function<\/code> (comeease-in<\/code> olinear<\/code>), che determina l’andamento della transizione.<\/li>\n- Funzioni di temporizzazione<\/strong>: sono indispensabili perch\u00e9 controllano l’accelerazione e la decelerazione della transizione. Una delle opzioni pi\u00f9 versatili \u00e8 la funzione
cubic-bezier<\/code>. Questa funzione permette di creare curve di velocit\u00e0 personalizzate, dando un controllo completo sul ritmo della transizione. All’inizio pu\u00f2 essere un po’ complicato, ma strumenti come cubic-bezier<\/a> aiutano nella visualizzazione e nella creazione di queste curve.<\/li>\n<\/ul>\n![\"cubic-bezier\"](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/cubic-bezier.png\")
Un esempio di cubic-bezier in azione.<\/figcaption><\/figure>\n Ecco un semplice esempio che illustra come utilizzare questo strumento nel vostro CSS:<\/p>\n
.my-element {\n\ntransition-property: opacity;\n\ntransition-duration: 0.5s;\n\ntransition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);\n\n}\n<\/code><\/pre>\nIn questo snippet,
.my-element<\/code> cambier\u00e0 opacit\u00e0 con una curva di velocit\u00e0 unica definita dalla funzionecubic-bezier<\/code>. Questa curva impone un tipo di movimento specifico, ad esempio inizia lentamente, accelera e poi rallenta verso la fine.<\/p>\nAssegnando valori personalizzati a
transition-timing-function<\/code>, \u00e8 possibile muovere gli elementi web in modo pi\u00f9 naturale, dinamico o semplicemente diverso dallo standard. \u00c8 un ottimo strumento per aggiungere personalit\u00e0 e finezza alle animazioni web.<\/p>\nEd ecco alcune tecniche avanzate:<\/p>\n
- \n
- Combinare pi\u00f9 propriet\u00e0<\/strong>: perch\u00e9 accontentarsi di animare solo una cosa? I CSS permettono di allineare diverse propriet\u00e0 e di animarle tutte insieme. Questo \u00e8 perfetto per aggiungere livelli all’animazione.<\/li>\n
- Animazioni sincronizzate<\/strong>: \u00e8 anche possibile allineare diverse propriet\u00e0 per far muovere gli elementi allo stesso ritmo, creando un effetto pi\u00f9 coordinato.<\/li>\n
- Transizioni annidate<\/strong>: \u00e8 possibile applicare le transizioni agli elementi all’interno di un container. In questo modo, quando interagite con il container, gli elementi child si comportano nel modo che preferite.<\/li>\n<\/ol>\n
Assicuratevi che queste animazioni non siano solo belle da vedere ma anche fluide, soprattutto sui dispositivi meno potenti. Propriet\u00e0 come
transform<\/code> eopacity<\/code> sono pi\u00f9 semplici per i browser e non dovrebbero influire troppo sulle prestazioni.<\/p>\nInoltre, un avviso con la propriet\u00e0
will-change<\/code> consente al browser di prepararsi per l’azione, assicurando che tutto fili liscio.<\/p>\nQuesta \u00e8 solo un’ultima nota per garantire che tutto questo funzioni ovunque: i browser possono essere esigenti. I prefissi dei vendor garantiscono che le transizioni funzionino correttamente su diversi browser. Si tratta di un po’ di lavoro in pi\u00f9, ma strumenti come gli autoprefixers<\/a> sono molto utili ed evitano eventuali errori.<\/p>\n
Le trasformazioni nei CSS<\/h2>\n
Le trasformazioni CSS sono un ottimo strumento per rendere pi\u00f9 interessante il vostro design. Possono essere utilizzate per spostare le cose, ovviamente, ma possono cambiare l’intera atmosfera di una pagina. La propriet\u00e0
transform<\/code> \u00e8 l’elemento principale.<\/p>\n\u00c8 versatile e permette di spostare gli elementi da un punto all’altro, come far scorrere un’immagine sullo schermo o cambiarne le dimensioni: ad esempio, facendo sembrare qualcosa pi\u00f9 vicino o pi\u00f9 lontano, proprio come lo zoom di una foto. E se volete essere un po’ pi\u00f9 fantasiosi, potreste anche far ruotare gli elementi.<\/p>\n
La parte impressionante sono le trasformazioni 3D. Con funzioni come
translate3d<\/code>,scale3d<\/code> erotate3d<\/code>, gli elementi possono saltare fuori dallo schermo, creando un’esperienza pi\u00f9 coinvolgente all’interno del browser.<\/p>\nPrendiamo, ad esempio, l’effetto flipping card. Si tratta di un’interessante funzione in cui un lato di una card mostra determinate informazioni e, quando si capovolge, viene rivelato un nuovo contenuto sull’altro lato. Questo elemento interattivo pu\u00f2 davvero catturare l’attenzione dei visitatori.<\/p>\n
Per ottenere questo effetto si pu\u00f2 utilizzare la propriet\u00e0
backface-visibility<\/code>. In questo modo il retro della card rimane nascosto<\/a> fino a quando non deve essere visto.<\/p>\nMa perch\u00e9 fermarsi qui? Si pu\u00f2 ottenere molto di pi\u00f9 combinando queste trasformazioni con transizioni e animazioni. Potreste avere un pulsante che cresce elegantemente di dimensioni quando ci si passa sopra il mouse o un’icona che si muove allegramente sullo schermo. Questi cambiamenti dinamici aggiungono fluidit\u00e0 agli elementi della pagina, rendendo l’esperienza dell’utente ancora pi\u00f9 coinvolgente.<\/p>\n
Designmodo offre diversi ottimi esempi di questo tipo di azione. Permette di visualizzare il CSS per le trasformazioni 3D<\/a> e vedere il codice in azione<\/a>:<\/p>\n
![\"ciambella](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/designmodo-spinning-donut.png\")
Designmodo offre un ottimo esempio di trasformazione 3D.<\/figcaption><\/figure>\n Container query<\/h2>\n
Le container query sono un’altra funzionalit\u00e0 CSS che vale la pena esplorare. Permettono di modellare gli elementi in base alle dimensioni del loro contenitore, anzich\u00e9 in base alle dimensioni dell’intero schermo. Immaginate di avere una scatola e volete che gli elementi al suo interno abbiano un bell’aspetto indipendentemente dalle dimensioni della scatola. Le container query sono perfette per questo.<\/p>\n
Sono molto utili quando si vuole che diverse parti della pagina, come le barre laterali o le schede, cambino aspetto a seconda dello spazio che hanno a disposizione. Ogni componente pu\u00f2 decidere il proprio stile<\/a>, indipendentemente dal resto della pagina.<\/p>\n
Ecco in breve come utilizzarle:<\/p>\n
- \n
- Impostare il container<\/strong>: per prima cosa, indicate al CSS quale parte della pagina \u00e8 un container utilizzando propriet\u00e0 come
container-type<\/code> econtainer-name<\/code>.<\/li>\n- Scrivere le query<\/strong>: proprio come le media query, ma per i container. Scrivete una regola che dice: “Ehi, se il contenitore \u00e8 largo almeno cos\u00ec, allora apporta queste modifiche allo stile”<\/li>\n<\/ul>\n
Ecco come si presenta il codice di base:<\/p>\n
@container (min-width: 300px) {\n\n.component {\n\n\/* styles *\/\n\n}\n\n}<\/code><\/pre>\nIn questo esempio, gli stili della classe
.component<\/code> verranno applicati quando il suo contenitore raggiunge una larghezza minima di 300px.<\/p>\nOra, le container query possono essere utilizzate in vari contesti, come ad esempio:<\/p>\n
- \n
- Sidebar e footer reattivi<\/strong>: regolazione della larghezza e del layout delle barre laterali o dei footer in base alle dimensioni del container.<\/li>\n
- Schede reattive<\/strong>: modifica del layout o dello stile delle schede in un layout a griglia o flexbox in base alla larghezza del loro contenitore.<\/li>\n<\/ul>\n
Sebbene le container query siano supportate dai principali browser, tra cui Chrome, Firefox, Safari ed Edge, \u00e8 comunque buona norma utilizzarle come progressive enhancement. Iniziate con gli stili di base per i browser che non le supportano e aggiungete le container query per i browser che le supportano.<\/p>\n
Utilizzare Flexbox per l’allineamento verticale<\/h2>\n
Flexbox<\/a> \u00e8 uno strumento incredibilmente utile nei CSS, soprattutto per quanto riguarda l’allineamento verticale. Anche se esiste da un po’ di tempo, \u00e8 sempre molto importante, soprattutto per allineare gli elementi lungo l’asse trasversale (che, a seconda del layout, pu\u00f2 essere verticale).<\/p>\n
Utilizzare align-items per l’allineamento verticale<\/h3>\n
La propriet\u00e0
align-items<\/code> di Flexbox \u00e8 ideale per allineare gli elementi in verticale all’interno di un contenitore. Funziona quando il contenitore flex ha unflex-direction<\/code> row. Questa propriet\u00e0 permette di controllare l’allineamento di tutti i child di un flex container lungo l’asse trasversale.<\/p>\nSe avete un gruppo di elementi in un contenitore flessibile e volete che siano tutti centrati verticalmente, dovrete usare
align-items: center;<\/code>. Ecco le opzioni principali disponibili peralign-items<\/code>:<\/p>\n- \n
flex-start<\/code>: allinea gli elementi all’inizio del container.<\/li>\nflex-end<\/code>: allinea gli elementi alla fine del container.<\/li>\ncenter<\/code>: centra gli elementi nel container.<\/li>\nbaseline<\/code>: allinea gli elementi in base alla linea di base.<\/li>\nstretch<\/code>: allunga gli elementi per riempire il contenitore (comportamento predefinito).<\/li>\n<\/ul>\nUtilizzare align-self per il controllo individuale<\/h3>\n
align-items<\/code> \u00e8 ottimo per allineare tutti gli elementi di un contenitore, ma a volte pu\u00f2 essere necessario allineare un solo elemento in modo diverso. Ecco perch\u00e9align-self<\/code> \u00e8 molto utile. Questa propriet\u00e0 permette di sovrascrivere il valore dialign-items<\/code> per i singoli elementi del flex. Accetta gli stessi valori dialign-items<\/code>.<\/p>\nSupponiamo di avere un contenitore flex con
align-items: center;<\/code> ma c’\u00e8 un elemento che volete allineare all’inizio. Potete applicarealign-self: flex-start;<\/code> a quell’elemento specifico. In questo modo avrete un controllo preciso sull’allineamento dei singoli elementi.<\/p>\nPu\u00f2 essere molto utile vederlo in azione.<\/p>\n
Supponiamo che stiate progettando una barra di navigazione con un logo, alcuni link e una barra di ricerca. Volete che i link siano centrati, che il logo sia allineato in alto e che la barra di ricerca sia allineata in basso.<\/p>\n
Ecco come fare:<\/p>\n
.nav-container {\n\ndisplay: flex;\n\nflex-direction: row;\n\nalign-items: center;\n\n}\n\n.logo {\n\nalign-self: flex-start;\n\n}\n\n.search-bar {\n\nalign-self: flex-end;\n\n}<\/code><\/pre>\nIn questo esempio, il sito
.nav-container<\/code> \u00e8 un contenitore flessibile con gli elementi generalmente centrati. Il logo e la barra di ricerca, tuttavia, si discostano da questa regola generale, allineandosi rispettivamente all’inizio e alla fine del contenitore.<\/p>\nLe moderne funzioni colore nei CSS<\/h2>\n
Le funzioni di colore nei CSS si sono evolute in modo significativo, e oggi offrono soluzioni pi\u00f9 sofisticate per definire e manipolare i colori nel web design. Analizziamo alcune di queste funzioni:<\/p>\n
1. rgb() e rgba()<\/h3>\n
La funzione
rgb()<\/code> definisce i colori utilizzando i canali rosso, verde e blu. Ogni canale pu\u00f2 avere un valore compreso tra 0 e 255. La variantergba()<\/code> aggiunge un canale alfa per l’opacit\u00e0, dove 1 \u00e8 completamente opaco e 0 completamente trasparente.<\/p>\nEcco un esempio:<\/p>\n
.example {\n\ncolor: rgb(255, 0, 0); \/* Red *\/\n\nbackground-color: rgba(255, 0, 0, 0.5); \/* Semi-transparent red *\/\n\n}<\/code><\/pre>\n2. hsl() e hsla()<\/h3>\n
hsl()<\/code> rappresenta i colori in termini di tonalit\u00e0, saturazione e luminosit\u00e0, rendendo pi\u00f9 intuitiva la selezione delle variazioni di colore. Comergba()<\/code>,hsla()<\/code> ha un canale alfa per l’opacit\u00e0. Eccone un esempio:<\/p>\n.example {\n\ncolor: hsl(120, 100%, 50%); \/* Green *\/\n\nbackground-color: hsla(120, 100%, 50%, 0.3); \/* Semi-transparent green *\/\n\n}<\/code><\/pre>\n3. oklch() e oklab()<\/h3>\n
oklch()<\/code><\/a> eoklab()<\/code> sono state aggiunte pi\u00f9 di recente alle funzioni di colore dei CSS. Si basano sullo CIELAB color space<\/a>, che \u00e8 stato progettato per essere percettivamente uniforme. Ci\u00f2 significa che le variazioni dei valori del colore corrispondono pi\u00f9 fedelmente alle variazioni percepite dall’occhio umano.<\/p>\nNello specifico:<\/p>\n
- \n
oklab()<\/code> \u00e8 utilizzato per definire i colori in uno spazio percettivamente uniforme.<\/li>\noklch()<\/code> \u00e8 simile ma utilizza coordinate cilindriche (luminosit\u00e0, colore e sfumatura).<\/li>\n<\/ul>\nQueste funzioni permettono di manipolare i colori in modo pi\u00f9 accurato e intuitivo, soprattutto per attivit\u00e0 come la creazione di gradienti di colore uniformi. Vediamo un esempio:<\/p>\n
.example {\n\ncolor: oklch(75%, 0.25, 250); \/* A color in oklch *\/\n\nbackground-color: oklab(0.623, 0.172, -0.079); \/* A color in oklab *\/\n\n}<\/code><\/pre>\nSchemi di colore avanzati<\/h3>\n
Con queste funzioni, in particolare con le pi\u00f9 avanzate
oklch()<\/code> eoklab()<\/code>, \u00e8 possibile implementare schemi di colore complessi e visivamente coerenti e accattivanti. Offrono un maggiore controllo sul modo in cui i colori vengono resi e percepiti, facendo s\u00ec che i vostri progetti siano esteticamente gradevoli e accessibili.<\/p>\nSe combinate queste funzioni di colore con caratteristiche CSS come le propriet\u00e0 personalizzate (variabili CSS) e i calcoli, potrete sviluppare sistemi di colore dinamici e flessibili che si adattano a temi, stati e ambienti diversi.<\/p>\n
Dato che gli standard web e il supporto dei browser per queste funzioni continuano a cambiare, l’adozione di queste moderne funzioni cromatiche pu\u00f2 migliorare notevolmente il design visivo e l’esperienza utente dei vostri progetti web.<\/p>\n
Curvare il testo intorno alle immagini<\/h2>\n
La propriet\u00e0 CSS
shape-outside<\/code> avvolge il testo intorno alle immagini<\/a>, permettendo di creare layout pi\u00f9 dinamici e visivamente interessanti e uno stile delle immagini<\/a> pi\u00f9 avanzato.<\/p>\nPermette di definire una forma attorno alla quale il contenuto in linea deve avvolgersi. \u00c8 utile per avvolgere il testo intorno alle immagini in una forma non rettangolare, creando layout pi\u00f9 organici e visivamente accattivanti rispetto all’avvolgimento rettangolare standard del testo.<\/p>\n
Come funziona?<\/h3>\n
\u00c8 possibile definire varie forme come cerchi, ellissi e poligoni, oppure utilizzare il canale alfa di un’immagine per definire la forma.<\/p>\n
La propriet\u00e0
shape-outside<\/code> si applica tipicamente agli elementi fluttuanti. Quando si fa fluttuare un’immagine e si applica una propriet\u00e0shape-outside<\/code>, il testo si avvolge intorno ad essa secondo la forma definita.<\/p>\nEcco un esempio di shape-outside con un cerchio:<\/p>\n
.image {\n\nfloat: left;\n\nshape-outside: circle(50%);\n\nwidth: 200px;\n\nheight: 200px;\n\nmargin-right: 15px;\n\n}<\/code><\/pre>\nIn questo esempio, la classe
.image<\/code> viene applicata a un elemento immagine. L’immagine \u00e8 spostata a sinistra eshape-outside: circle(50%);<\/code> crea una forma circolare attorno alla quale si avvolger\u00e0 il testo.shape-outside<\/code> pu\u00f2 aprire nuove possibilit\u00e0 all’interno dei vostri progetti poich\u00e9 permette al testo di scorrere intorno a forme complesse, rendendo possibile la creazione di layout simili a quelli di una rivista e di pagine web visivamente ricche.<\/p>\nBlend mode CSS<\/h2>\n
I blend mode CSS permettono di mescolare colori e immagini, creando effetti visivi unici. Queste modalit\u00e0 di blend (fusione) permettono di creare effetti di testo accattivanti, sovrapposizioni di immagini e intricati motivi di sfondo. Questa propriet\u00e0 viene utilizzata per definire il modo in cui le immagini e il colore di sfondo di un elemento devono fondersi tra loro. Ad esempio, se avete un’immagine di sfondo e un colore di sfondo, potete fonderli utilizzando diverse modalit\u00e0 di fusione come multiply, screen, overlay, ecc. Ecco come potrebbe apparire il codice:<\/p>\n
.element {\n\nbackground-image: url('image.jpg');\n\nbackground-color: blue;\n\nbackground-blend-mode: multiply;\n\n}<\/code><\/pre>\nOra
mix-blend-mode<\/code> fonde il contenuto di un elemento (comprese le immagini e il testo) con il suo sfondo. Questo \u00e8 utile soprattutto per gli effetti di testo<\/a> o per sovrapporre un’immagine a un’altra. In questo modo:<\/p>\n<\n\n.element {\n\nmix-blend-mode: screen;\n\n}<\/code><\/pre>\nModalit\u00e0 di fusione pi\u00f9 diffuse<\/h3>\n
Come riferimento, ecco alcune delle modalit\u00e0 di fusione pi\u00f9 diffuse da conoscere per utilizzare correttamente questo effetto:<\/p>\n
- \n
- Multiply<\/strong>: moltiplica i colori del livello di fusione e del livello base, ottenendo un colore pi\u00f9 scuro.<\/li>\n
- Screen<\/strong>: rende i colori pi\u00f9 chiari, all’opposto di Multiply. \u00c8 utile per creare effetti di luce.<\/li>\n
- Overlay<\/strong>: combina le modalit\u00e0 di fusione Multiply e Screen. Le parti chiare dell’immagine diventano pi\u00f9 chiare e quelle scure pi\u00f9 scure.<\/li>\n
- Darken & lighten<\/strong>: seleziona rispettivamente il colore pi\u00f9 scuro o pi\u00f9 chiaro.<\/li>\n
- Color dodge & color burn<\/strong>: schiarisce o scurisce il colore di base per riflettere il colore di fusione.<\/li>\n
- Difference & exclusion<\/strong>: creano effetti di colore pi\u00f9 artistici e invertiti.<\/li>\n<\/ul>\n
Adattarsi alle preferenze degli utenti<\/h2>\n
- Screen<\/strong>: rende i colori pi\u00f9 chiari, all’opposto di Multiply. \u00c8 utile per creare effetti di luce.<\/li>\n
- Schede reattive<\/strong>: modifica del layout o dello stile delle schede in un layout a griglia o flexbox in base alla larghezza del loro contenitore.<\/li>\n<\/ul>\n
- Scrivere le query<\/strong>: proprio come le media query, ma per i container. Scrivete una regola che dice: “Ehi, se il contenitore \u00e8 largo almeno cos\u00ec, allora apporta queste modifiche allo stile”<\/li>\n<\/ul>\n
- Animazioni sincronizzate<\/strong>: \u00e8 anche possibile allineare diverse propriet\u00e0 per far muovere gli elementi allo stesso ritmo, creando un effetto pi\u00f9 coordinato.<\/li>\n
- Funzioni di temporizzazione<\/strong>: sono indispensabili perch\u00e9 controllano l’accelerazione e la decelerazione della transizione. Una delle opzioni pi\u00f9 versatili \u00e8 la funzione