Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » Урок CSS 22. Оформление комментариев
Не нравится(-) 51 Нравится(+)
27-07-2008, 22:03 - GZ Design (Уроки CSS)
Урок CSS 22. Оформление комментариев

Здравствуйте уважаемые посетители! Наш очередной урок CSS посвящен построению сложных конструкций без использования картинок. Сегодня, мы рассмотрим оформление комментариев.

Если всё будет правильно, то в конце урока, Вы получите примерно такую конструкцию:
Урок CSS 22. Оформление комментариев

Метод обеспечивает полную кроссбраузерность и достаточно удобен в применении. Итак, сделаем эту конструкцию...

По традиции, создаём 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! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



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

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

Публикацию посмотрели 20178 раз(а) и написали 18 комментариев.
Подписаться на канал 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
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!