Autor publikacji
Virtual Patriot - Administrator

box-reflect

Data publikacji
Ostatnio edytowano

Opis właściwości box-reflect

Za pomocą właściwości box-reflect możemy określić dodatkowy efekt lustrzanego odbicia dla interesującego nas elementu HTML.

Informacje dodatkowe

brak

Dodatkowe techniczne informacje o właściwości box-reflect

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

nie

wartość initial

none

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości box-reflect

Firefox

nie

Google Chrome

tak, lecz z przedrostkiem -webkit-

Safari

tak, lecz z przedrostkiem -webkit-

Opera

tak, lecz z przedrostkiem -webkit-

Internet Explorer

nie

Edge

tak, lecz z przedrostkiem -webkit-

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości box-reflect

none

Opis

Wartość none jest domyślną wartością właściwości box-reflect.

Domyślnie element HTML nie posiada żadnego dodatkowego efektu lustrzanego odbicia.

Przykład

  box-reflect:none;
ten element "div" nie posiada żadnego dodatkowego efektu lustrzanego odbicia

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten element "div" nie posiada żadnego dodatkowego efektu lustrzanego odbicia
    </div>

  </body>
</html>

wzorzec wartości

Opis

Za pomocą właściwości box-reflect oraz z góry zdefiniowanego wzorca wartości możemy określić dodatkowy efekt lustrzanego odbicia dla interesującego nas elementu HTML.

Składniki wzorca wartości właściwości box-reflect

Przykładowe zapisy

below 5px linear-gradient(transparent, black)

above 10px linear-gradient(black 0, transparent 50%)

right 10px linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 150%)

below -5px linear-gradient(transparent 0, transparent 25%, black 125%)

edge

Składnik edge jest wymaganym składnikiem wzorca wartości właściwości box-reflect. Składnik edge określa, względem której krawędzi interesującego nas elementu HTML powinien zostać utworzony efekt lustrzanego odbicia.

Dostępne wartości parametru edge

above

Wartość above parametru edge wskazuje na górną krawędź elementu HTML, do którego chcemy dodać efekt lustrzanego odbicia.

right

Wartość right parametru edge wskazuje na prawą krawędź elementu HTML, do którego chcemy dodać efekt lustrzanego odbicia.

below

Wartość below parametru edge wskazuje na dolną krawędź elementu HTML, do którego chcemy dodać efekt lustrzanego odbicia.

left

Wartość left parametru edge wskazuje na lewą krawędź elementu HTML, do którego chcemy dodać efekt lustrzanego odbicia.

offset

Składnik offset jest wymaganym składnikiem wzorca wartości właściwości box-reflect. Składnik offset określa rozmiar odległości efektu lustrzanego odbicia od tej krawędzi interesującego nas elementu HTML, na którą wskazuje wartość składnika edge.

mask

Składnik mask jest wymaganym składnikiem wzorca wartości właściwości box-reflect. Składnik mask określa wygląd maski efektu lustrzanego odbicia interesującego nas elementu HTML.

Przykład

  box-reflect:below 5px linear-gradient(transparent, black);
ten element "div" posiada efekt lustrzanego odbicia (oddalony o 5 pikseli od dolnej krawędzi tego elementu "div"), ponieważ do tego elementu "div" została dodana właściwość "box-reflect" wraz z następującymi wartościami: "below 5px linear-gradient(transparent, black)"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        box-reflect:below 5px linear-gradient(transparent, black);
        -webkit-box-reflect:below 5px linear-gradient(transparent, black);
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten element "div" posiada efekt lustrzanego odbicia (oddalony o 5 pikseli od dolnej krawędzi tego elementu "div"), ponieważ do tego elementu "div" została dodana właściwość "box-reflect" wraz z następującymi wartościami: "below 5px linear-gradient(transparent, black)"
    </div>

  </body>
</html>