In questo articolo vedremo 5 interessanti tecniche da utilizzare coi CSS3, che magari ancora non conosci. Ormai infatti il CSS3 è un linguaggio comaptibile con tutti i browser (le ultime versioni), per questo è ormai giunta ora di poterlo usare, a differenza di HTML5, che necessita di ancora almeno 1 anno.

Doppio box-shadow e box-shadow interno

Sicuramente conosci già la proprietà box-shadow, che va assegnata in questo modo (chiaramente poi dovrete applicare i seguenti attributi ad un tag):

-moz-box-shadow: 0px 0px 5px #000; /*Questo serve per Firefox */

-webkit-box-shadow:0px 0px 5px #000; /*Questo è invece per la compatibilità con Safari*/

box-shadow:0px 0px 5px #000; /*Per la compatibilità con IE e altri browsers*/

Questo codice produrrà una semplice ombra esterna che non si muove ne orizzontalmente (il primo “0px”) ne verticalmente (il secondo 0px), ma che si sfuma di 5px e di colore nero.

Ma se noi volessimo fare un doppio box-shadow? Magari un’ombra esterna e una interna (per creare l’ombra interna si usa inset che si mette subito dopo la proprietà e i due punti)? Si utilizza la virgola!

-moz-box-shadow: 0px 0px 5px #000, inset 0px 0px 5px #000; /*Questo serve per Firefox */

-webkit-box-shadow:0px 0px 5px #000, inset 0px 0px 5px #000; /*Questo è invece per la compatibilità con Safari*/

box-shadow:0px 0px 5px #000, inset 0px 0px 5px #000; /*Per la compatibilità con IE e altri browsers*/

Testo più nitido: le varie tecniche

L’esempio più pratico per questa tecnica lo trovi in questa pagina. Vedi il testo come è nitido (funziona, sembra, solo con Safari e Chrome)? Ci sono due modi per avere un testo più nitido. E li trovi qui sotto, tocca a te testarli col tuo sito e vedere quale si addice meglio, ma entrambi producono lo stesso effetto: rendono il testo più nitido e più leggibile. Il mio consiglio è banale: applica entrambe le proprietà a body, così nel caso (quasi impossibile) che non ne funzionerà uno, funzionerà l’altro.

-webkit-font-smoothing:antialiased;

text-shadow:0px 1px 1px #fff;

Rimuovere l’outline

Avevo scritto un articolo apposito. L’outline è un fastidioso effetto di Firefox. Per questo vi lascio solo il codice da mettere in tutte le pagine al tag body:

*:focus, *:active {outline:none !important;}

*::-moz-focus-inner {border:0 !important;}

Usare le animazioni/transizioni in modo intelligente

Cosa significa? Significa che molti ignorano le animazioni e transizioni in CSS3 perché credono che servano solo a creare effetti in stile flash ( ad esempio un div che appare, uno che scompare, l’altro che si muove ecc.). Invece no! Le animazioni sono leggerissime e possono essere usate in altri modi meno vistosi ma molto eleganti. Ne vediamo uno: color fading. Ovvero cambio di colore graduale al passaggio del mouse, prova ad esempio a passare col mouse sopra questo link (che refresha questo articolo). Elegante, vero? In questo caso hai appena testato una transizione di colore. Ma puoi anche creare transizioni di opacità (esempio guarda i links alle varie pagine nella header di Skimbu! Quella è una transizione di opacità, oltre che di text-shadow!).

Ecco dunque come creare una transizione di colore:

a {

-webkit-transition: color 0.2s ease-in; /*devi indicare proprietà di transizione (color), tempo (0,2 secondi) e tipo (ease-in è la più popolare e usata, ma puoi provare anche ease-out o linear)*/

-moz-transition:color 0.2s ease-in; /*Compatibilità con Firefox*/

transition:color 0.2s ease-in; /*Compatibilità con gli altri browser*/

color:#000;

}

a:hover {

color:red;

}

In questo caso tutti i tag a di un sito web passeranno gradualmente da un colore nero a un colore rosso, in 0,2 secondi.

Gradienti

Questo non è da considerare una vera e propria tecnica, ma ricordo che anche i gradienti sono molto sottovalutati in CSS3, e non mi dilungo troppo, perché poco tempo fa è stato pubblicato un articolo su come creare gradienti CSS3 in modo veloce.