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

🕛 19.01.2009, 23:20

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

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

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

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

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

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

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!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(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>