CSS obrazový odraz

Obsah

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 obrázku.

Hodnota vlastnosti box-reflect může být:

below
above
left
right

Podpora prohlížeče

Čísla v tabulce určují první verzi prohlížeče, která tuto vlastnost plně podporuje.

Čísla následovaná -webkit- určují první verzi, která pracovala s a předpona.

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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  -webkit-box-reflect: below;
}
</style>
</head>
<body>

<h1>CSS Image Reflection</h1>

<p>Show the reflection below the image:</p>
<img src="img_tree.png">

</body>
</html>

Příklad

Zde chceme odraz napravo od obrázku:

  img {
  -webkit-box-reflect: right;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  -webkit-box-reflect: right;
}
</style>
</head>
<body>

<h1>CSS Image Reflection</h1>

<p>Show the reflection to the right of the image:</p>
<img src="img_tree.png">

</body>
</html>

Posun odrazu CSS

Chcete-li určit mezeru mezi obrázkem a odrazem, přidejte velikost mezera k vlastnosti box-reflect.

Příklad

Zde chceme odraz pod obrázkem s posunem 20 pixelů:

  img {
  -webkit-box-reflect: below 20px;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  -webkit-box-reflect: below 20px;
}
</style>
</head>
<body>

<h1>CSS Image Reflection</h1>

<p>Show the reflection below the image, with a 20 pixels offset:</p>
<img src="img_tree.png">

</body>
</html>

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));
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}
</style>
</head>
<body>

<h1>CSS Image Reflection</h1>

<p>Show the reflection with gradient (to make a fade-out effect):</p>
<img src="img_tree.png">

</body>
</html>