Разделы

Использование блока с закруглениями для выделения строки

Метки:

фон

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

Предварительно в графическом редакторе готовим изображение, на котором будет выводиться текст (рис. 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. Создание блока с закруглениями

<!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">
   p.address, p.address span {
    background: url(bg.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

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

В заключение приведем преимущества и недостатки метода.

Преимущества

Использование одной картинки;
При включении прозрачности в рисунке блок можно располагать на фоне любого цвета.

Недостатки

Размер блока не масштабируется вместе с надписью;
Нельзя добавлять несколько строк текста, для этого придется переделывать и картинку и код;
Фиксированная ширина и высота блока.

Несмотря на указанные минусы, метод справляется с поставленной задачей — отображает текстовую строку в блоке с закруглениями. Причем ширину блока можно варьировать через стили.

Разделы

Термины

Использование блока с закруглениями для выделения строки

Преимущества

Недостатки

Отправить комментарий