I CSS3 hanno portato una grande rivoluzione nel mondo del web design, ci permettono di fare cose che fino a qualche anno fa erano pura fantascienza.
Quando frequentai il mio primo corso di web design, mi insegnarono a sezionare il psd del layout e ad esportare tutte immagini, per poi ricomporle in xhtml/css come se fossero un puzzle.
Bisognava essere precisi al pixel, altrimenti il risultato sarebbe stato un disastro… altro che responsive!
Oggi vorrei dare il via ad una serie di tutorial in cui ti illustrerò un po’ di curiosità, effetti e trucchetti che puoi realizzare con i CSS3, che ti semplificheranno la vita e ti permetteranno di donare al tuo sito un aspetto curato nei minimi dettagli senza essere costretto ad utilizzare immagini o codici complessi.
Per cominciare vorrei mostrarti come creare forme complesse con solo qualche riga di codice CSS3.
Pulsante effetto rilievo
Hai presente quei pulsantoni con i bordi arrotondati ed un leggero effetto rilievo in basso, che vengono utilizzati spesso nei siti in stile flat?
Vediamo come realizzarne uno.
Creiamo un div con id pulsante.
Nel css gli applichiamo una larghezza, un’altezza, un colore di sfondo, un border-radius ed un border-bottom di qualche tonalità più scuro rispetto al colore di sfondo.
#pulsante {
width: 180px;
height: 36px;
background-color: #00D387;
border-bottom: 4px solid #00C57E;
border-radius: 5px; }
Ecco qui il nostro pulsante:
All’interno del div inseriamo la parola da linkare.
Dato che il nostro pulsante è costituito da un semplicissimo div possiamo sbizzarrirci con gli effetti allo stato hover.
Uno degli effetti più semplici e più utilizzati consiste nell’invertire i colori del bordo e dello sfondo.
#pulsante {
width: 180px;
height: 36px;
background-color: #00D387;
border-bottom: 4px solid #00C57E;
border-radius: 5px;
text-align: center }
#pulsante:hover {
background-color: #00C57E;
border-bottom: 4px solid #00D387;}
#pulsante a {
color: #fff;
font-family: "Champagne & Limousines";
font-size: 30px;
text-decoration: none;}
Ecco il risultato:
Cerchio
Realizzare un cerchio con i CSS3 è semplicissimo: basta creare un div con gli stessi valori di altezza e larghezza, ed applicargli un border-radius del 50%
#cerchio {
width: 100px;
height: 100px;
background-color: #F8DA58;
border-radius: 50%;}
In un attimo abbiamo ottenuto un cerchio senza dover ricorrere all’utilizzo di immagini:
All’interno del div cerchio possiamo inserire delle piccole icone monocromatiche, o ancora meglio dei font dingbat come il Modern Pictograms, di cui avevamo parlato nella rubrica sui font.
Triangolo
Per ottenere un triangolo con i CSS3 dobbiamo creare un div con altezza e larghezza pari a zero, ed utilizzare i bordi per impostare i tre lati.
Ad esempio, se vogliamo creare un triangolo con la base in basso e la punta in alto, assegneremo al border-bottom la dimensione che vogliamo assegnare alla base del triangolo e il colore, mentre per i bordi left e right imposteremo la trasparenza:
#triangolo {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #00C57E;}
Ecco il nostro triangolo
Ora probabilmente ti starai chiedendo cosa accidenti ce ne facciamo di un triangolino in css.
Vediamo alcune possibili applicazioni.
Tooltip
In genere quando dobbiamo inserire un tooltip nel nostro sito, o lo carichiamo come immagine oppure creiamo il rettangolo con un div e carichiamo soltanto l’immagine del triangolino.
Un mini triangolino pesa pochissimo, quindi possiamo utilizzare un’immagine senza problemi, però in un sito responsive l’immagine potrebbe diventare scomoda. Realizzare tutto con il css ci semplifica molto il lavoro.
Creiamo un div contenitore a cui assegniamo la larghezza e il posizionamento relativo (poiché il triangolino avrà bisogno di un posizionamento assoluto).
Al suo interno creiamo il div rettangolo e il div triangolo:
#tooltip {
width: 180px;
position: relative;}
#tooltip #rettangolo {
width: 180px;
height: 80px;
background-color: #86F795;}
#tooltip #triangolo {
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #86F795;
position: absolute;
top: 70px;
left: 20%;}
Ecco il nostro tooltip in css pronto per essere utilizzato
Ribbon
Il ribbon è un altro elemento molto utilizzato nei siti web, anche in questo caso se non lo carichiamo interamente come immagine, abbiamo bisogno quantomeno dell’immagine delle punte laterali.
Per realizzarlo con i css dobbiamo creare un div contenitore all’interno del quale inserire tre div flottanti: la fascia centrale e le due punte laterali.
Le punte laterali devono avere la forma di un triangolo invertito, come questo:
Per ottenere un triangolo invertito con i css assegniamo ai bordi la metà dei pixel che deve avere la base del rettangolo, lasciamo i lati obliqui trasparenti, diamo alla base del triangolo lo stesso colore dello sfondo, in questo caso il bianco, in modo che sembri vuoto al centro, e impostiamo il colore del triangolo con un background-color.
#triangolo_ invertito {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #fff;
background-color: #F45D4C;}
Di conseguenza per creare un ribbon faremo così:
#ribbon {
width: 520px;
height: 60px;}
#ribbon #punta_sx {
float: left;
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #fff;
background-color: #F45D4C;}
#ribbon #fascia {
float: left;
width: 400px;
height: 60px;
background-color: #F45D4C;}
#ribbon #punta_dx {
float: left;
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 30px solid #fff;
background-color: #F45D4C;}
Ecco cosa abbiamo ottenuto
In questo tutorial abbiamo visto come gestire alcune forme complesse con i CSS3, nel prossimo appuntamento inizieremo ad applicare qualche effetto.
