96
Итак, конструкция получится достаточно сложной, и закруглённые углы будут представлять из себя - этот символ: •
Мы его просто увеличим и расположим в 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! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!
---------------------------------------
---------------------------------------
Похожие публикации
Публикацию посмотрели 26460 раз(а) и написали 37 комментариев.
Комментарий #1 написал:
Sheff (16 августа 2008 10:55)
Группа:
Посетители
Комментариев: 26
Публикаций: 0
Репутация:
0 
Зарегистрирован: 3.06.2008
ОТлично.
Комментарий #2 написал:
dobs (16 августа 2008 20:00)
Группа:
Посетители
Комментариев: 2
Публикаций: 0
Репутация:
0
Зарегистрирован: 11.08.2008
Комментарий #3 написал:
st3ff (16 августа 2008 20:58)
Группа:
Посетители
Комментариев: 2
Публикаций: 0
Репутация:
0
Зарегистрирован: 6.08.2008
Как, раз, то,что ,надо.
зы: а -почему-нельзя-пробелы-ставить -в -комментариях, или-у-меня-у-одного-такой-баг...:(
Комментарий #4 написал:
GZ Design (17 августа 2008 11:19)
Группа:
Администраторы
Комментариев: 47
Публикаций: 144
Репутация:
2
Зарегистрирован: 7.04.2008
st3ff, видимо только у Вас
Комментарий #5 написал:
kibal4iw (17 августа 2008 20:00)
Группа:
Посетители
Комментариев: 38
Публикаций: 0
Репутация:
0
Зарегистрирован: 10.07.2008
Я сам пробовал закругдять углы, правда ниче с этого не вышло, а тут Вы, спасибо Вам большое
--------------------------
PHP, MySQL, SQL, HTML, CSS, javascript
Комментарий #6 написал:
lilipyh (18 августа 2008 09:45)
Группа:
Посетители
Комментариев: 6
Публикаций: 0
Репутация:
0
Зарегистрирован: 21.07.2008
Спасибо...есть еще способы но там код поболее будет.Спасибо!
Комментарий #7 написал:
guaNo (19 августа 2008 18:37)
Группа:
Гости
Комментариев: 0
Публикаций: 0
Репутация: 0
Зарегистрирован: --
есть более простой способ закругления углов у формы таблиц, делал 1 словом, а не целой поэмой! ))
Комментарий #8 написал:
kibal4iw (22 августа 2008 23:40)
Группа:
Посетители
Комментариев: 38
Публикаций: 0
Репутация:
0
Зарегистрирован: 10.07.2008
guaNo, поскажи как.
--------------------------
PHP, MySQL, SQL, HTML, CSS, javascript
Комментарий #9 написал: uncle (26 августа 2008 11:39)
Группа:
Гости
Комментариев: 0
Публикаций: 0
Репутация: 0
Зарегистрирован: --
А если этот блок динамически заполняется скриптами и не известна его длинна, как быть?
Группа:
Посетители
Комментариев: 1
Публикаций: 0
Репутация:
0
Зарегистрирован: 27.08.2008
Послал всем друзьям по аське!
Комментарий #11 написал:
Almaz (29 августа 2008 14:05)
Группа:
Гости
Комментариев: 0
Публикаций: 0
Репутация: 0
Зарегистрирован: --
а я вот вроде бы и понимаю цсс, а код не могу понять, нельзя было как-то с комментами? именно код закругления...
Комментарий #12 написал:
Ieshua (2 сентября 2008 09:09)
Группа:
Посетители
Комментариев: 30
Публикаций: 0
Репутация:
-1
Зарегистрирован: 12.08.2008
Есть ли возможность подписаться на вас через рсс-фид? Ответьте мне на почту, указанную в профиле
Комментарий #13 написал:
yahoogog (9 сентября 2008 20:41)
Группа:
Посетители
Комментариев: 2
Публикаций: 0
Репутация:
0
Зарегистрирован: 5.09.2008
Атас Спасибо разослал ссылку по Аське!
Комментарий #14 написал:
funkykatki (10 сентября 2008 04:53)
Группа:
Посетители
Комментариев: 1
Публикаций: 0
Репутация:
0
Зарегистрирован: 10.09.2008
Фиг где встретишь такое...
Комментарий #15 написал:
barmamaster (13 сентября 2008 16:40)
Группа:
Посетители
Комментариев: 1
Публикаций: 0
Репутация:
0
Зарегистрирован: 13.09.2008
Тут весь дизайн в Хроме развалился :(
Комментарий #16 написал:
Sheff (15 сентября 2008 15:19)
Группа:
Посетители
Комментариев: 26
Публикаций: 0
Репутация:
0
Зарегистрирован: 3.06.2008
в эксплоуре некоректно отображает когда в таблицу его вносишь
Комментарий #17 написал:
misdos (17 сентября 2008 16:59)
Группа:
Посетители
Комментариев: 3
Публикаций: 0
Репутация:
0
Зарегистрирован: 13.09.2008
Новость СУПЕР! Ссылку отпрвил друзьям и добавил в мемори
Комментарий #18 написал:
gorgiqqq (18 сентября 2008 21:56)
Группа:
Посетители
Комментариев: 3
Публикаций: 0
Репутация:
0
Зарегистрирован: 31.07.2008
Интересненько,
зайду как
нибудь ещё почитать
Комментарий #19 написал:
Aksu Q (20 сентября 2008 03:59)
Группа:
Гости
Комментариев: 0
Публикаций: 0
Репутация: 0
Зарегистрирован: --
извращение сомнительной пригодности сглажевание зашарпленное, грязное.
линия покромсанно-ступенчатая, не плавная.
имхо скругление картинками даёт гораздо качественней визуальный результат
Комментарий #20 написал:
Aleksandr (19 октября 2008 02:27)
Группа:
Гости
Комментариев: 0
Публикаций: 0
Репутация: 0
Зарегистрирован: --
Aksu Q, но для новичков, да и для всех для расширения знаний вполне и этого хватает.
А вообще хороший урок, продолжайте в том же духе, в РуНете не похвастаешься обилием сайтов с уроками по цсс
Комментарий #21 написал:
masterok (27 октября 2008 03:50)
Группа:
Посетители
Комментариев: 3
Публикаций: 0
Репутация:
0
Зарегистрирован: 5.10.2008
Пример хороший, но нельзя ли действительно добавить коментов там, где размеры закругления...я, например, хотел бы закругление в 12 пикселей, в каких пропорциях надо менять и какие параметры?
молодцы, сайт в общем хороший.
Комментарий #22 написал:
Алексей (7 ноября 2008 12:45)
Группа:
Гости
Комментариев: 0
Публикаций: 0
Репутация: 0
Зарегистрирован: --
в IE выглядит паршивенько
Комментарий #23 написал:
Иван (12 декабря 2008 22:03)
Группа:
Гости
Комментариев: 0
Публикаций: 0
Репутация: 0
Зарегистрирован: --
Всё хорошо, только код больно большой... есть покороче...
Комментарий #24 написал:
Станислав (21 декабря 2008 23:38)
Группа:
Гости
Комментариев: 0
Публикаций: 0
Репутация: 0
Зарегистрирован: --
Решение громоздко как минимум, а во вторых вы попробуйте посмотреть на ваше творение разными браузерами в разных операционных системах.... Плохой урок да еще и zindex.. ппц. Ваш код выглядит в 10 раз короче, если бы немножко подумали. Решение на твердую двойку. Человек который делал урок в CSS нихрена не понимает.
Комментарий #25 написал:
aseret (6 марта 2009 16:24)
Группа:
Гости
Комментариев: 0
Публикаций: 0
Репутация: 0
Зарегистрирован: --
Комментарий #26 написал:
BaKl1 (15 марта 2009 11:34)
Группа:
Гости
Комментариев: 0
Публикаций: 0
Репутация: 0
Зарегистрирован: --
компьюерная помощь чертаново предлагает компьютерные услуги включающие ремонт компьютера сборку компьютера устранение всех проблем с вашим компьютером компьютерная помощь http://remont-komputera.ru компьютерная помощь
Комментарий #27 написал:
DasBit (12 мая 2009 06:56)
Группа:
Посетители
Комментариев: 36
Публикаций: 0
Репутация:
0
Зарегистрирован: 12.05.2009
Спасиба ! Вторая часть не хуже первой
Комментарий #28 написал:
xqdici1990 (24 мая 2009 16:46)
Группа:
Посетители
Комментариев: 1
Публикаций: 0
Репутация:
0
Зарегистрирован: 24.05.2009
Комментарий #29 написал:
dowakq1962 (1 июня 2009 17:14)
Группа:
Посетители
Комментариев: 1
Публикаций: 0
Репутация:
0
Зарегистрирован: 1.06.2009
Комментарий #30 написал:
sqzqdi1962 (1 июня 2009 20:31)
Группа:
Посетители
Комментариев: 1
Публикаций: 0
Репутация:
0
Зарегистрирован: 1.06.2009
← 1 2 →Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.
