CSS3 Image Reflection [CSS3 tipy]
Zatiaľ sme prerokovali veľa nových nehnuteľností CSS3. Okrem toho existuje niekoľko ďalších vlastností, ktoré v súčasnosti nie sú zahrnuté v oficiálnych špecifikáciách CSS3, ktoré stojí za to vyskúšať, z ktorých jedna je box-odráža vlastnosť, ktorú iniciuje Webkit. Táto vlastnosť môže odrážať zadané objekty.
Základná reflexia
Základná implementácia je celkom intuitívna; povedzme, chceme odraz pod skutočným objektom. Môžeme napísať:
img -webkit-box-reflect: nižšie;
Tento príklad ukazuje, ako odrážame obraz nižšie (pozícia) objektu. Ale v tomto prípade môžeme odraziť aj na správny, ľavý, a vyššie.
Odraz odrazu
ofset sa používa na definovanie medzery medzi odrazom a skutočným objektom odrazeným. Pozrime sa na útržok kódu nižšie.
img -webkit-box-odráža: pod 10px;
Vo vyššie uvedenom kóde sme oddelili odraz od skutočného objektu 10px;
- Zobraziť demo
Maskovanie so sklonmi
Odrazový efekt, ktorý zvyčajne vidíme, je vyblednutie v dolnej časti a zobrazuje len polovicu alebo menej skutočného objektu. Ak chcete tento druh efektu replikovať, môžeme ho použiť Gradienty CSS3 na maskovanie objektu, ako je tomu tak;
-webkit-box-odráža: pod 0px -webkit-gradient (lineárny, ľavý horný, ľavý dolný, od (transparentný), do (rgba (250, 250, 250, 0,1));
Tento kód bude mať nasledujúcu prezentáciu.
Môžeme tiež použiť color-stop na ovládanie prechodov a na dosiahnutie lepšieho odrazu:
img -webkit-box-odráža: pod 0px -webkit-gradient (lineárny, ľavý horný, ľavý dolný, od (priehľadný), farebný stop (70% transparentný) )));
- Zobraziť demo
Alternatívy pre Firefox
Táto vlastnosť však pracuje len v prehliadačoch Webkit (v súčasnosti Safari a Chrome). Ak chcete dodať ten istý efekt vo Firefoxe, potrebujete inú trasu: pomocou -moz-element () Funkcie. Táto funkcia v podstate generuje alebo replikuje obsah z konkrétnych prvkov HTML. Pozrime sa na nasledujúci príklad.
Máme obrázok zabalený do a A aby sme odrazili, budeme ju používať Bohužiaľ, stále neexistuje jednoduchý spôsob, ako vytvoriť pekný reflexný efekt vo Firefoxe pomocou tejto praxe. Vyššie uvedený kód jednoducho vytvorí odraz bez efektu vyblednutia.moz-odráža id;
: po pseudo-prvok, nasledovne; # moz-reflect: po obsah: ""; zobrazenie: blok; pozadie: -moz-element (# moz-odraz) no-repeat; šírka: auto; výška: 375px; margin-bottom: 100px; -moz-transformácia: scaleY (-1);
-moz-transformácia s negatívnou stupnicou sa používa na preklopenie vygenerovaného objektu hore nohami. Tiež sa uistite, že výška je dostatočne presný pre skutočný objekt výška aby sa zabránilo zbytočným ďalším čiaram na umiestnenie reflexie.Ďalšie odkazy
