Reflecția imaginii CSS3 [Sfaturi pentru CSS3]
Până acum, am discutat o mulțime de noi proprietăți în CSS3. Dincolo de asta, există de fapt câteva alte proprietăți care în prezent nu sunt incluse în specificațiile oficiale CSS3 care merită să încercați, dintre care una este box-reflectă proprietate care este inițiată de Webkit. Această proprietate poate reflecta obiectele specificate.
Reflecție de bază
Implementarea de bază este destul de intuitivă; să spunem, vrem reflecția sub obiectul real. Putem scrie:
img -webkit-box-reflect: mai jos;
Acest exemplu arată modul în care reflectăm o imagine de mai jos (poziția) obiectului. Dar, în acest caz, putem de asemenea să ținem reflecția la dreapta, stânga, și de mai sus.
Reflecție Offset
ofset este folosit pentru a defini decalajul dintre reflecție și obiectul real reflectat. Să vedem fragmentul de cod de mai jos;
img -webkit-box-reflect: sub 10px;
În codul de mai sus, am separat reflecția de la obiectul real prin 10px;
- Vizualizați demonstrația
Mascarea cu gradienti
Efectul de reflecție pe care îl vedem în mod obișnuit este decolorarea în partea de jos și afișarea unei jumătăți sau mai puțin a obiectului real. Pentru a replica acest tip de efect, putem aplica Gradienți CSS3 pentru a masca obiectul, ca atare;
-webkit-box-reflect: sub 0px -webkit-gradient (liniar, stânga sus, partea stângă jos, de la (transparent), la (rgba (250, 250, 250) 0,1));
Acest cod va avea ca rezultat prezentarea următoare;
Putem de asemenea folosi Culoare-stop pentru a controla tranzițiile și pentru a face reflecția să arate mai bine:
img -webkit-box-reflect: sub 0px -webkit-gradient (liniar, stânga sus, partea stângă jos, din (transparentă), stop color (70% transparent), rgba (250, 250, 250, 0.1 )));
- Vizualizați demonstrația
Alternative pentru Firefox
Această proprietate, totuși, funcționează numai în browserele Webkit (adică Safari și Chrome) în momentul de față. Pentru a oferi același efect în Firefox, aveți nevoie de un alt traseu: folosind -Moz element () funcţie. Această funcție va genera sau replica conținutul din anumite elemente HTML. Să aruncăm o privire la următorul exemplu;
Avem o imagine înfășurată într-un Și, pentru a ține reflecția, vom folosi Din păcate, nu există încă o modalitate ușoară de a crea o frumos reflecție în Firefox folosind această practică. Codul de mai sus va crea pur și simplu reflecția, fără efectul de estompare.Moz-reflectă id;
:după pseudo-element de, după cum urmează; # moz-reflect: după conținut: ""; afișare: bloc; fundal: -moz-element (# moz-reflect) nu-repeta; lățime: auto; înălțime: 375px; margin-bottom: 100px; -moz-transform: scaleY (-1);
-Moz-transformare cu scala negativă este folosit pentru a răsturna obiectul generat cu capul în jos. De asemenea, asigurați-vă că înălţime este suficient de precis pentru obiectul real înălţime pentru a evita liniile extra inutile pentru poziționarea reflexiei.Alte referințe
