Выделить строку с помощью блока с закруглениями - «Уголки» » Самоучитель CSS
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
  • 02 май 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
Популярные статьи
  • 15 ноябрь 2024, 00:01
Грядёт Wi-Fi 8: когда он появится и что предложит вместо повышения скорости - «Новости сети»
Наш опрос
Помогли мы вам



Наши новости
       
  • 24 март 2016, 17:40
Написание эффективного кода
  • 24 март 2016, 16:20
Базовый синтаксис CSS
Разное и интересное
  • 02 май 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
  • 25 апрель 2024, 01:19
Скачать приложение Betera на Android
26-03-2016, 12:40
Выделить строку с помощью блока с закруглениями - «Уголки»
Рейтинг:
Категория: Самоучитель CSS / Скруглённые уголки

На сайте часто возникает необходимость акцентировать внимание на одной строке текста. Это может быть телефон, адрес или заголовок важного сообщения. Главное, чтобы посетители обратили на него внимание. Для этой цели лучше использовать блок с закруглениями, как показали психологические исследования, такое оформление притягивает взгляд чаще, чем обычное прямоугольное.

Предварительно в графическом редакторе готовим изображение, на котором будет выводиться текст (рис. 1). Если предполагается, что цвет фона страницы будет меняться, то для картинки следует задать прозрачность.

 


Рис. 1. Картинка для создания блока

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

Рисунок отображается достаточно стандартно — в виде фоновой картинки при помощи свойства background добавляемого к селектору P. Чтобы фон не повторялся, ставится значение no-repeat. Закругление справа от блока также добавляется в виде фона, но уже для тега <span>, находящегося внутри тега <p>. При этом фон для вложенного элемента необходимо позиционировать относительно правого края через свойство background-position. В результате произойдет наложение фона друг на друга (рис. 2).

 


Рис. 2. Фон от одного элемента накладывается на фон другого

Теперь нам предстоит сделать финт и сдвинуть фон тега <span> вправо. Для этой цели задаем тегу <span> относительное позиционирование (значение relative свойства position) и сдвиг (свойство left). Значение left равно ширине закругления на рис. 1. Одновременно left повлияет и на вложенный текст, он также окажется смещенным по горизонтали вправо. Чтобы вернуть его на место, добавим к стилям свойство text-indent со значением, равным значению left. Окончательно выравниваем текст по вертикали через padding, как показано в примере 1.

Пример 1. Создание блока с закруглениями

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">
   p.address, p.address span {
    background: url(images/roundbg.png) no-repeat; /* Путь к  изображению */
    height: 36px; /* Высота блока */
    width: 150px; /* Ширина блока */
    text-align: center; /* Выравнивание по центру */
   } 
   p.address span {
    display: block; /* Блочный элемент */
    background-position: 100% 0; /* Положение фона */
    position: relative; /* Относительное позиционирование */
    left: 17px; /* Сдвигаем вправо */
    padding: 6px 0; /* Поля вокруг текста */
    text-indent: -17px; /* Сдвигаем текст влево */
   }
  </style>
 </head>
 <body> 
   <p class="address"><span>ул. Могильщиков, 66</span></p>
 </body>
</html>

Результат данного примера показан на рис. 3.

 


Рис. 3. Вид текста в блоке с закруглениями


На сайте часто возникает необходимость акцентировать внимание на одной строке текста. Это может быть телефон, адрес или заголовок важного сообщения. Главное, чтобы посетители обратили на него внимание. Для этой цели лучше использовать блок с закруглениями, как показали психологические исследования, такое оформление притягивает взгляд чаще, чем обычное прямоугольное. Предварительно в графическом редакторе готовим изображение, на котором будет выводиться текст (рис. 1). Если предполагается, что цвет фона страницы будет меняться, то для картинки следует задать прозрачность. Рис. 1. Картинка для создания блока Ширину изображения можно сделать с запасом, чтобы через стили задавать ширину блока, высота при этом останется неизменной. Особенностью метода являются фиксированные размеры блока. Рисунок отображается достаточно стандартно — в виде фоновой картинки при помощи свойства background добавляемого к селектору P. Чтобы фон не повторялся, ставится значение no-repeat. Закругление справа от блока также добавляется в виде фона, но уже для тега , находящегося внутри тега . При этом фон для вложенного элемента необходимо позиционировать относительно правого края через свойство background-position. В результате произойдет наложение фона друг на друга (рис. 2). Рис. 2. Фон от одного элемента накладывается на фон другого Теперь нам предстоит сделать финт и сдвинуть фон тега вправо. Для этой цели задаем тегу относительное позиционирование (значение relative свойства position) и сдвиг (свойство left). Значение left равно ширине закругления на рис. 1. Одновременно left повлияет и на вложенный текст, он также окажется смещенным по горизонтали вправо. Чтобы вернуть его на место, добавим к стилям свойство text-indent со значением, равным значению left. Окончательно выравниваем текст по вертикали через padding, как показано в примере 1. Пример 1. Создание блока с закруглениями XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx Результат данного примера показан на рис. 3. Рис. 3. Вид текста в блоке с закруглениями
Просмотров: 2 716
Комментариев: 0:   26-03-2016, 12:40
Распечатать
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:


Другие новости по теме:
ДОБАВИТЬ БАННЕР