Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
CSS3 - obramowania

CSS3 - box-shadow

Email Drukuj PDF

Tematy: border-top-left-radius | border-top-right-radius | border-bottom-left-radius | border-bottom-right-radius | border-radius | box-shadow | border-image-source | border-image-width | border-image-outset | border-image-repeat | border-image-slice | border-image | box-decoration-break

Dane w pigułce
Zastosowanie Tworzy cień pojemnika
Dziedziczenie nie
Wartości długość w px, pt, em, oraz kolor
Wartość domyślna brak
Przykład box-shadow: 10px 10px 5px #182019;
Składnia JavaScript object.style.boxShadow="10px 10px 5px #182019"

Aby zdefiniować cień, należy wpisać w definicji stylu box-shadow : h-shadow v-shadow blur color inset

Aby definicja była odczytywana przez Firefoksa 3.x, należy dodać także definicję z prefiksem -moz-, czyli -moz-box-shadow : wartość. Firefox 4 nie wymaga prefiksu.

Aby definicja była odczytywana przez Chrome, należy dodać także definicję z prefiksem -webkit-, czyli -webkit-box-shadow : wartość. Opera nie wymaga prefiksu.

Polecenie box-shadow służy do tworzenia cienia pojemnika. Pierwsza wartość (h-shadow) definiuje przesunięcie cienia w prawo, druga (v-shadow) - przesunięcie w dół, trzecia (blur) - stopień rozmycia. Definicja koloru określa kolor cienia. Ujemne wartości przesunięcia powodują przesunięcie odpowiednio w lewo i do góry

Przykłady:

<div style="width: 200px; height: 100px; background-color:olive; box-shadow: 5px 5px 20px #182019;">
</div>



Ten akapit znajduje się w cieniowanym pojemniku.


tlokot

<div style="width: 200px; height: 100px; background-color:olive; box-shadow: -5px -5px 15px #182019;">
</div>



Ten akapit znajduje się w cieniowanym pojemniku.

Dodatkowy parametr inset wprowadza cieniowanie do wewnątrz.

<div style="width: 200px; height: 100px; background-color:olive; box-shadow: inset 5px 5px 20px #182019;">
</div>


<div style="width: 200px; height: 100px; background-color:olive; box-shadow: inset -5px -5px 15px #182019;">
</div>


Interpretacja: Internet Explorer 9, Firefox (z prefiksem), Opera, Chrome (z prefiksem).

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V