Придание рамке элемента эффекта тени

Из этого урока Вы узнаете, как при помощи CSS придать элементу сайта эффект тени.

Тень придаёт объём элементу и привлекает к нему внимание посетителей сайта.

Создание тени заключается в её имитации с помощью установки линии серого цвета на двух сторонах прямоугольной области, обромлённой рамкой, с помощью атрибута border.

Чтобы добавить такую тень, применим в стилях свойство border. Одновременно установить серую линию справа и снизу вместе с рамкой нельзя, поэтому воспользуемся двумя слоями, вложенными один в другой.

Что собой представляют вложенные слои? Это два контейнера div, вложенные один в другой, наружный из которых является родительским по отношению к внутреннему (дочернему).

Создадим для каждого слоя, т. е. тега div стили. Для наружного слоя с именем, скажем, layer1 добавим линию серого цвета толщиной 3 пикселя справа и снизу от блока. Эта линия будет имитировать тень. Для внутреннего слоя layer2 установим чёрную рамку толщиной в 1px и поля (padding) вокруг текста 5px.

HTML-код будет выглядеть следующим образом:

<html>
<head>
<style type="text/css">

.layer1{
border-right: 3px solid #cccccc;
border-bottom: 3px solid #cccccc;

width:270px;
margin-left:100px
}

.layer2{
border: lpx solid black;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
padding: 5px
}

</style>
</head>
<body>
<div class="layer1"><div class="layer2">
Добавление тени с помощью линий и использованием двух вложенных слоёв.
</div></div>
</body>
</html>

На странице будет выведен следующий результат:

Добавление тени с помощью линий и использованием двух вложенных слоёв.

Атрибуты в стилях выделенные зелёным цветом отвечают за вывод линий внешнего контейнера, имитирующих тень, и рамки внутреннего контейнера. Остальные атрибуты отвечают за позиционирование слоёв, вывод шрифта, выравнивание текста и его внутренние отступы в приведённом выше примере.

Если рамка не нужна, то можно обойтись одним тегом div, но в этом случае потребуется создать фон контейнера отличный от фона самой страницы, обеспечив тем самым достаточный контраст между цветом тени и фоном.

Например:

<html>
<head>
<style type="text/css">

.layer{
border-right: 3px solid #cccccc;
border-bottom: 3px solid #cccccc;
width:270px;
margin-left:100px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
padding: 5px;
background:#F8F8FF
}

</style>
</head>
<body>
<div class="layer">
Добавление тени с помощью линий и использованием фона для контейнера div.
</div>
</body>
</html>

Результат:

Добавление тени с помощью линий и использованием фона для контейнера div.

Опубликовано: 3.10.2010 03:39

Просмотров всего: 2578



Добавить комментарий:

Для обновления картинки кликните по ней.

Комментарии:

Нет комментариев.