Logo

Blog o JavaScript, jQuery, HTML5, CSS3 i 4. Porady jak pisać dobrej jakości kod, tutoriale, nowości.

Cienie w CSS3

  • 12.09.2011 09:36:24
  • CSS
  • 3

Dzięki CSS3 możemy w końcu tworzyć cienie nie tylko dla obrazków ale i dla tekstów. Kolejny fajny bajer, dzięki któremu grafik nie będzie nam już potrzebny :) to raz. A dwa, nie trzeba będzie tworzyć teł czy dodatkowych sprite'ów by np. stworzyć button 3D.

box-shadow

Na pierwszy ogien idzie tworzenie cieni dla elementów blokowych. Poznajmy więc jakie paramtry może przyjmować box-shadow.

box-shadow:  none |  shadow [, shadow]*

A czy jest shadow?

inset? && [ offset-x offset-y blur-radius? spread-radius? color? ]

A teraz wytłumaczmy co oznacza dana wartość:

text-shadow

Analogicznie jak z box-shadow.

Przykłady

Kilka przykładów z różną kombinacją parametrów. Na pierwszy ogień kombosik. Stworzymy 5 cieni. Z każdego boku będzie padał cień innego koloru oraz wewnątrz elementu damy cień. Efekt wygląda tak:

Kod dla powyższego efektu prezentuje się następująco:

#shadow1 {
    box-shadow: -5px 0 5px #000, /* lewy cień */
        0 5px 5px #f00, /* dolny cień */
        0 -5px 5px #0f0, /* górny cień */
        5px 0 5px #00f, /* prawy cień */
        inset 0 0 5px #f90 ;/* cień wewnętrzny */
}

Trzeci parametr do rozmycie (blur).

Teraz zobaczmy jak będzie wyglądał ten sam element z czarnym cieniem (rozmycie 5px) i nadaną rozpiętością. Aby dostrzec różnicę stworzyłem dwa przykłady: przed i po nadaniu rozpiętości.

CSS wygląda następująco:

#shadow2_bez {
    box-shadow: 0 0 5px #000;
}
#shadow2_z {
    box-shadow: 0 0 5px 10px #000;
}

Na koniec jeden przykład z cieniem dla tekstu.

#textShadow1 {
    text-shadow: 0 0 10px #f90;
    font-size: 100px;
    font-weight: bold;
}

Teraz nie pozostaje Wam nic innego jak trochę poświczyć :)

Autor wpisu

Piotr cichosz (shpyo) — Front-end developer Twórca kilku serwisów internetowych oraz autor kilku blogów. Pasjonat nowych, otwartych technologii.

Komentarze

Gavatar procek

13.09.2011 procek

Warto jeszcze dodać, że możemy używać RGBA i dzięki temu tworzyć tęczowe cienie dookoła elementów. Wystarczy zaczynać w tym samym punkcie X i Y, a dawać inne powiększenie i rozmycie.
Niestety w mobilnym webkicie jeśli mamy coś wystającego za element to zostanie to ścięte - tak niestety sprawa cieni :( Co ciekawe na każdej innej przeglądarce działa to wyśmienicie :)

Gavatar bitminer

05.06.2012 bitminer

A jak zrobić wewnetrzy cień na obrazku?
W box-shadow zapomnieli o tagu img?

Gavatar Webnoise

29.06.2012 Webnoise

Cienie dużo lepiej wyglądają, jeśli kolor podajemy w formacie rgba(red, green, blue, alpha). Wyglądają dużo naturalniej.

Dodaj komentarz