Хотя любой слой по своему определению является прямоугольником, с помощью рисунков у слоя можно сделать один, два или даже четыре декоративных уголка. Далее просмотрим вариант разработки у слоя двух верхних «отрезанных» уголков.
Для этой цели в графическом редакторе вначале следует подготовить Имаги уголков, цвет которых совпадает с цветом фона. Так, на рис 1 показаны Имаги левого и правого верхних уголков.
Рис. 1. Подготовленные уголки
В изображении не должна быть включена прозрачность, используется два цвета — фона и слоя, как показано на рис. 2.
Рис. 2. Цвета, используемые в изображении уголка
Нам понадобится два слоя, один из которых вкладывается внутрь другого. Первый, назовем его left_corner, отвечает за левый уголок, а второй — right_corne — за правый. Добавление рисунка уголка происходит с помощью универсального стилевого параметра background, в качестве значения которого устанавливается цвет фона, путь к графическому файлу и положение рисунка (пример 1). Поскольку изображение уголка задается в виде фона, который по умолчанию повторяется по вертикали и горизонтали, то к атрибуту background следует также добавляем аргумент no-repeat. Это гарантирует, что рисунок будет отображаться только один раз, без всяких повторений.
Чтобы контент внутри цветной области не «налипал» на края, следует добавляем поля к внутреннему слою через параметр padding. Вдобавок воспользуемся тегом text-indent, его значение устанавливает отступ первой строки — тогда первая строчка контента не будет выходить за пределы области в районе уголка. Значение text-indent подбирается экспериментально в зависимости от размеров рисунка уголка и контента. К сожалению, применить подобный прием к правому верхнему уголку не удастся, так что верхняя строка контента с правого края может выходить за пределы цветовой границы. В этом случае рекомендуется увеличить значение поля справа через свойство padding-right или уменьшить размер Имаги уголка.
Пример 1. Использование двух слоев
Результат данного примера продемонстрирован ниже (рис. 3).
Рис. 3. Вид блока с двумя уголками
Замечание
Фоновый рисунок автоматически располагается в левом верхнем углу слоя, поэтому запись left top в примере является избыточной. Ее можно убрать или заменить иным значением, если уголок должен отображаться в другом углу слоя.
Не обязательно использовать элементы <DIV>, в качестве внутреннего слоя подойдет и другой блочный элемент, например <H1>. Также, чтобы обеспечить поля вокруг контента, добавим внутрь слоя left_corner параграф (тег <P>) и для него установим стилевой атрибут padding, как показано в примере 2.
Пример 2. Применение заголовка H1 для разработки уголка
Результат данного примера показан ниже (рис. 4).
Рис. 4. Блок с заголовком
При использовании параграфов (<P>) и заголовков (<H1>) следует принимать во внимание, что отступы вокруг этих элементов заложены по умолчанию, поэтому их следует обнулять при помощи свойства margin, либо устанавливать свои собственные значения.
Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru
О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект