Nuove funzionalità CSS 3

Ormai non si parla altro che di HTML 5, CSS 3 e Javascript (soprattutto jQuery) come nuove strumentazioni fondamentali per un Web Designer d’oggi.
Anche se ancora non completamente supportato dai vari browser diffusi nel mondo, questi nuovi linguaggi stanno sempre più conquistando il mercato, proponendosi come standard definitivi.
Soprattutto le nuove possibilità grafiche concesse dalla nuova versione 3 delle “Cascading Style Sheets” conquistano la fantasia dei professionisti del web, curiosi di provare tutte le nuove potenzialità.
Vediamo un po’ velocemente….

Trasparenza:

Finalmente è stata implementata lo standard per inserire, oltre al colore, anche un valore di trasparenza (o opacità), il tutto in maniera semplice e funzionale, ossia è possibile associare un valore di trasparenza a qualsiasi elemento della pagina web.
E’ possibile quindi rendere semi-trasparente una immagine con un simile codice CSS:

img {
	opacity: 0.5;
}

allo stesso modo, anche un DIV o una Tabella.
Il valore di opacità corrisponde a un valore compreso fra 0 e 1, con zero che rappresenta una completa trasparenza..
Esistono altre 2 opzioni disponibili per realizzare elementi web semi-trasparenti, precisamente utilizzando il sistema di colori RGBA o HSLA, in entrambi puoi definire il valore l’alpha (trasparenza).
Precisamente per definire un colore di sfondo semi-trasparente, bisogna scrivere il seguente codice:

.div_di_esempio {
	background-color: rgba(32, 135, 210, 0.5);
}

In questo caso si crea uno sfondo blu semi-trasparente.

Continua…

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="">


tre + 2 =