Drop shadows con i CSS
Lunedì 20 Novembre 2006 - 10:35
di Alessandro Fulciniti
È divenuto piuttosto popolare di recente CSS drop shadows (qui l’esempio): a detta dell’autore è un metodo esclusivamente basato sui CSS per ottenere un effetto ombra senza l’uso di immagini di sfondo.
In realtà si tratta di una soluzione basata su HTML e CSS, dato che necessita di abbondante uso di markup aggiuntivo (cinque div annidati). Personalmente, vedo soluzioni simili come innovazioni involutive: presentano un modo nuovo di fare le cose, ma non aggiungono niente di pratico né risultati migliori ai metodi esistenti.
A proposito di drop shadow: una tecnica piuttosto flessibile e robusta si può trovare in questa pagina della serie Usare il background. La tecnica è stata successivamente espansa in Fun with drop shadows con il relativo esempio.
Commenti
1
spero che la popolarità della tecnica svanisca quanto prima … io perlomeno non mi fiderei di un articolo scritto da uno che non ha nemmeno capito che un id deve essere per definizione univoco.
oltre a questo non vedo come l’abuso di elementi possa fare così rumore … insomma, un semplice JS basato su un nome di una classe dedicata sarebbe stato, secondo me, molto più interessante.
2
5 div!!!!!
meglio usare le immagini
3
Mi aggancio al discorso ombre per una domanda che mi è sorta spontanea.
Su sfondo bianco usando il sistema della dropshadow.jpg è perfetto ma cambiando colore al body ovviamente si vede “lo stacco”. Se definisco l’immagine come .png (da Photoshop salvo con trasparenza) al posto della jpg so già che da Firefox (o IE 7) la trasparenza dell’ombra sarà ok ma con IE precedenti non si risolve.
O almeno io non trovo un sistema grafico che mi gestisca l’ombra in trasparenza su IE con sfondi di colori diversi. Idee?Ciao, scusate il semi OT
J
4
hai provato con le png a 8 bit ? mi sembra che IE, vecchie versioni, le supporti (sicuramente meglio delle 24 ma non so con l’alpha come si comporta)
5
JFK, purtroppo IE fino alla versione 6 non supporta le PNG semi-trasparenti.. a meno di qualche trucco. Le soluzioni sono due: o cambiare il bianco con lo sfondo reale della pagina o tentare una delle diverse soluzioni per Usare il formato PNG su IE (adoro quella biglia).
# - postato da Alessandro Fulciniti - 20 Novembre 2006 - 21:03
6
“purtroppo IE fino alla versione 6 non supporta le PNG semi-trasparenti”
.. o per dirla meglio ..
“IE fino alla versione 6 non supporta la semitrasparenza delle PNG”.
# - postato da Alessandro Fulciniti - 20 Novembre 2006 - 21:16
7
5 div per le immagini…me ne sono accorta anche io!…li ho trasformati in classi…ho fatto una cavolata? :)
8
Non male. E sono d’accordo che cmq è un tocco di fantasia e non una vera innovazione :P Però bellino dai.
9
Purtroppo molti guardano il risultato senza preoccuparsi del modo in cui è stato raggiunto: la tecnica è decisamente da evitare visto il codice..
Io continuerei ad usare le immagini di sfondo senza disturbare la struttura dell’html :)
10
io la tecnica l’ho rielaborata in modo non intrusivo.
P.S. su IE7 da problemi … ma lo da anche la tecnica originaria quindi presumo sia un bug di IE7
11
http://www.alistapart.com/arti...../onionskin
# - postato da albo - 22 Novembre 2006 - 11:06
12
Prima di inventare quel tipo di soluzione, il creatore si è reso conto del valore semantico del codice HTML prodotto?
Che cosa penserebbe un non vedente, quando accidentalmente approda su una pagina realizzata con quel sistema?
Io penso che certe riflessioni siano obbligatorie per i professionisti.
# - postato da Filannino Michele - 01 Dicembre 2006 - 16:54