Здравствуйте уважаемые посетители! Наш очередной урок CSS посвящен построению сложных конструкций без использования картинок. Сегодня, мы рассмотрим оформление комментариев.
Если всё будет правильно, то в конце урока, Вы получите примерно такую конструкцию:
Метод обеспечивает полную кроссбраузерность и достаточно удобен в применении. Итак, сделаем эту конструкцию...
По традиции, создаём 2 файла: index.html и style.css. В код веб-страницы запишем стандартное начало:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>
Российская школа CSS. Сложная конструкция №2. Оформление комментариев
</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
Замечательно. Теперь запишем код блока, закруглённых углов (мы рассматривали их создание в одном из предыдущих уроков) и "носика"...
<div class="all">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><b class="b5"></b><b class="b6"></b><b class="b7"></b>
<div class="content">
Привет!
</div>
<b class="b7"></b><b class="b6"></b><b class="b5"></b><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
<em></em><span></span>
</div>
</body>
</html>
Заметим, что углы заданы пустыми конструкциями "b", а "носик" - пустыми конструкциями "em" и "span". Дальше - только CSS. Для начала, зададим общие стили для блока:
/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Урок CSS №22. Сложная конструкция №2. Оформление комментариев
style.css - Набор стилей для урока
=============================================================
*/
.all {
width:500px;
font-weight:bold;
text-align:center;
}
Готово. Теперь, надо задать стили для "носика":
.all em {
display:block;
width:0;
height:0;
overflow:hidden;
border-top:12px solid #007fa6;
border-left:12px dotted transparent;
border-right:12px dotted transparent;
margin-left:50px;
}
.all span {
display:block;
width:0; height:0;
color:#fff;
overflow:hidden;
border-top:10px solid #c7eaff;
border-left:10px dotted transparent;
border-right:10px dotted transparent;
margin-left:52px;
margin-top:-15px;
}
"Носик" готов. Теперь пора заняться закруглением углов и созданием границы блока:
.b1, .b2, .b3, .b4, .b5, .b6, .b7 {
display:block;
overflow:hidden;
font-size:0;
}
.b1, .b2, .b3, .b4, .b5, .b6 {height:1px;}
.b4, .b5, .b6, .b7 {
border-left:1px solid #007fa6;
border-right:1px solid #007fa6;
}
.b1 {margin:0 8px; background:#007fa6;}
.b2 {margin:0 6px; background:#007fa6;}
.b3 {margin:0 4px; background:#007fa6;}
.b4 {margin:0 3px; background:#c7eaff; border-width:0 5px;}
.b5 {margin:0 2px; background:#c7eaff; border-width:0 4px;}
.b6 {margin:0 2px; background:#c7eaff; border-width:0 3px;}
.b7 {margin:0 1px; background:#c7eaff; border-width:0 3px; height:2px;}
Основная работа уже позади. Нам осталось только прописать стили для внутренней части блока:
.content {
display:block;
background:#c7eaff;
border:3px solid #007fa6;
border-width:0 3px;
padding:10px;
}
Вот и всё. Такая конструкция, как основа для комментариев может стать украшением Вашего сайта.
Как я уже писал, метод обеспечивает полную кроссбраузерность. На самом деле это не совсем так. IE 5.5 не поддержит такую конструкцию. Можно поправить это, добавив в такие стили:
* html .all em {width:24px; height:12px; w\idth:0; hei\ght:0;}
* html .all span {width:20px; height:10px; w\idth:0; hei\ght:0;}
Готово. Теперь, даже человек, зашедший к вам на сайт с помощью этого древнего браузера, сможет насладиться всей его красотой.
Спасибо за внимание!Идея конструкции: Stu Nicholls
Автор урока: Григорий Загребельный, Российская школа CSS
Совместимость: Internet Explorer 5.5 - 7; Mozilla Firefox 2.xx - 3.xx Opera 8.хх - 9.xx.
---------------------------------------
Правила копирования материалов урокаДемоСкачать урок (zip, 2 Kb)Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!
