2) Nuove funzionalità CSS3 – Bordi arrotondati e Testo ombreggiato

Bordi arrotondati nei box

Da tanto tempo si sentiva l’esigenza di regolare questo aspetto del design di un sito web, le soluzioni proposte nel tempo sono state molteplici e mai perfette. Con il nuovo CSS3 si è voluto mettere un punto a tutto questo, definendo uno standard:

.div_di_esempio {
	border-radius: 20px;
}

In questo caso viene impostato un raggio di 20 px ad ogni angolo del box con la rispettiva classe. Questa è la formula più semplice e immediata, esistono però anche altre proprietà.
Puoi impostare un differente raggio per ogni angolo in questo modo (ogni riga corrisponde a un preciso angolo):

.div_di_esempio {
	border-top-left-radius:     10px;
	border-top-right-radius:    5px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius:  30px;
}

Puoi creare un ellisse o un cerchio, se imposti esattamente ognuno degli angoli.
Puoi anche definire un diverso valore per il raggio verticale o quello orizzontale per ogni singolo angolo, utilizzando la “slash-based syntax”:

.div_di_esempio {
	border-top-left-radius: 55px 25px;
  	border-top-right-radius: 55px 25px;
  	border-bottom-right-radius: 55px 25px;
  	border-bottom-left-radius: 55px 25px;
}


Il risultato potrebbe essere questo box celeste.

Testo ombreggiato
Anche in questo caso, l’unica soluzione consentita in passato per utilizzare delle ombre in un testo era quella di sostituire i testi con delle immagini, mentre oggi è possibile realizzare delle ombre senza immagini o javascript specifici, soltanto una semplice riga di CSS3:

.testo_ombra {
	text-shadow: #aaa, 2px 2px 3px;
}

Il primo valore indica il colore dell’ombra (se si seleziona un colore grigio, si darà l’effetto ombra, mentre con colori più vivaci si darà un effetto bagliore), gli altri 2 valori successivi rappresentano l’offset orizzontale e verticale (2px è un valore ottimale per dare un leggero effetto ombra non troppo pesante), l’ultimo valore rappresenta il valore di sfumatura (anche in questo caso ¾ px rappresenta un valore medio, non pesante).

Condividi questo articolo su:

Facebook Twitter Linkedin Digg Email

Leave a Comment

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">


sei − = 0