CSS-kuvan heijastus


Sisällysluettelo

    Näytä sisällysluettelo


Tässä luvussa opit heijastamaan kuvaa.


CSS-kuvan heijastukset

box-reflect-ominaisuutta käytetään kuvan heijastuksen luomiseen.

Ominaisuuden box-reflect arvo voi olla:

below
above
left
right

Selaimen tuki

Taulukon numerot määrittävät ensimmäisen selainversion, joka tukee täysin ominaisuutta.

Numerot, joita seuraa -webkit- määrittävät ensimmäisen version, joka toimi a:n kanssa etuliite.

Property
box-reflect 4.0 -webkit- 79.0 -webkit- Not supported 4.0 -webkit- 15.0 -webkit-


Esimerkkejä

Esimerkki

Tässä haluamme heijastuksen kuvan alle:

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

Kokeile itse →

<!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>


Esimerkki

Tässä haluamme heijastuksen kuvan oikealle puolelle:

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

Kokeile itse →

<!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>



CSS-heijastuksen poikkeama

Voit määrittää kuvan ja heijastuksen välisen raon lisäämällä kuvan koon väli box-reflect-ominaisuuteen.

Esimerkki

Tässä haluamme heijastuksen kuvan alle 20 pikselin poikkeuksella:

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

Kokeile itse →

<!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-heijastus gradientin kanssa

Voimme myös luoda heijastukseen häivytysefektin.

Esimerkki

Luo heijastukseen häivytystehoste:

  img {
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), 
   rgba(0,0,0,0.4));
} 

Kokeile itse →

<!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>