Cienie w CSS3

Opublikowany: 12.09.2011 09:36:24 | Komentarzy 1

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ść:

• inset - jest to wartość opcjonalna. Gdy nie podamy jej, to cień będzie zachowywał się naturalnie, czyli tak jakbyśmy oświetlili światłem dany element. W przeciwnym wypadku cień będzie pojawiał się wewnątrz elementu.
• offset-x, offset-y - wartości wymagane. Określają zachownie się cienia. Odpowiednio względem osi x i y. Gdy te wartości będą miały wartości dodatnie, to cień będzie padał na "prawy dolny róg". Ujemne wartości spowodują rzucenie cienia w przeciwnym kierunku. Z kolei gdy parametry będą miały wartości 0, cień będzie znajdował się bezpośrednio pod elementem.
• blur-radius - czyli rozmycie, parametry opcjonalny. Im większa wartość tym większe rozmycie cienia będzie. Wpisanie ujemnych wartości nic nie da, bo ustawi sie wartość domyślna 0.
• spread-radius - rozpiętość, opcjonalne. Podanie dodatnych wartości powoduje, że cień będzie się roztastał
• color - czyli kolor cienia, opcjonalne. Opcjonalne? Brzmi to trochę dziwnie. Gdy nie podamy koloru cienia, to powinien zostać użyty kolor rodzica. Z tego wyłamuje się WebKit, który ustawia domyślny kolor na przezroczysty.

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ć :)

Tagi: css box-shadow css text-shadow cienie css3