Web Style Sheets
CSS съвети и трикове

Сенки на обекти

CSS2 не притежава свойство за добавяне на сянка към кутия. Можете да оптитате да добавите рамка в дясно и долу, но няма да изглежда правилно. Обаче, ако имате два вложени елемента може да се използва външния за сянка вътрешния. Например, ако имате текст като този (HTML):

<div class=back>
  <div class=section>
    <h2>Аз съм българче!</h2>
    <address>Иван Вазов (1850-1921)</address>

    <p>Аз съм българче и силна<br>
    ...
  </div>
</div>

може да се използва външния DIV за сянка на върешния. Резулататът ще изглежда като в тази страница. Първо, задаваме фон на BODY (светлозелен в този пример), някакъв по-тъмен фон за външния 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. Може да желаете и малко padding вътре в него и т.н.:

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

Разбира се, може да напаснете големината на сянката по Ваш вкус като измените стойностите.

Сенки на текст

CSS съдържа за добавяне на сянка към текст. Приема четири аргумента: цвета на сянката, хоризонталното изместване, (положително означава в дясно), вертикално изместване (положително означава надолу) и замъгляване (0 означава, че няма зтакова). Например:

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