Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » Урок CSS 12. Созданиеие простой тени
Не нравится(-) 30 Нравится(+)
31-05-2008, 23:44 - GZ Design (Уроки CSS)
Урок CSS 12. Созданиеие простой тени

В этом уроке, я расскажу Вам о том, как при помощи CSS создать простую тень для блока. Этот способ, пожалуй является самым простым.
Итак, приступим....

1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о командах - в коде):

/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Урок CSS №12. Созданиеие простой тени
style.css - Набор стилей для урока
=============================================================
*/

/* Задание стилей для слоя тени */
.shadow {
     background:#bbb; /* Задание цвета тени */
     border:1px solid #ddd; /* Задание стиля и цвета границ тени */
     width:200px; /* Задание ширины всего блока */
}

/* Задание стилей для слоя блока */
.block {
     background:#fff; /* Задание цвета фона для блока */
     border:1px solid #6b6b6b;  /* Задание стиля и цвета границ блока */
     position:relative;  /* Задание позиции блока текста относительно тени */
     padding:5px;  /* Задание отступа */
     top:-3px;  /* Отступ сверху (для тени) */
     left:-3px; /* Отступ слева (для тени) */
}


3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="shadow">
<div class="block">
Содержание блока
</div>
</div>
</body>
</html>


4) Сохраняем и смотрим, что получилось.

Этот способ создания тени действительно прост, однако не даёт достаточно реалистичного эффекта. В одном из следующих уроков, попробую объяснить способ создания более сложной и реалистичной тени.

Совместимость: Internet Explorer 5.5 - 7; Mozilla Firefox 2.xx Oprea 7.хх - 9.xx
---------------------------------------
Правила копирования материалов урока
Демо
Скачать урок (zip, 0,7 Kb)


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 29188 раз(а) и написали 7 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Июнь 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!