CSS3: l’ombra sui testi

 CSS3  No Responses »
Dec 282011
 

Un effetto che sicuramente riscuoterà successo specificato da CSS3 è l’ombra sui testi, ora come probabilmente ci si aspetta il problema è legato a internet explorer ma forse conviene iniziare a portarsi avanti, gli utenti che usano browser obsoleti saranno esteticamente penalizzati ma la fruizzione dei contenuti non risultera compromessa. Tecnicamente non c’è molto da dire:


p {text-shadow: 2px 2px 3px #333 ;}

dove il primo valore è lo spostamento dell’ombra in orizzontale e il secondo è lo spostamento dell’ombra in verticale; quindi il livello di sfocatura e il colore dell’ombra.

Un esempio si può vedere in questa pagina

 Share

CSS3: l’ombra sui box

 CSS3  No Responses »
Dec 222011
 

Per molti anni uno dei principali motivi di discussione fra designer e sviluppatori era legato alle ombre inserite nei layout e di una discreta complessità da montare nelle pagine html, comunque facendo ricorso alla grafica tradizionale con le inevitabili scomodità del caso.

CSS3 propone una soluzione a questo problema introducendo la possibilità di gestire le ombre. L’istruzione cardine è questa:


box-shadow: 5px 5px 10px 2px #333333;

Esaminiamola nel dettaglio: i primi due valori indicano rispettivamente lo spostamento orizzontale e quello verticale, valori positivi spostano l’ombra verso destra e verso il basso, mentre valori negativi spostano l’ombra verso sinistra e verso l’alto. Il terzo valore rappresenta il grado di sfocatura, valori più bassi determinano ombre più nette. Il quarto valore imposta il grado di diffusione dell’ombra, più è alto e più l’ombra tende ad espandersi. L’ultimo valore, ma questo è abbastanza scontato, rappresenta il colore dell’ombra.

In pratica

 Share