Каскадные таблицы стилей
CSS советы & приемы

Отбрасывание теней

CSS2 не обладает свойством добавлять тень к блоку. Вы можете попробовать добавить кайму справа и внизу, но это не будет выглядеть правильно. Однако, если у вас есть два наследующих элемента, вы можете использовать наружный для внутреннего. Например, если у вас есть подобный текст (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>

вы можете использовать наружный DIV в качестве тени для внутреннего. Результат должен выглядеть как эта отдельная страница. Сперва задайте основному элементу фон (на примере - светло-зеленый), наружный DIV сделайте немного темнее фона (зелено-серый) и внутренний DIV отличным от фона (например, желто-белый):

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

Затем при помощи margin и padding вынесите внутренний DIV немного влево и вверх от наружного DIV:

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

Вам также нужно переместить наружный DIV немного вправо. Если у вас многослойные секции, вы возможно, захотите оставить между ними немного места:

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

Вот как оно выглядит. Вы также можете добавить кайму вокруг внутреннего DIV, если хотите. Вы также, возможно, захотите сделать заливку внутри него, например:

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

Разумеется, вы можете изменять размер теней на ваш вкус.

Text shadows

CSS действительно обладает свойством добавлять тени к тексту. У него четыре параметра: цвет тени, горизонтальный отступ (позитивный - вправо), вертикальный отступ (позитивный - вниз) и размытие (0 - резкая тень). Например:

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