Всё для Photoshop, картинки, web-мастеру, книги по сайтостроительсву, downloadУроки по CSS
Закругление углов на CSS конструкция представляет из себя символ: •
Этот символ мы увеличит, тем самым достигнем нашего результата. И так давайте начнём:
Создадим 2 файла: это index.html и style.css
На страницу index.html впишем:
<!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>
Web-come.narod.ru- Закругление углов </title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
На туже страницу index.html дальшепишем:
<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>
И в заключении страницы index.html дописываем:
<p>web-come.naron.ru <br />
Закругление углов </p>
</div>
</body>
</html>
Теперь приступим к созданию стиля 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;
}
Совместимость: Internet Explorer 6 - 7; Mozilla Firefox 2.xx - 3.xx; Opera 8.хх - 9.xx
Результат урока:
 |
При копировании материалов сайта-ссылка на сайт обязательна!