Каскадні таблиці стилів
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 }