Autor publikacji
Virtual Patriot - Administrator

box-reflect

Data publikacji
Ostatnio edytowano

Przeznaczenie 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

Informacje techniczne 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

Wyjaśnienie

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

Wyjaśnienie

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.

Wartość domyślna

brak

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.

Dostępne wartości

dowolna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty

Wartości dodatnie

wartości dodatnie odsuwają efekt lustrzanego odbicia od krawędzi elementu HTML

Wartości ujemne

wartości ujemne przesuwają efekt lustrzanego odbicia do krawędzi elementu HTML

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru elementu HTML, do którego chcemy dodać efekt lustrzanego odbicia (względem aktualnego rozmiaru szerokości, gdy wartością składnika edge jest wartość left lub wartość right lub względem aktualnego rozmiaru wysokości, gdy wartością składnika edge jest wartość above lub wartość below)

Wartość domyślna

brak

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.

Dostępne wartości

wartości właściwości mask-image (bez sekwencji wartości)

Sposób podawania

utworzona przez nas maska powinna składać się z przynajmniej dwóch jakichkolwiek kolorów posiadających różny procent przezroczystości

Wartość domyślna

brak

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>