CSS3 è una tecnologia ormai molto avanzata, conosciuta e utilizzata da un bel po’ di anni. Eppure non smette mai di stupirci per la semplicità, efficacia e bellezza di alcuni “trucchetti” che sono realizzabili grazie alle novità introdotte da questo standard.

Una delle cose più interessanti di CSS3 è la possibilità di dipendere molto di meno dall’utilizzo delle immagini (oggetti per definizione “statici” e “esterni” al codice di un sito) per realizzare elementi grafici piacevoli e accattivanti – ad esempio creando icone, arrotondando gli angoli di box o immagini e utilizzando nativamente gradienti e sfumature.

Bordi colorati con gradienti

Proprio a proposito di gradienti vogliamo vedere oggi un piccolo trucco e mini-tutorial per ottenere un effetto particolarmente carino e piacevole, cioè una cosa del genere:

Schermata 2016-01-26 alle 06.38.05

Carino l’effetto eh?

Il modo in cui lo faremo è utilizzando la proprietà CSS border-image , proprietà che ci consente di inserire un’immagine o anche un gradiente come sfondo di un bordo e così facendo la cosa ancora più carina del tutto è che bastano veramente pochissime righe di codice per ottenere l’effetto che abbiamo visto prima.

Partiamo dal codice HTML:

Sì, esatto, questo è tutto l’HTML che ci serve.

La parte un po’ più interessante viene con il CSS, eccolo qua:

Qui gli elementi a cui prestare attenzione sono i border-image  e soprattutto l’utilizzo di linear-gradient  per definire e far apparire la sfumatura (da notare che i primi due comandi vendor-specific specificano il punto di partenza del gradiente – “top” – mentre quello non-vendor-specific il punto di arrivo, “to bottom”).

Ovviamente possiamo giocare con queste definizioni e personalizzare il gradiente come vogliamo, ad esempio facendo diagonale invece che verticale:

Schermata 2016-01-26 alle 06.57.11

Per fare questo ci basterà cambiare il nostro CSS così:

(ancora, da notare la sintassi leggermente diversa tra i due comandi vendor-specific che indicano il punto di partenza del gradiente e quello non-vendor-specific che richiede il punto di arrivo, cioè “to bottom right”).

L’ultima cosa da notare è l’utilizzo di

che permette al gradiente che abbiamo creato di estendersi a tutto il bordo del box.

 

Domande, dubbi, correzioni o suggerimenti? Lasciate un commento qui sotto – e ci vediamo al prossimo tutorial!

The following two tabs change content below.
Silvio Porcellana
Silvio Porcellana è il fondatore di mob.is.it, il tool che centinaia di agenzie e professionisti di tutto il mondo utilizzano per creare con semplicità siti mobili e applicazioni native per i loro clienti. Tiene anche un podcast dove racconta ogni venerdì le sue avventure imprenditoriali, senza veli o segreti: Opus Digitalis