Języki

Niniejszy dokument jest tłumaczeniem, które może zawierać błędy, lub który mógł się zdeaktualizować w stosunku do wersji angielskiej. Wykonane przez: Emil Sierżęga

Arkusze Kaskadowe Stylów CSS tips & tricks

Zobacz także indeks wszystkich porad.

Rzucanie cieni

Odkąd napisana została ta strona, w wielu implementacjach CSS 3 dodano już własność box-shadow, która czyni przedstawioną poniżej metodę niepotrzebną. Jako przykład zobacz artykuł "Zaokrąglenia i rozmazane cienie". Zawarto w niej silniejszą, ale bardziej złożoną metodę tworzenia ceni w CSS poziomu 2.

CSS2 nie posiada własności, która pozwala na dodanie do bloku jakiegoś cienia. Możesz próbować dodawać ramkę do dolnej i prawej strony, ale to nie będzie dobrze wyglądać. Jednakże, jeśli masz 2 zagnieżdżone elementy, to możesz użyć zewnętrznego elementu jako cień dla elementu wewnętrznego. Na przykład, jeśli masz strukturę podobną do tej (HTML): 

<div class=back>
  <div class=section>
    <h2>Czy róża kwitnąc woń własną czuje?</h2>
    <address>Heinrich Heine (1797-1856), przeł. Adam Mieleszko-Maliszkiewicz</address>

    <p>Czy róża kwitnąc woń własną czuje?<br>
    ...
  </div>
</div>

to możesz użyć zewnętrznego DIV-a jako cień dla wewnętrznego. Wynik tego jak może wyglądać takie działanie znajdziesz na osobnej stronie. Na początek, do znacznika BODY dodaj tło (w przykładzie jest to jasna zieleń), zewnętrznemu DIV-owi ustaw ciemniejszy kolor (np. zielono-szary), a wewnętrznemu jeszcze inny (np. żółty czy biały): 

body {background: #9db}
div.back {background: #576}
div.section {background: #ffd}

Następnie, poprzez wykorzystanie marginesów i paddingu, ustaw wewnętrzny DIV trochę na lewo i powyżej wewnętrznego DIV-a: 

div.back {padding: 1.5em}
div.section {margin: -3em 0 0 -3em}

Być może zajdzie także konieczność przesunięcia zewnętrznego elementu nieco w prawo. A jeśli masz wiele sekcji (section), to zapewne należy także dodać między nimi trochę przestrzeni: 

div.back {margin: 3em 0 3em 5em}

W zasadzie to wszystko. Jeśli chcesz możesz także dodać do wewnętrznego DIV-a jakąś ramkę oraz padding, np.: 

div.section {border: thin solid #999; padding: 1.5em}

Oczywiście, możesz dowolnie zmieniać wszystkie rozmiary czy kolory wedle własnego uznania.

Cieniowanie tekstu

CSS posiada za to własność, która odpowiada za dodawanie cieniowania do tekstu. Ma ona cztery argumenty: kolor, poziomy offset (dodatni oznacza przesunięcie w prawo), pionowy offset (dodatni oznacza przesunięcie w dół) oraz rozmycie (0 oznacza brak rozmycia). Na przykład: 

h3 { text-shadow: red 0.2em 0.3em 0.2em }

Czy ten tekst ma cień?

Bert Bos, Prowadzący dział CSS
Prawa autorskie © 1994–2021 W3C® Privacy policy

Utworzono 4 Kwietnia 2002;
Ostatnia aktualizacja śro, 6 sty 2021, 05:40:49

Języki

O tłumaczeniach