| VOVA_N | Дата: Пятница, 08.02.2013, 19:37 | Сообщение # 1 |
 Майор
Группа: Администраторы
Сообщений: 86
Репутация: 4
Статус: Offline
| Очень большой плюс этих блоков в том, что они сделанные только при помощи CSS без использования каких либо изображений, а это значит, что они не несут никакую нагрузку на сервер.
Создание блокаДля начала нам нужно создать самый обычный блок, которому дадим переменную например Box, её мы будем позже использовать в теге : Код
.Box { width:700px; /* Ширина блока */height: 200px; /* Высота блока */ } Вот и всё, первый шаг мы сделали, как видите я задал примерную высоту и ширину блока, естественно Вы можете поменять эти значения по Вашим нужным параметрам. Оформление блокаТеперь давайте сделаем красивый вид блоку, а именно добавим тень и закруглим углы: Код
.Box { width:700px; /* Ширина блока */height: 200px; /* Высота блока */background-color: #ffffff; /* Фоновый цвет*/border: 2px solid #D4D4D4; /* Ширина и цвет границ*/border-radius: 10px; /* Радиус границ*/box-shadow: 0 0 15px #A9A9A9; /* Размер и цвет тени блока*/ } Как видите, здесь тоже можно изменить все параметры по своему вкусу, изменить фоновый цвет, радиус границ, тень и её цвет. Главное экспериментируйте. ПримерНу а сейчас давайте применим это всё на практике. Например: Код <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"><html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]" <?php language_attributes(); ?><head profile="[url=http://gmpg.org/xfn/11]http://gmpg.org/xfn/11[/url]"> <style> body { background:#f0f0f0; font-family: Tahoma, sans-serif; font-size:14px; line-height:135%; margin-left: 20%; margin-top: 10%; } .Box { margin-bottom:15px; width:668px; height: 200px; background-color: #ffffff; position:relative; border: 2px solid #D4D4D4; border-radius: 10px; box-shadow: 0 0 15px #A9A9A9; padding:20px 40px;} .Box1 { margin-bottom:15px; width:668px; height: 200px; background-color: #ffffff; position:relative; border: 2px solid #D4D4D4; border-radius: 30px; box-shadow: 0 0 15px #A9A9A9; padding:20px 40px;} .Box2 { margin-bottom:15px; width:668px; height: 200px; background-color: #ffffff; position:relative; border: 2px solid #D4D4D4; border-radius: 50px; box-shadow: 0 0 15px #0099FF; padding:20px 40px;} </style> </head> <body> <div class="Box">Радиус углов 10px</div><div class="Box1">Радиус углов 30px</div><div class="Box2">Радиус углов 50px и с голубым цветов тени блока</div> </body></html> Теперь посмотрите, что получилось в примере. 
|
| |
| |
