Dopo aver scritto l’articolo sulle tecniche e guide da conoscere su HTML5 mi ero ripromesso di fare la stessa cosa per CSS3, ma il tempo è sempre poco.

Oggi finalmente sono riuscito a ultimare l’articolo su alcune tecniche di CSS3, che secondo me, ogni web designer dovrebbe conoscere e saper applicare per tempi più maturi.

Andiamo a vedere insieme alcune novità dei CSS3 da conoscere.

Premessa

Attualmente il W3C raccomanda la versione 2 dei CSS, e anche se in fase di workign draft, è possibile usare una sua revisione 2.1 in quanto la maggior parte dei browser ne è compatibile.

Come per HTML5 consiglio ancora di aspettare a sviluppare per clienti, ma solo per progetti personali e sperimentazioni.

Rispetto alle versioni precedenti, i CSS3 sono costituiti da Moduli, ovvero come dichiara il W3C gruppi di proprietà affini con lo scopo di migliorarne la gestione.

Vediamo alcuni nuovi moduli introdotti e tecniche con i CSS3.

I Selettori

I Selettori sono dei nuovi elementi capaci di identificare un determinato parametro direttammente dal selettore stesso.

Questa è la sintassi:

  • selettore[att^="val"]
    Identifica gli elementi individuati da “selettore” che abbiano un attributo “att” che inizia con la stringa “val”
  • selettore[att*="val"]
    Identifica gli elementi individuati da “selettore” che abbiano un attributo “att” che contiene la stringa “val”
  • selettore[att$="val"]
    Identifica gli elementi individuati da “selettore” che abbiano un attributo “att” che termina con la stringa “val”

Un esempio è meglio di mille parole:

Mettiamo caso volessimo creare una lista con delle icone che identifichino il contenuto dei link.

In CSS2 dovremmo inserire una classe per ogni elemento, pdf, word, zip e associare uno sfondo, mentre in CSS3 useremo lo stesso selettore per individuare che tipo di icona inserire.

HTML

<a href="file.pdf">link a un documento pdf</a>

CSS3

a[href$=".pdf"] {
background:url("icon_pdf.gif") no-repeat scroll right center transparent;
}

In questo caso abbiamo usatolo stesso selettore a in proprietà href per individuare all’interno come terminasse, in questo caso .pdf

Quindi se nel selettore A nel parametro HREF termina con .PDF mi associ come sfondo l’icona con determinato stile.

Le Ombre

Le ombre sono degli elementi ormai superati nel design odierno, soprattutto sotto le scritte, ma a votle possono tornarci utile per dare rilievo a dei box o elementi.

CSS3

text-shadow: #999 3px 4px 5px

I parametri sono in ordine, colore, x, y e sfocatura.

Inoltre Mozzilla e Chrome hanno inserito delle dichiarazioni proprietarie con le quali alcune caratteristiche possono essere usate anche sui loro motori, ma necessitano un un prefisso standar come scritto di seguito.

-moz-box-shadow: 2px 2px 7px 0 #CCCCCC;
-webkit-box-shadow: 2px 2px 7px 0 #CCCCCC;

Bordi Arrotondati

I Bordi Arrotondati sono uno di quei aspetti più odiati dai grafici nella loro realizzazione.

Con CSS3 sarà possibile impostare dei borsi arrotondati semplicemente nel foglio di stile.

CSS3

border-radius:5px 5px 5px 5px;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;

Come vediamo ci basterà indicare l’angolatura dei lati in senso orario, top, right, bottom e left.

La Rotazione

La rotazione permette di ruotare elementi solo con l’uso del CSS3 come in questo modo.

CSS3

-moz-transform: rotate(90dev) ;
-webkit -transform: rotate(90dev)
transform: rotate(90dev)

Come parametri abbiamo l’effetto di rotazione nel quale al suo interno dovremo impostare i gradi in negativo o positivo.

Come vediamo anche qui ci sono le due dichiarazioni per i browser Mozzill e Chrome che permettono di visualizzare l’effetto.

Le Animazioni

CSS3 porta con se alcuni moduli per creare delle vere e proprie animazioni 2D e 3D su oggetti.

Sono state introdotte tre tipologie di animazioni, Transition, Transform e Animation.

Questo è un esempio di transizione lineare da sinistra a destra di un oggetto.

CSS3

#ID_ELEMENTO {
-webkit-transition: all 1s ease-in-out; /* Chrome */
-moz-transition: all 1s ease-in-out; /* Firefox */
-o-transition: all 1s ease-in-out; /* Opera */
transition: all 1s ease-in-out; /*Generale */
}

Come vediamo ci sono diversi codici proprietari a seconda del browser supportato.

Tempo fa avevo scritto un articolo su tutte e tre le tipologie di animazioni che vi invito a leggere: CSS3: Creare animazioni su oggetti.

L’Opacità

Il modulio opacità ci permette di stabilire l’oacità di un oggetto, determinando la sua visibilità su un altro.

CSS3

#box { opacity: 0.7; }

L’opacità è un parametro che si applica a un elemento come può essere un div in questo caso con ID = box

La proprietà assegna all’oggetto un valore di trasparenza compreso tra 0 e 1.

Background Multipli

Tra le tante novità è interessante l’utilizzo di sfondi multipli associati ad un elemento con lo stesso selettore.

Mettiamo il caso che a un elemento vogliamo associare sfondo.jpg e sopra aereo.png tramite i nuovi sfondi multipli.

CSS3

#box{
background:url(aereo.png), url(sfondo.jpg);
}

Dovremo associare al selettore bacground tutte le immagini da inserire, il primo sarà quello visualizzato in un livello successivo al secondo.

Quindi in questo caso avremo come ultimo parametro lo sfondo e come primo aereo.

Colonne Multiple

Per l’editoria online sul web, è stato introdotta la possibilità di dividere del testo all’interno di un contenutore in colonne.

In CSS2 dovremmo avere più contenutori come div oppure delle liste mentre in CSS3 sarà tutto molto pià semplice.

CSS3

div#multicolumn1 {
-moz-column-count:6;
-moz-column-gap:10px;
-moz-column-width:100px;
}

In questo caso abbiamo divisto il testo in 6 colonne, con una spazziatura di 10px e una larghezza di 100px.

Font Face

Tra le nuove caratteristiche di CSS3 troviamo @Font-face, una tecnica con la quale sarà possibile associare a un testo un qualsiasi tipo di font non standard.

Il font dovrà risiedere su un determinato spazio e richiamato come segue:

CSS3

@font-face{
font-family: ‘Airstrip_Four’;
src: url(’http://www.miosito.it/font/Airstrip_Four.ttf’);
}

E poi associarlo al selettore, in questo caso a un H1.

CSS3

h1 {
font-family: ‘Airstrip_Four’;
}

In questo caso abbiamo divisto il testo in 6 colonne, con una spazziatura di 10px e una larghezza di 100px.

Speech

Infine vi segnalo questa nuova proprietà chiamata Speech che permetterà, qualora il browser sia abilitato, di far leggere porzioni di testo a un sintetizzatore vocale.

Questa tecnica viene associata a diversi parametri, di seguito potete vederne alcuni per gestire il suono.

CSS3

#voice-volume { -xv-voice-volume: x-soft; -xv-voice-balance: right; }
#voice-balance { -xv-voice-balance: left; }
#speech-cue { cue-after: url(ding.wav); }
#voice-rate { -xv-voice-rate: x-slow; }
#voice-family { voice-family: female; }
#voice-pitch { -xv-voice-pitch: x-low; }
#speech-speak { speak: spell-out; }

Se siete curiosi vi invito a dare uno sguardo su CSS3 info.

Letture Consigliate per CSS3

Articoli simili


Autore:

Web Designer Freelance di Torino che ama la grafica e sperimentare tecniche di creatività sul web. Grazie all'esperienza maturata nel campo del web design potrai scoprire i servizi disponibili, oppure guardare i suoi ultimi lavori.