Български превод на "Drop shadows"

Настоящият документ е превод на статията "Drop shadows".

Оригиналната версия на документа се намира само на уебсайта на W3C http://www.w3.org/Style/Examples/007/shadows.
Това НЕ е официален документ на W3C. Всички авторски права принадлежат на W3C.

Автор: Александър Дичев (всички преводи на автора). Новини в блога.
Преводът е направен на 25.08.2008. Последна актуализация на 17.12.2008.

Настоящият документ може да съдържа грешки или неточности в превода.
Ако желаете да предложите корекция или да сигнализирате за грешка, свържете се с автора.

Документът е преведен със съдействието на АБА уеб дизайн, Balkans и Велина Янкова.

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

(Тази страница използва CSS style sheets)

Пример

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

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 }

Този текст има ли сянка?

CSS Валиден CSS!Валиден HTML 4.0!

Bert Bos
създадено на 4 Apr 2002;
последна промяна $Date: 2008/07/07 15:03:47 $ GMT