Odraz obrazu CSS3 [Tipy CSS3]
Doposud jsme diskutovali o spoustě nových vlastností CSS3. Kromě toho existuje ve skutečnosti několik dalších vlastností, které v současné době nejsou zahrnuty v oficiálních specifikacích CSS3, které stojí za to vyzkoušet, z nichž jeden je odrážet vlastnost, která je iniciována Webkit. Tato vlastnost může odrážet zadané objekty.
Základní reflexe
Základní implementace je zcela intuitivní; řekněme, chceme odraz pod skutečným objektem. Můžeme psát:
img -webkit-box-reflect: níže;
Tento příklad ukazuje, jak zobrazujeme obraz níže (pozice) objektu. Ale v tomto případě můžeme také odraz odrazit že jo, vlevo, odjet, a výše.
Odraz odrazu
Ofset se používá k definování mezery mezi odrazem a skutečným objektem. Podívejme se na fragment kódu níže;
img -webkit-box-reflect: pod 10px;
Ve výše uvedeném kódu jsme oddělili odraz od skutečného objektu 10px;
- Zobrazit ukázku
Maskování s přechody
Efekt odrazu, který běžně vidíme, je vyblednutí ve spodní části a zobrazení pouze poloviny nebo méně skutečného objektu. Pro replikaci tohoto druhu efektu můžeme použít CSS3 Přechody maskovat objekt, jako je tomu tak;
-webkit-box-reflect: pod 0px -webk-gradient (lineární, levý horní, levý dolní, od (transparentní), do (rgba (250, 250, 250, 0,1)));
Výsledkem tohoto kódu bude následující prezentace;
Můžeme také použít barevné zastavení ovládat přechody a vypadat hezkyji:
img -webkit-box-reflect: pod 0px -webk-gradient (lineární, levý horní, levý dolní, od (transparentní), barevný doraz (70%, transparentní), do (rgba (250, 250, 250, 0,1 )));
- Zobrazit ukázku
Alternativy pro Firefox
Tato vlastnost však v současné době funguje pouze v prohlížečích Webkit (což znamená Safari a Chrome). Pro dosažení stejného efektu ve Firefoxu potřebujete další trasu: pomocí -moz-element () funkce. Tato funkce v podstatě generuje nebo replikuje obsah z určitých prvků HTML. Podívejme se na následující příklad;
Máme obrázek zabalený v A abychom udrželi odraz, použijeme Bohužel neexistuje žádný jednoduchý způsob, jak vytvořit pěkný efekt odrazu ve Firefoxu pomocí této praxe. Výše uvedený kód jednoduše vytvoří odraz bez efektu vyblednutí.moz-reflex id;
:po pseudo-element, jak následuje; # moz-reflect: after content: ""; zobrazení: blok; pozadí: -moz-element (# moz-reflect) no-repeat; width: auto; výška: 375px; spodní okraj: 100px; -moz-transformace: scaleY (-1);
-moz-transform s negativním měřítkem slouží k převrácení generovaného objektu vzhůru nohama. Také se ujistěte, že výška je dostatečně přesný k reálnému objektu výška aby se zabránilo zbytečným řádkům pro umístění odrazu.Další odkazy
