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

Здравствуйте уважаемые посетители! Наш очередной урок CSS посвящен созданию блока с качественными закруглёнными углами без использования картинок.
Итак, конструкция получится достаточно сложной, и закруглённые углы будут представлять из себя - этот символ: •
Мы его просто увеличим и расположим в 4-х углов, достигнув, таким образом идеального результата. Итак, приступим...
По традиции, создаём 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. Сложная конструкция №3. Закругление углов №2</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

Готово. Теперь пропишем наши углы - символы:
<div class="all">
<em id="ctl"><b>&bull;</b></em>
<em id="cbl"><b>&bull;</b></em>
<em id="ctr"><b>&bull;</b></em>
<em id="cbr"><b>&bull;</b></em>

Готово. Теперь нам надо вписать содержание блока и закрыть файл:
<p>Российская школа CSS. <br />
Урок CSS №23. Закругление углов 2</p>
</div>
</body>
</html>

Вот и всё. Теперь будем работать со стилями. Запишем в style.css следующее для всего блока:
/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Урок CSS №23. Закругление углов 2
style.css - Набор стилей для урока
=============================================================
*/

.all {
   position:relative;
   width:250px;
   background:#0072c9;
   color:#fff;
}

Теперь будем задавать стили для углов и окружающего пространства:
#ctl, #cbl, #ctr, #cbr {
   position:absolute;
   width:20px;
   height:20px;
   color:#0072c9;
   background:#fff;
   overflow:hidden;
   z-index:1;
}

#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}

.all em b {
   position:absolute;
   font:150px Arial;
   color:#0072c9;
   line-height:40px;
   font-weight:normal;
}

#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}

Почти всё готово. Зададим стили для содержания блока:
.all p {
   position:relative;
   z-index:10;
   padding:5px 10px;
}

Вот, кажется и всё... Думаю, что применение методу будет не очень сложно найти. Если Вы всё сделали правильно, то получите то, что получилось у нас в "демо". Удачи!
Спасибо за внимание!



Идея конструкции: Stu Nicholls
Автор урока: Григорий Загребельный, Российская школа CSS
Совместимость: Internet Explorer 6 - 7; Mozilla Firefox 2.xx - 3.xx Opera 8.хх - 9.xx.
---------------------------------------
Правила копирования материалов урока
Демо
Скачать урок (zip, 2 Kb)


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



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

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

Публикацию посмотрели 50951 раз(а) и написали 29 комментариев.
Подписаться на канал 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!