Riflessioni, bagliori e sfocature CSS cross-browser

Le riflessioni possono aggiungere una dimensione interessante agli oggetti, dando un tocco di realismo e dando loro un contesto all'interno di ciò che li circonda. Diamo un'occhiata al raggiungimento di riflessioni con i CSS e esamineremo l'offuscamento luminoso e cross-browser anche per buona misura.

ipotesi

Seguendo questo tutorial si lavora su una serie di presupposti:

Conosci il tuo HTML.
Hai familiarità con i selettori CSS e CSS2.
Se vuoi ricreare esattamente l'esempio, dovresti sapere come box-ombra lavori. Non è la chiave di questo tutorial, quindi dovrai capirlo da solo. Se hai bisogno di una spiegazione, ti suggerisco di dare un'occhiata a CSS3 rispetto a Photoshop: Angoli arrotondati e Ombre scatolate.

Box-reflect vs. 'My Method'

Box-reflect è una proprietà CSS che si intende esattamente per questo scopo: fare riflessioni. Non useremo box-riflettere e maschera-image, perché:

Al momento della scrittura entrambe le proprietà sono supportate solo da webkit (Chrome e Safari).
L'implementazione è a dir poco buggy.

Quando Microsoft ha introdotto i suoi effetti filtro (si pensi all'era di IE 4, alle tabelle nidificate per il layout e alle immagini per i riflessi), i filtri sudici non si applicavano a tutti gli elementi. La mia ipotesi è che abbiano usato una sorta di riquadro di delimitazione dall'angolo in alto a sinistra all'angolo in basso a destra dell'elemento, il che aveva senso, perché, a mia conoscenza, non c'era un modo per superare questa casella. Tuttavia, non l'hanno mai corretto.

Ora, nell'era di Chrome 17, il webkit ha commesso lo stesso errore. Maschera le immagini, la chiave per -webkit-box-riflettere, crea una sorta di istantanea dinamica all'interno della scatola perimetrale, la incolla sotto e ne modifica l'opacità. Ho provato a ricreare la demo usando -webkit-box-reflect:

Non l'ho finito, ma il problema è chiaro. L'ETBR ha border-radius e box-ombra. L'ombra della scatola è visibile all'interno, ma non all'esterno della casella di delimitazione.

Nel mio metodo transform matrix, inset box-shadow e opacity sostituiranno box-reflect e mask-image. Le limitazioni:

La più grande limitazione è che inset-box-shadow non rende il riflesso completamente trasparente. È una combinazione di trasparenza reale e falsa che funzionerà la maggior parte del tempo, ma non sempre.
Il testo nell'ETBR non è influenzato dall'inserto box-shadow. Questo succede se il colore del testo non è lo stesso del colore di sfondo della superficie.

Fiddle | A schermo intero

Il colore del testo non diventa più scuro dove lo sfondo fa. Quindi sembra che tu non possa avere un colore diverso e l'ombra della scatola insieme.

Scelte ...

Mentre siamo in tema di matrici e riflessioni ...

Prendi la pillola blu - ti mostro come ricreare la demo parola per parola. Prendi la pillola rossa - ti mostrerò come fare i riflessi di qualsiasi cosa e ti dirò dove puoi comprare queste tonalità riflettenti per un prezzo molto interessante.

In poche parole; alcuni dei seguenti passaggi sono opzionali, a seconda se si desidera ricreare il pixel demo per pixel.

Opzionale: preparativi

La demo inizia con un modello HTML5 ...

index.html

      Riflessioni CSS3

... e questo file CSS.

style.css

 html height: 100%;  body text-align: center; altezza della linea: 1; margine: 0; padding: 0; altezza: 100%;  p line-height: 1.2;

E, naturalmente, aggiungeremo un link al foglio di stile:

    Riflessioni CSS!

2D, ma 3D

La demo è 2D. Non un singolo elemento 3D. Lo sappiamo, ma il nostro obiettivo è quello di fare loro penso che abbiamo costruito questo e poi fotografato la vista frontale.

Se vogliamo che credano che sia 3D, dovremmo determinare come gli oggetti sono posizionati e ruotati nello spazio 3D. La demo ha un orizzonte. Il 10% più alto è il 'cielo' nero, l'altro 90% è un falso piano 3D. L'elemento da riflettere (di seguito indicato nella nostra demo come ETBR) e il piano è perpendicolare l'uno all'altro (l'angolo è di 90 °), la riflessione deve essere parallela all'ETBR.

Step 1: Opzionale The Plane & the ETBR

L'HTML:

   riflessione

L'ETBR è un bambino dell'aereo. In questo modo, rimane nella stessa posizione vista dall'aereo e il bagliore rimane nell'aereo.

 body text-align: center; altezza della linea: 1; margine: 0; padding: 0; colore di sfondo: # 000; altezza: 100%;  p line-height: 1.2;  #plane left: 0; superiore: 10%; larghezza: 100%; fondo: 0; larghezza minima: 1080px; altezza minima: 600 px; posizione: assoluta; overflow: nascosto; overflow-x: visibile;

Nota:

L'aereo ha una larghezza minima e un'altezza minima, quindi l'ETBR è sempre visibile.
L'overflow-y è impostato su nascosto, quindi il bagliore dell'ETBR rimane nel piano. (Il cielo deve essere nero come la pece).
L'aereo non ha un colore di sfondo, ma prende il suo colore dal bagliore, che non ha senso a nessun livello, ma sembra il migliore.

Passaggio 2: il markup di riflessione

Individua l'oggetto (ETBR), copialo, incollalo dentro di sé e rinominalo in refl (ection):

 riflessioneriflessione

Ora all'interno del css crea il selettore dell'oggetto. Aggiungi #refl al selettore in modo che i nostri stili siano applicati a entrambi gli elementi:

 #ETBR, #refl

Fondamentalmente, il CSS e l'HTML della riflessione devono essere gli stessi del CSS e dell'HTML dell'ETBR. Posizioneremo, speccheremo e impreziosiremo il riflesso del passaggio 5. Ma, per il momento, nasconderemo il riflesso.

 #ETBR, #refl  #refl display: none;

Internet Explorer è Internet Explorer, dobbiamo aggiungere alcuni HTML condizionali:

      Riflessioni CSS3              riflessioneriflessione

Potresti chiederti perché, solo nudo con me. Perché sei in ospedale, questo primo Fiddle sarà completamente nero. Vuoi vedere l'influenza dell'aereo? Ridimensionalo.

Fiddle | A schermo intero

Passaggio 3: Stile di base opzionale

Questo non ha bisogno di spiegazioni:

 #ETBR, #refl color: # 004; font-family: Impact, 'Arial Black', Helvetica, Arial, sans-serif; text-transform: maiuscolo; dimensione del font: 200px; background-color: #FFE; font-weight: bold; imbottitura: 30px; display: blocco in linea;  #refl display: none;

OK, una piccola spiegazione. La combinazione di allineamento del testo: centro; e display: blocco in linea; centra un elemento vecchia scuola, ma non è il Santo Graal; gli elementi in linea non possono contenere elementi di blocco. L'ho usato, perché non volevo aggiungere migliaia di contenitori fluttuanti per questo esempio. Generalmente però, questa è la strada da percorrere.

Fiddle | A schermo intero

Fase 4: Angoli arrotondati opzionali e bagliore

Il bagliore consiste di tre ombre: un'ombra grande, allungata (che assomiglia più al riflesso della luce sull'aereo), il bagliore reale (un'ombra bianca con una gamma sfocata più breve) e un'ombra nera incastonata (che rende L'ETBR sembra incandescente). Come ho detto prima, non ho intenzione di spiegare come funziona box-shadow e border-radius parla da solo in questi giorni.

 #ETBR, #refl color: # 004; font-family: Impact, 'Arial Black', Helvetica, Arial, sans-serif; text-transform: maiuscolo; dimensione del font: 200px; background-color: #FFE; font-weight: bold; imbottitura: 30px; display: blocco in linea; box-shadow: rgba (255,255,240, .2) 0 0 200px 100px, rgba (255,255,240, .3) 0 0 40px, inset rgba (0,0,0, .8) 0 0 20px; border-radius: 30px;

Fiddle | A schermo intero

Passaggio 5: Posizionamento della riflessione

Svuotare il selettore #refl per rendere visibile il riflesso. Poiché i riflessi non sono "reali", la nostra riflessione non farà parte del flusso documentale; dovrebbe galleggiare. La scelta ovvia è di impostare la posizione su assoluto, il che significa che l'elemento è posizionato rispetto al suo elemento antenato posizionato prima (non statico). Poiché non esiste un antenato posizionato prima del riflesso, sarà posizionato rispetto al tag del corpo.

È molto più semplice posizionare la riflessione rispetto al testo reale, che è anche un antenato del riflesso (coincidenza?). Per fare ciò, dobbiamo prima "posizionare" l'ETBR:

 #ETBR, #refl color: # 004; font-family: Impact, 'Arial Black', Helvetica, Arial, sans-serif; text-transform: maiuscolo; dimensione del font: 200px; background-color: #FFE; font-weight: bold; imbottitura: 30px; display: blocco in linea; box-shadow: rgba (255,255,240, .2) 0 0 200px 100px, rgba (255,255,240, .3) 0 0 40px, inset rgba (0,0,0, .8) 0 0 20px; border-radius: 30px; posizione: relativa;

Questo in realtà non cambia la posizione, ma è posizionato. Adesso:

 #refl position: absolute; i primi 100%; a sinistra: 0;

La parte superiore della riflessione è relativa all'altezza e alla posizione dell'ETBR. Lo 0% darà loro lo stesso massimo, il 200% lascerà uno spazio grande quanto l'altezza dell'ETBR e il 100% posiziona la parte superiore del riflesso nella parte inferiore dell'ETBR. La sinistra è la stessa, ma prende la percentuale della larghezza.

Fiddle | A schermo intero

Passaggio 6: mirroring moderno, sfocatura e trasparenza

Quasi tutti i browser di uso comune hanno queste funzionalità, da IE6 a Google Chrome. L'implementazione è diversa tuttavia. I browser moderni sono molto semplici, per ogni caratteristica di una proprietà: trasformazione, sfocatura e opacità. Useremo anche box-shadow, ma prima rispecchiamo.

Mirroring

 #refl position: absolute; i primi 100%; a sinistra: 0; -moz-transform: scaleY (-1); -webkit-transform: scaleY (-1); -ms-transform: scaleY (-1);

Con la trasformazione possiamo modificare un elemento in ogni parallelogramma che puoi immaginare. Molti parallelogrammi, lo so. Ma abbiamo solo bisogno di rispecchiare il riflesso, quindi lasceremo la maggior parte delle funzioni di trasformazione inutilizzate.

Qualsiasi progettista dovrebbe sapere che il ridimensionamento di -1 sull'asse Y è lo stesso del mirroring. Il ridimensionamento sull'asse Y sta moltiplicando la distanza tra la parte superiore (e inferiore) e il centro. Se scaliamo per 2 sull'asse Y, la distanza tra la cima e il centro sarà due volte maggiore. Se riduci di -1, la distanza sarà la stessa, ma in alto è dove si trovava il fondo e in basso dove era la cima. Congratulazioni, sai come rispecchiare!

blur

Tutti i browser moderni supporteranno molto presto i filtri, filtri -webkit o filtri SVG. FF, Opera e IE10 supportano già quest'ultimo, Safari e Chrome stanno solo costruendo la tensione prima di rilasciarlo. Uno dei filtri SVG è il buon vecchio sfocatura gaussiana. È lento, ma è qualcosa ...

Crea un file "filter.svg" nella stessa cartella di style.css. Il suo contenuto:

Formalità, ad eccezione delle regole da 6 a 8. Il filtro chiamato "sfocatura" (si può chiamare qualsiasi cosa) sfuma 2 pixel orizzontalmente e 3 pixel verticalmente. Torna al foglio di stile!

 #refl position: absolute; i primi 100%; a sinistra: 0; -moz-transform: scaleY (-1); -webkit-transform: scaleY (-1); -ms-transform: scaleY (-1); filtro: url (filter.svg # blur); / * FF, IE10 & Opera * / -webkit-filter: blur (2px);

filter.svg # sfocatura significa l'elemento 'sfocatura' in filter.svg. Se l'ID del filtro fosse "qualsiasi cosa", l'url sarebbe filter.svg # nulla. Il raggio di sfocatura è definito nel file SVG. I browser Webkit mettono tutto questo in un'unica regola.

Trasparenza

La trasparenza è molto più lunga, quindi dobbiamo solo specificare una proprietà:

 #refl position: absolute; i primi 100%; a sinistra: 0; -moz-transform: scaleY (-1); -webkit-transform: scaleY (-1); -ms-transform: scaleY (-1); filtro: url (filter.svg # blur); / * FF, IE10 & Opera * / -webkit-filter: blur (2px); opacità: 0,25;

Non riesco a mettere il file SVG nel violino. (Devo dare l'esempio, quindi non posso mescolare la semantica e la presentazione, ma in ogni caso renderebbe le cose più complicate ...) Ma non faccio svanire SVG ...

Fiddle | A schermo intero

Non è completo Quando Apple ha creato la riflessione il terzo giorno, è stato pensato per essere meno riflessivo. Il riflesso dovrebbe essere meno chiaro più lontano dalla superficie. Che ci sia l'oscurità!

Funziona solo se la superficie ha un colore pieno e il colore del carattere è simile a questo colore: lo scuriremo aggiungendo un altro riquadro-ombra. Questa casella-ombra sovrascrive quella vecchia in #ETBR, #refl selettore. Contrasteremo ciò riprogrammando l'ombra inserita nel vecchio selettore. La seconda ombra è la nuova ombra. Ricorda che ogni ombra che aggiungiamo al riflesso è specchiata.

 #refl position: absolute; i primi 100%; a sinistra: 0; -moz-transform: scaleY (-1); -webkit-transform: scaleY (-1); -ms-transform: scaleY (-1); filtro: url (filter.svg # blur); / * FF, Opera + IE10 * / -webkit-filter: blur (2px); / * webkit * / opacity: .25; box-shadow: inset rgba (0,0,0, .8) 0 0 20px, inserto # 000 0 50px 100px; / * prima ombra è vecchia * /

OffsetY della seconda ombra è di 50 pixel, ma l'elemento è sempre speculare dopo l'ombra è applicata. L'ombra non si sposta verso il basso, ma si sposta verso l'alto.

Guarda questo:

Fiddle | A schermo intero

Grande! Ora dai un'occhiata a IE8 (o prendi la mia parola per questo): sono fondamentalmente due copie dell'ETBR l'una sopra l'altra, che non sono specchiate, trasparenti o sfocate.

Step 7: Filthy Filtering

Abbiamo aggiunto alcuni commenti condizionali quando abbiamo iniziato; tre gruppi.

I moderni browser e IE10, che non supportano i vecchi filtri IE (IE10 ha abbandonato il supporto), ma supportano quelli nuovi.
IE8 e precedenti, i vecchi, supportano i filtri sporchi e non supportano quelli nuovi.
IE9, che supporta un po 'di entrambi.

Se IE9 non supportasse le nuove cose, sarebbe molto più semplice. (Non fraintendetemi, sono felice che Internet Explorer stia cercando di cambiare, ma sarebbe più facile ...) E per renderlo più complicato, ci sono differenze tra i filtri sporchi in IE9 e IE8. Basta lamentarsi, facciamo qualcosa al riguardo. Aggiungi per ogni gruppo un selettore #refl e sposta la proprietà opacity su Modern.

 #refl position: absolute; i primi 100%; a sinistra: 0; -moz-transform: scaleY (-1); -webkit-transform: scaleY (-1); -ms-transform: scaleY (-1); filtro: url (filter.svg # blur); / * FF, Opera + IE10 * / -webkit-filter: blur (2px); / * webkit * / box-shadow: inset rgba (0,0,0, .8) 0 0 20px, inserto # 000 0 50px 100px;  .modern #refl opacity: .25;  .ie9 #refl  .oldie #refl

I filtri sporchi non amano l'opacità CSS2. E a proposito di filtri sporchi, useremo questi:

DXImageTransform.Microsoft.BasicImage ci consente di rispecchiare l'immagine e cambiarne l'opacità
DXImageTransform.Microsoft.MotionBlur e DXImageTransform.Microsoft.MotionBlur è fantastico.
DXImageTransform.Microsoft.Gradient in sostituzione del secondo box-shadow.

Mirroring

Il primo filtro, BasicImage, ha in effetti la proprietà "mirror"! SÌ! Sfortunatamente, impostando questa proprietà su 1 il contenuto viene specchiato orizzontalmente, non verticalmente. Ma questo non significa che sia inutile per noi. Ruotare un elemento di 180 ° e specularlo orizzontalmente equivale a rispecchiarlo verticalmente. E questo è possibile:

 .oldie #refl filtro: progid: DXImageTransform.Microsoft.BasicImage (mirror = 1, rotation = 2);

Questa rotazione non è misurata in gradi: 0 è 0 °, 1 è 90 °, 2 è 180 ° e 3 è 270 °. Solo i vecchi hanno bisogno di questo. Supporta IE9 -ms-transform.

Opacità

Possiamo specificare l'opacità nello stesso filtro ...

 .ie9 #refl -ms-filter: "progid: DXImageTransform.Microsoft.BasicImage (opacity = .25);"  .oldie #refl filter: progid: DXImageTransform.Microsoft.BasicImage (mirror = 1, rotation = 2, opacity = .35);

IE9 (e IE8, ma penso che Internet Explorer abbia già abbastanza attenzioni) supporta -ms-filter. Il valore è una grande stringa. Questo crea comprensione dagli altri browser (Firefox va da uno psichiatra ogni venerdì a causa di Internet Explorer).

blur

... ma abbiamo bisogno di un nuovo filtro per la sfocatura. Filtri multipli, se vogliamo farlo sembrare buono. Nessuna virgola, no filtro:s tra i filtri, solo uno spazio o una nuova riga. -ms-filter non ottiene più nuove righe ...

 .ie9 #refl -ms-filter: "progid: DXImageTransform.Microsoft.BasicImage (opacity = .25) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow =" false ") progid: DXImageTransform.Microsoft.MotionBlur (forza = 15, direzione = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false"); "  .oldie #refl filtro: progid: DXImageTransform.Microsoft.BasicImage (mirror = 1, rotation = 2, opacity = .35) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false") progid : DXImageTransform.Microsoft.MotionBlur (strength = 15, direction = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false");

Se lo sfogliamo una volta con un raggio di 6 pixel, sembra che qualcuno abbia scattato 4 copie del riflesso e spostato di 6 pixel in alto, uno di 6 pixel in basso, uno di 6 pixel a sinistra e uno di 6 pixel a destra. Se vuoi esibirti al pub, dovresti conoscere il nome: Box Blur. L'aggiunta di iterazioni (sfocatura dello sfocato) rende Box Blur come una normale sfocatura. La seconda iterazione è motion blur, perché sembra buona.

Fiddle | A schermo intero

Questa volta, non uno, ma due cose sono sbagliate:

La sfocatura ha spostato il riflesso di alcuni pixel verso l'alto e verso destra in IE9, ma in IE8, ha spostato il riflesso verso il basso. Perché? È un mistero.
In IE7 e IE8, la riflessione è altrettanto trasparente ovunque.

Primo problema: perché i vecchi non supportano box-shadow, useremo un gradiente alfa sporco come sostituto. Questi sono, per quanto ne so, i primi valori simili a RGBA nei CSS, ma se le specifiche w3c non dicevano nulla sui valori di rgba in quei giorni, Internet Explorer non ascoltava. Hanno usato 8 posti esadecimali invece di 6. I primi due rappresentano l'alfa; gradienti sporchi prendono ARGB invece di RGBA, che, devo ammettere, suona molto meglio:

 .ie9 #refl -ms-filter: "progid: DXImageTransform.Microsoft.BasicImage (opacity = .25) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow =" false ") progid: DXImageTransform.Microsoft.MotionBlur (forza = 15, direzione = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false"); "  .oldie #refl filtro: progid: DXImageTransform.Microsoft.Gradient (startColorstr = # 99000000, endColorstr = # 00000000) progid: DXImageTransform.Microsoft.BasicImage (mirror = 1, rotation = 2, opacity = .35) progid: DXImageTransform .Microsoft.Blur (PixelRadius = '3', MakeShadow = "false") progid: DXImageTransform.Microsoft.MotionBlur (strength = 15, direction = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = " false ");

Anche il gradiente deve essere sfocato, quindi è il primo. Le sfumature del filtro sporco sono verticali per impostazione predefinita. startColorstr è il colore sfumato nella parte superiore e startColorstr il colore in basso, ma è speculare! # 99000000 è uguale a rgba (0, 0, 0, 153). Ricorda: più alto impostiamo l'opacità del gradiente, minore è l'opacità del riflesso.

Il posizionamento è solo una questione di tentativi ed errori. Poiché la riflessione ha già impostato la sua posizione in percentuale, non è possibile regolarla all'interno del pixel utilizzando le proprietà sinistra e superiore. Invece, useremo il margine:

 .ie9 #refl margin-top: 20px; margin-left: -10px; -ms-filter: "progid: DXImageTransform.Microsoft.BasicImage (opacity = .25) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow =" false ") progid: DXImageTransform.Microsoft.MotionBlur (forza = 15 , direction = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false"); "  .oldie #refl margin-top: -20px; margin-left: -7px; filtro: progid: DXImageTransform.Microsoft.Gradient (startColorstr = # 99000000, endColorstr = # 00000000) progid: DXImageTransform.Microsoft.BasicImage (mirror = 1, rotation = 2, opacity = .35) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false") progid: DXImageTransform.Microsoft.MotionBlur (strength = 15, direction = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false");

Fiddle | A schermo intero

Step 8: Tocchi finali

Cambiamo due piccole cose prima di passare il tuo tempo a qualcosa di meglio, come guardare i panda starnutire su youtube.

Posizionare il riflesso oltre l'ETBR (nello spazio z), perché la riflessione sfocata si trova sopra l'ETBR e sopra il bagliore.
Abbassa l'ETBR. La parte superiore dell'ETBR si allinea perfettamente all'orizzonte, aspetto molto strano.

Le soluzioni:

Normalmente, impostiamo lo z-index dell'ETBR e il riflesso rispettivamente su 2 e 1. Ma poiché non ci sono altri elementi dietro il riflesso in questa demo (di nuovo, in z-space), possiamo semplicemente impostare la z- indice del riflesso a -1.
Aggiungi padding nella parte superiore del piano. Poiché l'ETBR è un bambino dell'aereo, si muoverà verso il basso.

Ecco il file CSS. Le modifiche finali sono evidenziate:

style.css

 html height: 100%;  body text-align: center; altezza della linea: 1; margine: 0; padding: 0; colore di sfondo: # 000; altezza: 100%;  p line-height: 1.2;  #plane padding-top: 5%; a sinistra: 0; superiore: 10%; larghezza: 100%; fondo: 0; larghezza minima: 1080px; altezza minima: 600 px; posizione: assoluta; overflow: nascosto; overflow-x: visibile;  #ETBR, #refl color: # 004; font-family: Impact, 'Arial Black', Helvetica, Arial, sans-serif; text-transform: maiuscolo; dimensione del font: 200px; background-color: #FFE; font-weight: bold; imbottitura: 30px; display: blocco in linea; box-shadow: rgba (255,255,240, .2) 0 0 200px 100px, rgba (255,255,240, .3) 0 0 40px, inset rgba (0,0,0, .8) 0 0 20px; border-radius: 30px; posizione: relativa;  #refl position: absolute; z-index: -1; i primi 100%; a sinistra: 0; -moz-transform: scaleY (-1); -webkit-transform: scaleY (-1); -ms-transform: scaleY (-1); filtro: url (filter.svg # blur); / * FF, Opera + IE10 * / -webkit-filter: blur (2px); / * webkit * / box-shadow: inset rgba (0,0,0, .8) 0 0 20px, inserto # 000 0 50px 100px;  .modern #refl opacity: .25;  .ie9 #refl margin-top: 20px; margin-left: -10px; -ms-filter: "progid: DXImageTransform.Microsoft.BasicImage (opacity = .25) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow =" false ") progid: DXImageTransform.Microsoft.MotionBlur (forza = 15 , direction = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false"); "  .oldie #refl margin-top: -20px; margin-left: -7px; filtro: progid: DXImageTransform.Microsoft.Gradient (startColorstr = # 99000000, endColorstr = # 00000000) progid: DXImageTransform.Microsoft.BasicImage (mirror = 1, rotation = 2, opacity = .35) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false") progid: DXImageTransform.Microsoft.MotionBlur (strength = 15, direction = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false");

index.html

      Riflessioni CSS3              riflessioneriflessione

filter.svg

Conclusione

E questo è tutto! Questo è l'ultimo violino, senza la sfocatura del filtro SVG.

Fiddle | A schermo intero

Come qualcosa in più, ecco un semplice CSS (tranne per le stelle sullo sfondo) Mac Dock che utilizza questa tecnica.

Spero ti sia piaciuto questo tutorial e spero che tu abbia imparato qualcosa di nuovo. Sentiti libero di lasciare qualsiasi domanda nei commenti!

Web design