CSS obrazový odraz
V této kapitole se naučíte, jak odrážet obrázek.
CSS obrazové odrazy
Vlastnost box-reflect
se používá k vytvoření odrazu obrazu.
Hodnota box-reflect
vlastnosti může být: below
, above
,
left
, nebo right
.
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
Čísla následovaná -webkit- určují první verzi, která pracovala s předponou.
Property | |||||
---|---|---|---|---|---|
box-reflect | 4.0 -webkit- | 79.0 -webkit- | Not supported | 4.0 -webkit- | 15.0 -webkit- |
Příklady
Příklad
Zde chceme odraz pod obrázkem:
img {
-webkit-box-reflect: below;
}
Příklad
Zde chceme odraz napravo od obrázku:
img {
-webkit-box-reflect: right;
}
Posun odrazu CSS
Chcete-li určit mezeru mezi obrázkem a odrazem, přidejte do vlastnosti velikost mezery box-reflect
.
Příklad
Zde chceme odraz pod obrázkem s posunem 20 pixelů:
img {
-webkit-box-reflect: below 20px;
}
CSS odraz s přechodem
Můžeme také vytvořit efekt vyblednutí odrazu.
Příklad
Vytvořte efekt zeslabení odrazu:
img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0),
rgba(0,0,0,0.4));
}