Учебник CSS
Невозможно отучить людей изучать самые ненужные предметы.
Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3
Надо знать обо всем понемножку, но все о немногом.
Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы
Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)
Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода
Самоучитель CSS
Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5
Новости
Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости
Справочник CSS
Справочник от А до Я
HTML, CSS, JavaScript
Афоризмы
Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы
| Помогли мы вам |
- 25 апрель 2024, 01:19
Сделать рамку со скругленными уголками - «Уголки»
Для создания рамки вокруг блока используется стилевое свойство border, в качестве значения которого задается толщина, стиль и цвет линии. Если поверх такой линии наложить графические уголки, то мы убьем двух зайцев — получим нужные закругления и сохраним границу, которую можно увидеть даже при отключении картинок.
Вначале рисуем рамку в графическом редакторе (рис. 1). В нашем случае она имеет толщину два пиксела и серый цвет (#808080).
Рис. 1. Рамка на прозрачном фоне
Внутри рамка должна быть обязательно прозрачной, тогда можно будет задавать блоку желаемый цвет, а фон под уголками должен совпадать с цветом фона. Как показано на рис. 1, он белый.
Поскольку на рисунке нас интересуют только уголки, то для сайта изображение следует изменить — вырезать уголки и разместить их рядом по горизонтали или вертикали (рис. 2).
Рис. 2. Изображения для публикации
Увеличенный рисунок с уголками на прозрачном фоне представлен на рис. 3. Сверху вниз располагаются уголки: левый верхний, правый верхний, левый нижний и правый нижний.
Рис. 3. Увеличенное изображение уголков
После того, как рисунок подготовлен, пора переходить к коду. Для создания уголков нам потребуется четыре элемента, в их качестве можно использовать теги <em>, <b>, <strong>, <span> и другие, для удобства вкладывая их один в другой. Для верхних уголков заведем класс с именем bt, а для нижних — класс bb (пример 1).
Пример 1. Код для создания блока
<div class="color_block">
<em class="bt"><b> </b></em>
<div class="block_content">
Содержимое
</div>
<em class="bb"><b> </b></em>
</div>В стилях к блоку добавляем рамку через свойство border, а вывод уголков делаем через универсальное свойство background. Рамка отображается вокруг блока, поэтому фоновый рисунок окажется внутри границы. Так что придется сдвигать фон на толщину линии через свойства top и left, предварительно установив относительное позиционирование (пример 2).
Пример 2. Добавление закруглений через один рисунок
XHTML 1.0CSS 2.1IECrOpSaFx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Закругленные уголки</title>
<style type="text/css">
.color_block {
border: 2px #808080 solid; /* Параметры рамки */
background: #e3ffec; /* Цвет фона */
}
em.bt, em.bt b, em.bb, em.bb b {
display: block; /* Блочный элемент */
height: 10px; /* Высота уголка */
font-size: 0; /* Размер шрифта */
background: url(images/corners.png) no-repeat; /* Путь к файлу с уголками */
position: relative; /* Относительное позиционирование */
}
em.bt {
top: -2px; /* Сдвигаем левый верхний уголок вверх */
left: -2px; /* Сдвигаем влево */
}
em.bt b {
background-position: 100% -10px; /* Рисунок сдвигается к следующему уголку */
left: 4px; /* Сдвигаем вправо */
}
em.bb { background-position: 0 -20px; top: 2px; left: -2px; }
em.bb b { background-position: 100% -30px; left: 4px; }
.color_block .block_content {
padding: 0 7px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div class="color_block">
<em class="bt"><b> </b></em>
<div class="block_content">
Чтобы изготовить пугало для горного поля, делают фигуру человека,
который держит в руках лук и стрелы. Птицы и звери видят его
и убегают. И хотя у пугала нет никаких намерений, олень не
подойдет к нему близко. Так пугало выполняет свое назначение,
и поэтому говорят, что оно стоит в горном поле не напрасно.
</div>
<em class="bb"><b> </b></em>
</div>
</body>
</html>Результат данного примера показан на рис. 4.
Рис. 4. Закругленные уголки у блока
Обратите внимание на следующие моменты. Сам рисунок с уголками в виде фона выводится только один раз и далее для определенных элементов меняет свою позицию через свойство background-position. Так как высота блока ограничена значением height, то увидеть весь рисунок целиком нельзя, поэтому мы видим нужный нам фрагмент. Для вложенных тегов <b> сдвигать рисунок приходится с учетом смещения его родителя, поэтому в качестве значения left выступает удвоенная толщина границы.
- © Создать рамку со скругленными уголками без изображений - «Уголки»
- © Как изменить цвет рамки вокруг изображения-ссылки - «Изображения»
- © Добавить скругленные уголки у фотографии фиксированного размера - «Уголки»
- © Сделать блок со скругленными уголками без рисунков - «Уголки»
- © Сделать круглые изображения - «Уголки»
- © Сделать блок со скруглёнными уголками через CSS3 - «Уголки»
- © Как убрать рамку вокруг изображений-ссылок - «Изображения»
- © Добавить рамку вокруг кнопки - «Линии и рамки»
- © Как добавить вокруг текста рамку определенного цвета - «Текст»
- © Сделать цветную горизонтальную линию - «Линии и рамки»
|
|
|
|
АВТОРИЗАЦИЯ
|
• Мы информационный портал, на котором публикуются новости веб-дизайна и мелкие хитрости, а так же информация и советы которые вам смогут помочь по созданию сайтов, шаблонов, и многое другое. Вы также сможете найти интересные уроки по CSS3, HTML5, jQuery, Photoshop и и многое другое, интересное, с интернет мира. Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не знаешь: страшно, когда знать не хочется." «Самоучитель CSS » © Мы транслируем с 2006 года. Все для веб-дизайнера - CSS. Все материалы публикуют на сайте гости и пользователи сайта. Администрация сайта не несет ответственности за публикации. |
|