www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Использование слоев > Слой с двумя ?отрезанными? уголками

Слой с двумя ?отрезанными? уголками

контентовая версия  

Хотя любой слой по своему определению является прямоугольником, с помощью рисунков у слоя можно сделать один, два или даже четыре декоративных уголка. Далее просмотрим вариант разработки у слоя двух верхних «отрезанных» уголков.

Для этой цели в графическом редакторе вначале следует подготовить Имаги уголков, цвет которых совпадает с цветом фона. Так, на рис 1 показаны Имаги левого и правого верхних уголков.

Левый верхний уголок Правый верхний уголок

Рис. 1. Подготовленные уголки

В изображении не должна быть включена прозрачность, используется два цвета — фона и слоя, как показано на рис. 2.

Рис. 2. Цвета, используемые в изображении уголка

Рис. 2. Цвета, используемые в изображении уголка

Нам понадобится два слоя, один из которых вкладывается внутрь другого. Первый, назовем его left_corner, отвечает за левый уголок, а второй — right_corne — за правый. Добавление рисунка уголка происходит с помощью универсального стилевого параметра background, в качестве значения которого устанавливается цвет фона, путь к графическому файлу и положение рисунка (пример 1). Поскольку изображение уголка задается в виде фона, который по умолчанию повторяется по вертикали и горизонтали, то к атрибуту background следует также добавляем аргумент no-repeat. Это гарантирует, что рисунок будет отображаться только один раз, без всяких повторений.

Чтобы контент внутри цветной области не «налипал» на края, следует добавляем поля к внутреннему слою через параметр padding. Вдобавок воспользуемся тегом text-indent, его значение устанавливает отступ первой строки — тогда первая строчка контента не будет выходить за пределы области в районе уголка. Значение text-indent подбирается экспериментально в зависимости от размеров рисунка уголка и контента. К сожалению, применить подобный прием к правому верхнему уголку не удастся, так что верхняя строка контента с правого края может выходить за пределы цветовой границы. В этом случае рекомендуется увеличить значение поля справа через свойство padding-right или уменьшить размер Имаги уголка.

Пример 1. Использование двух слоев

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<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

Рис. 3. Вид блока с двумя уголками

Замечание

Фоновый рисунок автоматически располагается в левом верхнем углу слоя, поэтому запись left top в примере является избыточной. Ее можно убрать или заменить иным значением, если уголок должен отображаться в другом углу слоя.

Не обязательно использовать элементы <DIV>, в качестве внутреннего слоя подойдет и другой блочный элемент, например <H1>. Также, чтобы обеспечить поля вокруг контента, добавим внутрь слоя left_corner параграф (тег <P>) и для него установим стилевой атрибут padding, как показано в примере 2.

Пример 2. Применение заголовка H1 для разработки уголка

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<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

Рис. 4. Блок с заголовком

При использовании параграфов (<P>) и заголовков (<H1>) следует принимать во внимание, что отступы вокруг этих элементов заложены по умолчанию, поэтому их следует обнулять при помощи свойства margin, либо устанавливать свои собственные значения.

Статья опубликована: 06.05.2009 Последнее обновление: 02.05.2009
Поиск по сайту
Использование слоев
Разделы
Теги по теме

DIV
Элемент DIV является блочным элементом и предназначен для выделения фрагмента объекта с целью изменения вида содержимого.

H1...H6
ШТМЛ предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег H1 представляет собой наиболее важный заголовок первого уровня, а тег H6 служит для обозначения заголовка шестого уровня и является наименее значительным.

P
Определяет контентовый параграф. Тег P является блочным элементом, перед ним всегда добавляется пустая строка, параграфы контента идущие друг за другом разделяются между собой вертикальным промежутком.

CSS (ЦСС) по теме

background
Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.

color
Определяет цвет контента элемента.

font-family
Устанавливает семейство шрифта, которое будет использоваться для оформления контента содержимого. Список шрифтов может включать одно или несколько названий, разделенных запятой.

font-size
Определяет размер шрифта элемента, который может быть установлен несколькими способами.

margin
Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента.

margin-bottom
Устанавливает величину отступа от нижнего края элемента.

margin-top
Устанавливает величину отступа от верхнего края элемента.

padding
Устанавливает значение полей вокруг содержимого элемента. Полем имеется ввиду расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.

text-indent
Устанавливает величину отступа первой строки блока контента (например, для параграфа P). Воздействия на все остальные строки не оказывается.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект