CSS

Box-shadow

  • 2010-12-13 13:56
  • 0 komentarzy
  • 2445 odsłon
  • Oceń ten tekst jako pierwszy
box-shadow - definiuje cień elementu.

Polecenie przyjmuje cztery wartości:
  • poziome przesunięcie cienia; dodatnia wartość powoduje wyświetlenie cienia po prawej stronie elementu, ujemna po lewej
  • pionowe przesunięcie cienia; ujemna wartość powoduje przesunięcie cienia na górę elementu, dodatnia na dół
  • stopień rozmazania; 0 oznacza ostry cień, im wyższa wartość tym bardziej rozmazany
  • kolor cienia

Kolor można zadeklarować jako jedną z 16 stałych lub w formacie rgb: #xxyyzz gdzie "xx" to zapisana szesnastkowo składowa czerwona, "yy" zielona a "zz" niebieska (np. #FFFFFF dla białego), można też użyć formy skróconej #xyz. Można też użyć zapisu rgb(<i>r</i>, <i>g</i>, <i>b</i>), w którym stosuje się liczby dziesiętne.

CSS3 wprowadza trzy nowe sposoby deklarowania koloru rgb z kanałem alfa, odcień nasycenie jasność, odcień nasycenie jasność z kanałem alfa


Narożniki cienia, mogą być zaokrąglone poleceniem border-radius.

Przykład użycia:
div
{
    shadow: -15px -15px 5px #888; /* przesunięty w górę i w lewo, lekko zamazany, szary cień */
    padding: 7px;
}


div
{
    box-shadow: -10px -10px 0px #000; /* przesunięty w górę i w lewo, ostry, czarny cień */
    border-radius: 5px; /* lekko zaokrąglone narożniki */
    padding: 7px;
}


Polecenia pokrewne


Odpowiednik html


  • brak

Wersja specyfikacji


  • CSS 3

Wsparcie przeglądarek


  • Chrome i Safari obsługuje to polecenie testowo (z przedrostkiem -webkit- )
  • Firefox obsługuje to polecenie testowo (z przedrostkiem -moz)
  • Opera obsługuje to polecenie od wersji 10.60
  • Internet Explorer obsługuje to polecenie od wersji 9