Proprietà CSS3 compatibili con gli attuali browser

Benché le specifiche CSS3 non siano ancora state pubblicate alcune sue proprietà sono già supportate dai maggiori browser come FireFox, Opera, Chrome e IE.

CSS3 viene in contro alle esigenze di chi sviluppa un template fornendo soluzioni ad ombre, angoli arrotondati, sfondi sovrapposti, gradienti, animazioni e molto altro che altrimenti verrebbe ottenuto con l’ausilio di immagini o JavaScript con conseguente appesantimento delle pagine e del lavoro.

Le proprietà esencate di seguito sono quelle che attualmente vengono supportate bene dalle attuali versioni dei browser e che quindi possono essere usate con tranquillità. E’ bene in ogni caso non affidarsi totalmente a loro e fare in modo che i template nei quali utilizzeremo tali proprietà siano compatibili anche con le versioni meno recenti dei browser.

border-radius

Conquesta proprietà è possibile arrotondare i bordi passando un valore in pixel. E’ possibile passare un valore singolo che verrà applicato a tutti e quattro gli angoli oppure quattro valori che corrisponderanno ognuno ad un angolo.

.bordi-rotondi{
	border:1px solid #000;
	border-radius:15px;
}

box-shadow

Permette di dare un’ombra a degli elementi. I parametri impostabili sono l’allineamento orizzontale e quello verticale, la sfocatura, la dimensione dell’ombra, il colore e se l’ombra deve essere esterna o interna. Soltanto i primi due parametri sono obbligatori e tutti hanno un valore in pixel eccezion fatta per il colore (classico esadecimale o rgb) e la posizione interna dell’ombra (di default esterna) che va impostata col valore “inset”.

.ombra{
	box-shadow: 5px 5px 10px 0px #000000;
}

text-shadow

Analoga alla precedente questa proprietà è utilizzata per dare un’ombra a del testo. I suoi valori sono l’allineamento orizzontale e verticale, la sfocatura e il colore. I valori obbligatori da impostare sono sempre quelli relativi all’allineamento.
Il text-shadow non è ancora supportato dall’attuale versione di Internet Explorer (9).

h2{
	text-shadow: 5px 5px 10px #000000;
}

background

CSS3 introduce diverse nuove soluzioni per gestire gli sfondi. Tra quelle attualmente supportate spicca senza dubbio la possibilità di aggiungere più di un’immagine di sfondo, utile nel caso di immagini composte come nella tecnica del parallax scrolling.
Altra proprietà interessante è background-size con la quale è possibile ridimensionare l’immagine di sfondo.

.multisfondo{
	background-image:url(img1.png), url(img2.png);
}

.sfondo-piccolo{
	background-size:70px 70px;
}

@font-face

Quest’ultima proprietà rivoluziona parecchio le cose per i web designer, infatti in passato essi erano costretti a usare i cosiddetti “safe fonts” presenti di default nei computer dei visitatori, ora invece sono liberi di utilizzarne uno qualsiasi caricato sullo spazio web.

@font-face{
	font-family: mioFont;
	src: url('font_personale.ttf'),	url('font_personale.eot');
}

p{
	font-family:mioFont;
}

Nell’esempio riportato sopra è mostrato l’utilizzo base di tale proprietà dandole un nome al font (nel caso mioFont) e l’url del file del font. Nel codice si nota che vengono impostati due url, questo perché Internet Explorer supporta soltanto il formato .oet.

Per informazioni più approfondite riguardo al CSS3 vi consiglio di visitare la guida di w3schools.