CSS3 - Box Shadow |
| Scritto da ricdata | |||
| Domenica 01 Maggio 2011 19:46 | |||
 Finalmente, dopo una lunga attesa, tutti i browser web più utilizzati si sono aggiornati per il supporto dei CSS3, per cui è giunta l'ora di iniziare ad impare ad usarli ed utilizzarli nei nostri siti Joomla! per creare effetti ed animazioni che prima erano ottenibili solo tramite Javascript.Una piccola premessa prima di iniziare: c'è da dire che non tutti i browsers utilizzano lo stesso motore grafico, per cui dovremo inserire nel nostro foglio di stile le istruzioni per tutti i motori di rendering più usati, ovvero Webkit (Safari, Chrome), Direct2D (Firefox, IE9+), Gecko (Firefox, SeaMonkey, Camino). Per maggiori informazioni vi rimando a Wikipedia. In questo articolo vedremo come creare l'effetto ombra ad elementi come DIV, TABLE, LI e più in generale per ogni elemento HTML. Come avrete notato, tra un motore grafico e l'altro cambia solo il nome della direttiva, mentre i relativi attributi sono identici, per cui la cosa si semplifica molto. Analizziamo gli attributi, in modo da capire meglio come personalizzare le caratteristiche dell'ombra a seconda delle esigenze. - il primo valore, espresso in pixel, determina lo spostamento orizzontale dell'ombra rispetto al box principale. - il secondo valore, determina lo spostamento verticale. - il terzo valore, serve per dare all'ombra una sfumatura più o meno accentuata. - il quarto valore, in esadecimale (ma è possibile utilizzare anche RGBA) determina il colore dell'ombra. Eccovi qualche esempio:
Ma non è tutto... Vogliamo un ombra interna all'elemento? Possiamo farlo, basta aggiungere l'attributo "inset" ad ogni direttiva. Quindi avremo: altri esempi:
Compatibilità Browsers:
|
