Слой с двумя «отрезанными» уголками
Хотя любой слой по своему определению является прямоугольником, с помощью изображений у слоя можно сделать один, два или даже четыре декоративных уголка. Далее рассмотрим вариант создания у слоя двух верхних «отрезанных» уголков.
Для этой цели в графическом редакторе вначале следует подготовить изображения уголков, цвет которых совпадает с цветом фона. Так, на рис 1 показаны изображения левого и правого верхних уголков.
Рис. 1. Подготовленные уголки
В изображении не должна быть включена прозрачность, используется два цвета — фона и слоя, как показано на рис. 2.
Рис. 2. Цвета, используемые в изображении уголка
Нам понадобится два слоя, один из которых вкладывается внутрь другого. Первый, назовем его left_corner, отвечает за левый уголок, а второй — right_corne — за правый. Добавление рисунка уголка происходит с помощью универсального стилевого параметра background, в качестве значения которого устанавливается цвет фона, путь к графическому файлу и положение рисунка (пример 1). Поскольку изображение уголка задается в виде фона, который по умолчанию повторяется по вертикали и горизонтали, то к атрибуту background следует также добавить аргумент no-repeat. Это гарантирует, что рисунок будет отображаться только один раз, без всяких повторений.
Чтобы текст внутри цветной области не «налипал» на края, следует добавить поля к внутреннему слою через параметр padding. Вдобавок воспользуемся атрибутом text-indent, его значение устанавливает отступ первой строки — тогда первая строчка текста не будет выходить за пределы области в районе уголка. Значение text-indent подбирается экспериментально в зависимости от размеров рисунка уголка и текста. К сожалению, применить подобный прием к правому верхнему уголку не удастся, так что верхняя строка текста с правого края может выходить за пределы цветовой границы. В этом случае рекомендуется увеличить значение поля справа через свойство padding-right или уменьшить размер изображения уголка.
Пример 1. Использование двух слоев
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Два уголка</title>
<style type="text/css">
#left_corner {
background:
#99cedf /* Цвет фона слоя */
url(corner.gif) /* Путь к файлу с левым уголком */
left top /* Рисунок в левом верхнем углу */
no-repeat; /* Отключаем повторение фона */
}
#right_corner {
background:
url(corner2.gif) /* Путь к файлу с правым уголком */
right top /* Рисунок в правом верхнем углу */
no-repeat; /* Отключаем повторение фона */
padding: 10px; /* Поля вокруг текста */
text-indent: 20px; /* Смещение первой строки */
}
</style>
</head>
<body>
<div id="left_corner">
<div id="right_corner">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</body>
</html>
Результат данного примера продемонстрирован ниже (рис. 3).
Рис. 3. Вид блока с двумя уголками
Замечание
Фоновый рисунок автоматически располагается в левом верхнем углу слоя, поэтому запись left top в примере является избыточной. Ее можно убрать или заменить иным значением, если уголок должен отображаться в другом углу слоя.
Не обязательно использовать элементы <DIV>, в качестве внутреннего слоя подойдет и другой блочный элемент, например <H1>. Также, чтобы обеспечить поля вокруг текста, добавим внутрь слоя left_corner параграф (тег <P>) и для него установим стилевой атрибут padding, как показано в примере 2.
Пример 2. Применение заголовка H1 для создания уголка
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Два уголка</title>
<style type="text/css">
#left_corner {
background: #99cedf url(corner.gif) no-repeat; /* Параметры левого верхнего уголка */
}
#left_corner H1 {
font-size: 120%; /* Размер текста заголовка */
margin: 0; /* Убираем отступы вокруг заголовка */
padding: 10px 30px; /* Поля по вертикали и горизонтали */
font-family: Arial, sans-serif; /* Рубленый шрифт для заголовка */
color: navy; /* Цвет заголовка */
background: url(corner2.gif) right top no-repeat; /* Параметры правого верхнего уголка */
}
#left_corner P {
padding: 10px; /* Поля вокруг текста */
margin-top: 0; /* Отступ сверху параграфа */
margin-bottom: 0.5em; /* Отступ снизу параграфа */
}
</style>
</head>
<body>
<div id="left_corner">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Результат данного примера показан ниже (рис. 4).
Рис. 4. Блок с заголовком
При использовании параграфов (<P>) и заголовков (<H1>) следует принимать во внимание, что отступы вокруг этих элементов заложены по умолчанию, поэтому их следует обнулять при помощи свойства margin, либо устанавливать свои собственные значения.
| Статья опубликована: 06.05.2006 | Последнее обновление: 02.05.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
John
06.05.2006
Зачем?
Ведь рисунок - это лишнее обращение к серверу, лишний траффик...
Костя
07.05.2006
Leo
08.05.2006
А Вы уверены, что применив CSS мы сэкономим на трафике? Например, те 2 уголка, что автор использует в примере занимают в сумме 221 байт. Вряд ли код CSS получится компактнее. Хотя, возможно, Вы приведете пример более компактного "чистого" CSS?..
John
08.05.2006
если Вы под "экономией траффика" имеете в виду обьем передаваемых данных - то мы на нем будем иметь следующую экономию (на данном примере при прочих равных):
- авторский код (только style и div секции) - 406 байт, плюс два по 108 на рисунки - итого 622 байта.
- переработаный код с сайта cssplay (сразу отмечу - код мне лично не нравится, я использую слегка другой вариант) - 683 байта.
Как видите, авторский вариант короче на 61 байт (что в условиях реальных сетей где пакеты имеют стабильные размеры ничего не меняет, все-равно что в первом, что во втором случае будет передаваться минимум 800-байтный пакет).
Я же под "экономией траффика" подразумевал совокупность обьема и количества запросов браузера к серверу, что выливается в 2 лишних запроса на файлы уголков (что занимает, во-первых, время, а во-вторых - лишние полупустые пакеты, т.е. тот же обьем).
код привожу (прошу прощения если не получится - я не в курсе пройдут ли теги):
<code>
<style type="text/css">
.box {background:#99CEDF;}
.ch {background: transparent; width:40%; margin:0 auto;}
.ch h1 {margin:0 10px;font-size:2em; letter-spacing:1px;}
.ch p {padding-bottom:0.5em;}
.ch.top, .ch.bottom {display:block; font-size:1px;}
.ch.b1, .ch.b2, .ch.b3, .ch.b4, .ch.b5 {
display:block;
overflow:hidden;
height:1px;
background:#99CEDF;
}
.ch1.b1 {margin:0 5px;}
.ch2.b2 {margin:0 4px;}
.ch3.b3 {margin:0 3px;}
.ch4.b4 {margin:0 2px;}
.ch5.b5 {margin:0 1px;}
</style>
...
<div class="ch">
<b class="top">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="b5"></b>
</b>
<div class="box">
<h1>The sample title</h1>
The sample text
</div>
</div>
</code>
Vjacheslav
08.05.2006
Например, John, твой пример не работает в Opera.
John
08.05.2006
Я не имею ничего против решений с картинками.
В ряде случаев это единственный приемлемый способ решить задачу.
Т.о. принципы "всему свое применение" и "место-время-обстоятельства" никто не отменял.
Но (2автор) после статьи "слой с отрезаным уголком" увидеть то же решение но в с двумя уголками... Это, я так понимаю, нужно на следующей неделе ждать "слой с тремя отрезанными уголками и тенью"?
А где принципиальные изменения?
Я ни в коей мере не хочу обидеть автора статьи, но все-же какое-то тоскливое чувство вызывают такие серии статей.
А пример в opera работает, могу скриншот выслать. Да и не мой это пример, на cssplay много чего интересного есть.
Кстати сказать, не все решения на cssplay удачные, часть из них - "жестко" привязаны к, например, координатам.
Leo
08.05.2006
Подтверждаю слова Vjacheslav-а о том, что пример не работает в Opera. Кроме того, в FireFox аналогично - стандартное прямоугольное поле БЕЗ УГОЛКОВ.
Vjacheslav
09.05.2006
А с 3-мя или 4-мя уголками на их примере достигается простым копированием пары div-ов.
John
09.05.2006
Vjacheslav
09.05.2006
Влад Мержевич
10.05.2006
Применение рисунка
- недостатки: для изменения цвета фона требуется менять рисунок целиком; пользователь может отключить показ картинок в браузере; приходится сдвигать текст, чтобы он не наложился на рисунок.
- преимущества: компактный код; простота (фактически используется один DIV и background).
"Чистый" CSS
- недостатки: громоздкий код; возможные проблемы с отображением в разных браузерах;
- преимущества: никаких картинок, возможность наложения текста на линию.
Что касается объема данных, то он примерно одинаковый в том и другом случае, так что учитывать его, что называется, "на спичках экономить".
Получается, что оба метода хороши, но каждый по-своему и выбирать надо исходя из своих предпочтений и задач.
Влад Мержевич
10.05.2006
По "уголкам" это последняя статья. К тому же вы уже привели код для создания уголков без рисунков, так что смысла нет повторяться и писать новую статью по этому поводу.
Бизон
11.05.2006
1. нарушается всякая логика разметки, куча декоративных элементов просто для создания уголка (а если уголок будет сильнее срезан, скажем, пикселей так на 20, будете описывать все 20 полосок по пикселу?
)2. Код становится куда менее понятным и читабельным
3. При наличии множества подобных срезанных блоков никакой экономии не выйдет, один раз загрузить пару картинок, согласитесь, значительно легче, чем для каждого блока грузить кучу таких вот текстовых полосочек.
ЗЫ да, код кстати кривой, блоков ch1..5 я не нашел в ХТМЛ, хотя в css они описаны. ch просто тогда уж...
marcuch
17.05.2006
у меня в файр фоксе уголки отрезаные отображаются.
"у меня вс? работает. что я делаю не так?" (с)
Игорь
29.05.2006
http://igorsviridov.narod.ru/webdes/ugolki/
egor egorrr
26.08.2006
#linija
{
float: left;
width: 80%;
margin: 100 10px 10px 100;
padding-bottom: 10px;
border: 1px solid #777;
}
#lenka-border
{
float: left;
border: 40px solid #777;
margin: 100px 10px 0px 10px;
border-top: 40px solid red;
border-left: 40px solid green;
border-right: 40px solid black;
}
</style>
<div id="linija">
<p id="lenka-border" title="">текст</a> <br>
<p id="lenka-border" title=""></p>
</div>
egor egorrr
26.08.2006
<style>
#lenka-dura
{ width: 80%;
float: left;
border: 40px solid #777;
margin: 100px 10px 0px 10px;
border-top: 40px solid white;
border-left: 40px solid white;
border-right: 40px solid white;
}
</style>
<p id="lenka-dura" title="shutka">текст</a> <br>
<p id="lenka-dura" title="vot obrezanyj ugol"></p>
<p id="lenka-dura" title=""></p>
Алексей
16.09.2006
Буду признателен за любые советы, как добиться такого или схожего эффекта не прибегая к графике.
Влад Мержевич
18.09.2006
Element
13.03.2007
Вадим
13.06.2007
Так вот, IE6 и Opera9 показали все правильно, а любимая Mozilla Firefox/1.5 первый контейнер с цветом фона и вордером отображает как height=100%.
Вадим
13.06.2007
http://smart.tver.ru/vin/
mig
21.04.2008
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Фиксированный фон</title>
<style type="text/css">
body {margin:10; padding:10;}
.box {background:#99CEDF; padding: 0 10px;}
.ch {background: transparent; width:30%; margin:0 auto;}
.ch h1 {margin:0; font-size:2em; letter-spacing:1px;}
.top, .bottom {display:block; font-size:1px;}
.b1, .b2, .b3, .b4, .b5 {
display:block;
overflow:hidden;
height:1px;
background:#99CEDF;
}
.b1 {margin:0 5px;}
.b2 {margin:0 4px;}
.b3 {margin:0 3px;}
.b4 {margin:0 2px;}
.b5 {margin:0 1px;}
</style>
</head>
<body bgcolor="#003333">
<div class="ch">
<b class="top">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="b5"></b>
</b>
<div class="box">
<h1>The sample title</h1>
The sample text
</div>
<b class="bottom">
<b class="b5"></b>
<b class="b4"></b>
<b class="b3"></b>
<b class="b2"></b>
<b class="b1"></b>
</b>
</div>
</body>
</html>
atin
23.06.2008
а вот код будет загружаться каждый раз, да и по углам могут быть не просто уголки, а, например заитки или еще какие-нить узоры
автор статьи - молодец!
пс: для полупрозрачных катринок бы такой метод... (эксплорер их кушает особенно...)