Arkusze CSS - rady i triki

cienie

CSS2 nie posiada właściwości, która pozwala na dodawanie cieni do ramki. Można spróbować border do dołu i prawej strony ale nie będzie to dobrze wyglądać. Jedenak, jeśli masz dwa elementy jeden w drugim mozesz użyć zewnętrznego, który będzie cieniem drugiego. Na przykład, jeśli masz taki tekst (HTML):

<div class=back>
  <div class=section>
    <h2>Die Rose duftet - doch ob sie empfindet</h2>
    <address>Heinrich Heine (1797-1856)</address>

    <p>Die Rose duftet - doch ob sie empfindet<br>
    ...
  </div>
</div>

można użyć zewnętrznego DIV jako cień wewnętrznego DIV. Rezultat może byc podobny do tego. Wpierw nadaj elementowi BODY tło (jasno zielony w tym wypadku), zewnętrzny DIV niech ma kolor troszeczkę ciemniejszy (zielono-szary) a wewnętrzny inne tło (np: zółto-białe):

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

Następnie używając marginesów i padding, przemieść wewnętrzny DIV troszeczkę w lewo i do góry w stosunku do zewnętrznego:

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

Należy przemieścić zewnętrzny DIV trochę w prawo. Jeśli masz wiele sekcji najprawdopodobniej chcesz trochę przestrzeni pomiędzy nimi:

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

To praktycznie wszystko. Można dodać border dookoła wewnętrznego DIV, jeśli chcesz. Najprawdopodobniej należałoby również dodać padding:

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

Można zmieniać wielkość cienia w zależności od potrzeb i gustu.

cienie tekstowe

CSS posiada właściwość pozwalającą dodawać cień do tekstu. Ma ona cztery argumenty: kolor cienia, the horizontal offset (positive oznacza w prawo), the vertical offset (positive oznacza w dół) i blur (0 oznacza ostry cień). Np:

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