Share
Reflecțiile pot adăuga o dimensiune interesantă obiectelor, dând o notă realistă și oferindu-le un context în vecinătatea lor. Să aruncăm o privire asupra realizării reflecțiilor cu CSS și vom examina blurirea strălucitoare și a browserelor încrucișate pentru o măsură bună.
În urma acestui tutorial funcționează mai multe ipoteze:
Accentsconagua
box-shadow lucrări. Nu este cheia acestui tutorial, deci trebuie să vă dați seama. Dacă aveți nevoie de o explicație, vă sugerez să aruncați o privire asupra CSS3 vs. Photoshop: Cornere rotunjite și umbre de box.Box-reflect este o proprietate CSS care este destinată exact acestui scop: a face reflecții. Nu vom folosi box-reflectă și masca-imagine, deoarece:
Când Microsoft și-a prezentat efectele de filtrare (gândiți-vă la epoca IE 4, tabele imbricate pentru aspect și imagini pentru reflecții), filtrele murdare nu se aplică întregului element dat. Cred că au folosit o anumită casetă delimitată de la colțul din stânga sus până la colțul din dreapta jos al elementului, ceea ce a făcut sens, din câte știu că nu a existat o cale de a depăși această casetă. Cu toate acestea, nu au corectat-o niciodată.
Acum, în epoca Chrome 17, webkit a făcut aceeași greșeală. Imagini mascate, cheia pentru -webkit-box-reflectă, face un fel de instantaneu dinamic în caseta de frontieră, îl pastează mai jos și își schimbă opacitatea. Am încercat să recreez demo-ul folosind -webkit-box-reflect:
Nu am terminat-o, dar problema este clară. ETBR a avut border-radius și box-shadow. Umbra în cutie este vizibilă înăuntru, dar nu în afara casetei delimitate.
În metoda mea se transformă matricea, cutie-umbra și opacitatea se vor înlocui cu box-reflect și mască-imagine. Limitările:
Fiddle | Ecran complet
Culoarea textului nu devine mai întunecată în cazul în care fundalul face. Se pare că nu poți avea o culoare diferită și cutia-umbra impreuna.
Deși suntem pe tema matricelor și a reflecțiilor ...
Luați pilula albastră - vă arăt cum să recreați cuvântul demonstrativ. Luați pilula roșie - vă voi arăta cum să faceți reflecții despre orice și vă voi spune unde puteți cumpăra aceste nuanțe reflectorizante pentru un preț foarte interesant.
Pune simplu; unii dintre următorii pași sunt opționali, în funcție de dacă doriți să recreați pixelul demo pentru pixeli.
Demo-ul începe cu un șablon HTML5 ...
index.html
CSS3 Reflecții
... și acest fișier CSS.
style.css
html înălțime: 100%; corp text-align: center; linia-înălțime: 1; marja: 0; umplutura: 0; înălțime: 100%; p linie-înălțime: 1.2;
Și, desigur, vom adăuga un link la foaia de stil:
Reflecții CSS!
Demo-ul este 2D. Nu există niciun element 3D. Știm asta, dar scopul nostru este să facem lor cred că am construit acest lucru și apoi am fotografiat vederea frontală.
Dacă vrem să creadă că este 3D, ar trebui să determinăm modul în care obiectele sunt poziționate și rotite în spațiul 3D. Demo-ul are un orizont. Topul de 10% este negru "cer", celelalte 90% este un plan 3D fals. Elementul care urmează să fie reflectat (denumit în continuare în demo - ul nostru ca EtBr) și planul sunt perpendiculare unele pe altele (unghiul este de 90 °), reflexia trebuie să fie paralelă cu ETBR.
HTML:
reflecţie
ETBR este un copil al avionului. În acest fel, aceasta rămâne în aceeași poziție văzută din avion, iar stingerea rămâne în plan.
corp text-aliniere: centru; linia-înălțime: 1; marja: 0; umplutura: 0; fundal-culoare: # 000; înălțime: 100%; p linie-înălțime: 1.2; #plane stânga: 0; top 10%; lățime: 100%; fund: 0; min-lățime: 1080px; min-înălțime: 600px; poziția: absolută; overflow: ascuns; overflow-x: vizibil;
Notă:
Localizați obiectul (ETBR), copiați-l, lipiți-l în sine și redenumiți-l pentru a refl (ecuație):
reflecţiereflecţie Acum, în css crea selectorul obiectului. Adăugați #refl la selector, astfel încât stilurile noastre să fie aplicate ambelor elemente:
#ETBR, #refl
Practic, CSS și HTML ale reflecției trebuie să fie aceleași cu CSS și HTML ale ETBR. Vom poziționa, vom reflecta și vom preface reflecția de la pasul 5. Dar, pentru moment, vom ascunde reflexia.
#ETBR, #refl #refl afișare: niciunul;
Internet Explorer fiind Internet Explorer, trebuie să adăugăm câteva coduri HTML condiționate:
CSS3 Reflecții reflecţiereflecţie
S-ar putea să te întrebi de ce, pur și simplu cu mine. Pentru că ești pacient în spital, prima Fiddle va fi complet neagră. Vreți să vedeți influența avionului? Redimensionați-l.
Fiddle | Ecran complet
Nu este nevoie de o explicație:
#ETBR, #refl culoare: # 004; font-family: Impact, "Arial Black", Helvetica, Arial, sans-serif; text-transform: majuscule; font-size: 200px; fundal-culoare: #FFE; font-weight: bold; padding: 30px; afișare: inline-block; #refl display: none;
OK, o mică explicație. Combinația dintre text-align: centru; și afișare: inline-block; un element vechi skool, dar nu este sfantul graal; elementele inline nu pot conține elemente blocate. Am folosit-o, pentru că nu am vrut să adaug mii de recipiente plutitoare pentru acest exemplu. Totuși, în general, acesta este calea de urmat.
Fiddle | Ecran complet
Stralucirea constă în trei umbre: o umbra mare, întinsă (care seamănă mai mult cu reflexia luminii din plan), strălucirea reală (o umbră albă cu un interval de estompare mai scurt) și o umbră neagră (ceea ce face ETBR arata ca este stralucitor). După cum am menționat mai devreme, nu voi explica cum funcționează umbra în cutie și raza de graniță vorbește în zilele noastre.
#ETBR, #refl culoare: # 004; font-family: Impact, "Arial Black", Helvetica, Arial, sans-serif; text-transform: majuscule; font-size: 200px; fundal-culoare: #FFE; font-weight: bold; padding: 30px; afișare: inline-block; 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; raza de graniță: 30 pixeli;
Fiddle | Ecran complet
Goliți selectorul #refl pentru a face vizibil reflexia. Deoarece reflecțiile nu sunt "reale", reflexia noastră nu va face parte din fluxul documentelor; ar trebui să plutească. Opțiunea evidentă este să setați poziția la valoare absolută, ceea ce înseamnă că elementul este poziționat în raport cu primul său element străbătut (nu static). Deoarece nu există un prim strămoș poziționat al reflecției, acesta va fi poziționat în raport cu eticheta caroseriei.
Este mult mai ușor să poziționați reflexia față de textul real, care este, de asemenea, un strămoș al reflecției (coincidență?). Pentru a face acest lucru, trebuie mai întâi să "poziționăm" ETBR-ul:
#ETBR, #refl culoare: # 004; font-family: Impact, "Arial Black", Helvetica, Arial, sans-serif; text-transform: majuscule; font-size: 200px; fundal-culoare: #FFE; font-weight: bold; padding: 30px; afișare: inline-block; 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; raza de graniță: 30 pixeli; poziție: relativă;
Acest lucru nu schimbă de fapt poziția, dar este poziționată. Acum:
#refl poziție: absolută; top: 100%; stânga: 0;
Partea superioară a reflexiei este relativă la înălțimea și poziția ETBR. 0% le va oferi același top, 200% va lăsa un decalaj la fel de mare ca înălțimea ETBR și 100% pune partea de sus a reflexiei în partea de jos a ETBR. Stânga este aceeași, dar ia procentul lățimii.
Fiddle | Ecran complet
Aproape fiecare browser utilizat în mod obișnuit are aceste caracteristici, de la IE6 la Google Chrome. Implementarea este însă diferită. Browserele moderne sunt foarte simple, pentru fiecare caracteristică o proprietate: transformare, estompare și opacitate. Vom folosi și umbra în cutie, dar în primul rând oglindirea.
#refl poziție: absolută; top: 100%; stânga: 0; -moz-transform: scaleY (-1); -webkit-transform: scaleY (-1); -ms-transform: scaleY (-1);
Cu transformarea putem modifica un element în fiecare paralelogramă pe care o puteți imagina. Multe paralelograme, știu. Dar trebuie doar să reflectăm reflecția, așa că vom lăsa cele mai multe funcții transformate neutilizate.
Orice designer ar trebui să știe că scalarea cu -1 pe axa Y este aceeași ca și oglindirea. Scalarea pe axa Y înmulțește distanța dintre partea superioară (și partea de jos) și centrul. Dacă scarăm cu 2 pe axa Y, distanța dintre vârf și centru va fi de două ori mai mare. Dacă sculați cu -1, distanța va fi aceeași, dar partea de sus este în partea de jos a fost și partea de jos este în cazul în care partea de sus a fost. Felicitări, știi cum să oglilezi!
Toate browserele moderne vor suporta filtre foarte curând, filtre -webkit-filter sau SVG. FF, Opera & IE10 suportă deja acest lucru, Safari și Chrome construiesc doar tensiunea înainte de ao elibera. Unul dintre filtrele SVG este vechiul Gaussian Blur. Este lent, dar este ceva ...
Creați un fișier "filter.svg" în același director ca stil.css. Conținutul său:
Formalități, cu excepția regulilor de la 6 la 8. Filtrul numit "blur" (se poate numi ceva) estompează 2 pixeli orizontal și 3 pixeli vertical. Înapoi la foaia de stil!
#refl poziție: absolută; top: 100%; stânga: 0; -moz-transform: scaleY (-1); -webkit-transform: scaleY (-1); -ms-transform: scaleY (-1); filtru: url (filter.svg # blur); / * FF, IE10 și Opera * / -webkit-filter: estomp (2px);
filter.svg # neclaritate înseamnă elementul "blur" în filtrul.svg. Dacă ID-ul filtrului a fost "orice", url ar fi filter.svg # nimic. Raza de estompare este definită în fișierul SVG. Browserele Webkit au pus toate acestea într-o singură regulă.
Transparența a fost mult mai lungă, deci trebuie să specificăm doar o proprietate:
#refl poziție: absolută; top: 100%; stânga: 0; -moz-transform: scaleY (-1); -webkit-transform: scaleY (-1); -ms-transform: scaleY (-1); filtru: url (filter.svg # blur); / * FF, IE10 și Opera * / -webkit-filter: estomp (2px); opacitate: .25;
Nu pot pune fișierul SVG în vioară. (Trebuie să conduc exemplul, așa că nu pot amesteca semantica și prezentarea, ar face lucrurile mai complicate oricum ...) Dar nu fac ca SVG să se estompeze ...
Fiddle | Ecran complet
Nu este completă. Când Apple a creat reflecția în a treia zi, intenționa să fie mai puțin reflectorizantă. Reflexia ar trebui să fie mai puțin clară mai departe de suprafață. Să fie întuneric!
Acest lucru funcționează numai dacă suprafața are o culoare solidă și culoarea fontului este similară cu această culoare: o vom întuneca adăugând o altă umbră. Această umbra de cutie suprascrie cea veche din #ETBR, #refl selector. Vom contracara acest lucru redefinind umbra încadrată a selectorului vechi. Al doilea umbră este noua umbră. Amintiți-vă că fiecare umbra pe care o adăugăm reflecției este oglindită.
#refl poziție: absolută; top: 100%; stânga: 0; -moz-transform: scaleY (-1); -webkit-transform: scaleY (-1); -ms-transform: scaleY (-1); filtru: url (filter.svg # blur); / * FF, Opera + IE10 * / -webkit-filtru: estompare (2px); / * webkit * / opacitate: 0,25; box-shadow: inscripție rgba (0,0,0, .8) 0 0 20px, inset # 000 0 50px 100px; / * prima umbră este veche * /
Offsetul celei de-a doua umbre este de 50 de pixeli, dar elementul este întotdeauna oglindit după se aplică umbra. Umbra nu se mișcă în jos, se mișcă.
Uita-te la asta:
Fiddle | Ecran complet
Grozav! Acum, aruncați o privire la ea cu IE8 (sau luați-mi cuvântul pentru asta): sunt în esență două copii ale ETBR deasupra celuilalt, care nu sunt oglindite, transparente sau neclară.
Am adăugat câteva comentarii condiționate atunci când am început; trei grupuri.
Dacă IE9 nu ar sprijini noile lucruri, ar fi mult mai ușor. (Nu mă înțelegeți greșit, sunt fericit că Internet Explorer încearcă să se schimbe, dar ar fi mai ușor ...) Și pentru a face mai complicat, există diferențe între filtrele murdare din IE9 și IE8. Destul de plângându-se, să facem ceva. Adăugați pentru fiecare grup un selector #refl și mutați proprietatea opacitate la moderne.
#refl poziție: absolută; top: 100%; stânga: 0; -moz-transform: scaleY (-1); -webkit-transform: scaleY (-1); -ms-transform: scaleY (-1); filtru: url (filter.svg # blur); / * FF, Opera + IE10 * / -webkit-filtru: estompare (2px); / * webkit * / box-shadow: inset rgba (0,0,0, .8) 0 0 20px, inset # 000 0 50px 100px; .modern #refl opacitate: .25; .ie9 #refl .oldie #refl
Filtrele filosofice nu le plac opacitatea CSS2. Și vorbind despre filtre murdare, vom folosi aceste:
DXImageTransform.Microsoft.BasicImage ne permite să reflectăm imaginea și să ne schimbăm opacitateaDXImageTransform.Microsoft.MotionBlur și DXImageTransform.Microsoft.MotionBlur este minunat.DXImageTransform.Microsoft.Gradient ca înlocuitor pentru cea de-a doua box-umbra.Primul filtru, BasicImage, are proprietatea "oglindă"! DA! Din păcate, setarea acestei proprietăți la 1 reflectă conținutul orizontal, nu vertical. Dar asta nu înseamnă că e inutil pentru noi. Rotirea unui element la 180 ° și oglindirea acestuia pe orizontală este la fel ca o oglindire verticală. Și acest lucru este posibil:
.oldie # refl filtru: progid: DXImageTransform.Microsoft.BasicImage (mirror = 1, rotație = 2);
Această rotație nu este măsurată în grade: 0 este 0 °, 1 este 90 °, 2 este 180 ° și 3 este 270 °. Numai vechii au nevoie de asta. IE9 acceptă -ms-transformare.
Putem specifica opacitatea din același filtru ...
.ie9 #refl -ms-filter: "progid: DXImageTransform.Microsoft.BasicImage (opacitate = .25);" .oldie #refl filtru: progid: DXImageTransform.Microsoft.BasicImage (mirror = 1, rotație = 2, opacitate = .35);
IE9 (și IE8, dar cred că Internet Explorer are deja suficientă atenție) suportă -ms-filter. Valoarea este un șir mare. Acest lucru creează înțelegerea de către celelalte browsere (Firefox merge la un psihiatru în fiecare vineri din cauza Internet Explorer).
... dar avem nevoie de un filtru nou pentru estompare. Filtre multiple, dacă vrem să o facem bine. Nu există virgule, nu filtru:s între filtre, doar un spațiu sau o linie nouă. -ms-filter nu mai are linii noi ...
.ie9 #refl -ms-filter: progid: DXImageTransform.Microsoft.BasicImage (opacitate = .25) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false") progid: DXImageTransform.Microsoft.MotionBlur (puterea = 15, direcția = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false" .oldie #refl filtru: progid: DXImageTransform.Microsoft.BasicImage (mirror = 1, rotation = 2, opacity = .35) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = : DXImageTransform.Microsoft.MotionBlur (putere = 15, direcție = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false");
Dacă o ștergem o dată cu o rază de 6 pixeli, se pare că cineva a luat 4 copii ale reflecției și a mutat un pixel de 6 pixeli deasupra, cu 6 pixeli mai jos, cu 6 pixeli la stânga și cu 6 pixeli spre dreapta. Dacă doriți să vă manifestați la bar, ar trebui să știți numele: Box Blur. Adăugarea de iterații (estomparea neclarității) face ca caseta Blur să pară ca o neclaritate normală. A doua iterație este blurul mișcării, pentru că arată bine.
Fiddle | Ecran complet
De data aceasta, nu unul, ci două lucruri sunt greșite:
A doua problema: pentru ca vechii nu sustin box-shadow, vom folosi un gradient alfa murdar ca inlocuitor. Acestea sunt, după cunoștințele mele, primele valori asemănătoare RGBA în CSS, dar dacă specificațiile w3c au spus ceva despre valorile rgba în acele zile, Internet Explorer nu a ascultat. Au folosit 8 locuri hexazecimale în loc de 6. Primele două reprezintă alfa; murdărie gradients ia ARGB în loc de RGBA, care, trebuie să recunosc, sună mult mai bine:
.ie9 #refl -ms-filter: progid: DXImageTransform.Microsoft.BasicImage (opacitate = .25) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false") progid: DXImageTransform.Microsoft.MotionBlur (puterea = 15, direcția = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false" .oldie #refl filtru: progid: DXImageTransform.Microsoft.Gradient (startColorstr = # 99000000, endColorstr = # 00000000) progid: DXImageTransform.Microsoft.BasicImage (mirror = 1, rotation = 2, opacity = .Microsoft.Blur (PixelRadius = '3', MakeShadow = "false") progid: DXImageTransform.Microsoft.MotionBlur (putere = 15, direcție = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = fals");
Gradientul trebuie să fie și neclar, deci este primul. Filtrele gradiente filtrată sunt în mod vertical în mod vertical. startColorstr este culoarea gradientului din partea de sus și startColorstr culoarea din partea de jos, dar este oglindită! # 99000000 este același cu rgba (0, 0, 0, 153). Amintiți-vă: cu cât am stabilit opacitatea gradientului, cu atât este mai mică opacitatea reflecției.
Poziționarea este doar o problemă de încercare și eroare. Deoarece reflecția are deja poziția stabilită în procente, nu putem să o ajustăm în interiorul pixelului utilizând proprietățile din stânga și de sus. În schimb, vom folosi marja:
.ie9 #refl margin-top: 20px; margin-stânga: -10px; -ms-filter: "progid: DXImageTransform.Microsoft.BasicImage (opacitate = .25) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow =" false ") progid: DXImageTransform.Microsoft.MotionBlur , direcția = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false"); " .oldie # refl margin-top: -20px; margin-stânga: -7px; filtru: progid: DXImageTransform.Microsoft.Gradient (startColorstr = # 99000000, endColorstr = # 00000000) progid: DXImageTransform.Microsoft.BasicImage (mirror = 1, rotation = 2, opacity = .35) progid: DXImageTransform.Microsoft.Blur = '3', MakeShadow = "false") progid: DXImageTransform.Microsoft.MotionBlur (putere = 15, direcție = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false");
Fiddle | Ecran complet
Vom schimba două lucruri înainte de a vă petrece timpul pe ceva mai bun, cum ar fi să vă uitați de strănut pandas pe YouTube.
Soluțiile:
Iată fișierul CSS. Modificările finale sunt evidențiate:
style.css
html înălțime: 100%; corp text-align: center; linia-înălțime: 1; marja: 0; umplutura: 0; fundal-culoare: # 000; înălțime: 100%; p linie-înălțime: 1.2; #plane padding-top: 5%; stânga: 0; top 10%; lățime: 100%; fund: 0; min-lățime: 1080px; min-înălțime: 600px; poziția: absolută; overflow: ascuns; overflow-x: vizibil; #ETBR, #refl culoare: # 004; font-family: Impact, "Arial Black", Helvetica, Arial, sans-serif; text-transform: majuscule; font-size: 200px; fundal-culoare: #FFE; font-weight: bold; padding: 30px; afișare: inline-block; 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; raza de graniță: 30 pixeli; poziție: relativă; #refl poziție: absolută; indicele z: -1; top: 100%; stânga: 0; -moz-transform: scaleY (-1); -webkit-transform: scaleY (-1); -ms-transform: scaleY (-1); filtru: url (filter.svg # blur); / * FF, Opera + IE10 * / -webkit-filtru: estompare (2px); / * webkit * / box-shadow: inset rgba (0,0,0, .8) 0 0 20px, inset # 000 0 50px 100px; .modern #refl opacitate: .25; .r9 #refl margin-top: 20px; margin-stânga: -10px; -ms-filter: "progid: DXImageTransform.Microsoft.BasicImage (opacitate = .25) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow =" false ") progid: DXImageTransform.Microsoft.MotionBlur , direcția = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false"); " .oldie # refl margin-top: -20px; margin-stânga: -7px; filtru: progid: DXImageTransform.Microsoft.Gradient (startColorstr = # 99000000, endColorstr = # 00000000) progid: DXImageTransform.Microsoft.BasicImage (mirror = 1, rotation = 2, opacity = .35) progid: DXImageTransform.Microsoft.Blur = '3', MakeShadow = "false") progid: DXImageTransform.Microsoft.MotionBlur (putere = 15, direcție = 0) progid: DXImageTransform.Microsoft.Blur (PixelRadius = '3', MakeShadow = "false");
index.html
CSS3 Reflecții reflecţiereflecţie
filter.svg
Și asta e tot! Acesta este ultimul Fiddle, fără filtrul SVG estompat.
Fiddle | Ecran complet
Ca ceva extra, iată un CSS pur (cu excepția starurilor din fundal) Mac Dock folosind această tehnică.
Sper că v-ați bucurat de acest tutorial și sper că ați învățat ceva nou. Simțiți-vă liber să lăsați orice întrebări în comentarii!
