Категория > Скруглённые уголки > Выделить строку с помощью блока с закруглениями - «Уголки»

Выделить строку с помощью блока с закруглениями - «Уголки»


26-03-2016, 12:40. Автор: Administrator

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

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

Перейти обратно к новости