Итак, конструкция получится достаточно сложной, и закруглённые углы будут представлять из себя - этот символ: •
Мы его просто увеличим и расположим в 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>•</b></em>
<em id="cbl"><b>•</b></em>
<em id="ctr"><b>•</b></em>
<em id="cbr"><b>•</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! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!
---------------------------------------
---------------------------------------
Похожие публикации
Публикацию посмотрели 43407 раз(а) и написали 29 комментариев.
