x
 
Станислав Некрасов
21 июня 2012

Артём, приветствую!

Подскажите, как гибко сверстать текст на подложке?



Самый компактный способ:

<style>
  p.ap-example {
    font-family: Arial, sans-serif;
    font-size: 20px;
    line-height: 24px;
  }

  .bg-1 {
    color: #fff;
    background: #8e43ff;
    padding: 1px 0;
    outline: #8e43ff solid 7px;
  }
  .bg-1 span {
    position: relative;
  }
</style>

<p class="ap-example">
  <span class="bg-1">
    <span>А в небе, ко всему приученный,<br>
    Бесмысленно кривится диск.</span>
  </span>
</p>

А в небе, ко всему приученный,
Бесмысленно кривится диск.

С помощью outline нельзя управлять полями раздельно — одна цифра для всех четырёх сторон. В вашем же примере все поля разные: верхнее — 7 пикселей, боковые — 10, нижниее — 8. Для тонкой настройки отступов подойдёт такой способ:

<style>
  .bg-2 {
    color: #fff;
    background: #8e43ff;
    padding: 7px 0 8px;
    *padding: 0;
    position: relative;
    left: -10px;
  }
  .bg-2 .bg-2 {
    left: 20px;
  }
  .bg-2 .bg-2 .bg-2 {
    left: -10px;
  }
  .bg-2 .bg-2 .bg-2 span {
    position: relative;
  }
</style>

<p class="ap-example">
  <span class="bg-2"><span class="bg-2"><span class="bg-2">
    <span>А в небе, ко всему приученный,<br>
    Бесмысленно кривится диск.</span>
  </span></span></span>
</p>

А в небе, ко всему приученный,
Бесмысленно кривится диск.

Несмотря на то, что я использую нарочные разрывы строки, эти способы выдержат и автоматические переносы:

Игровое начало, как бы это ни казалось парадоксальным, готично имеет ротор как при нагреве, так и при охлаждении. Собственный кинетический момент неравномерен.

Примеры выше не идеально отображаются в ИЕ 6 и 7, но вполне сносно, чтобы сойти за грациозную деградацию.

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

<style>
  .bg-3 {
    color: #fff;
    background: #8e43ff;
    padding: 7px 10px 8px;
    margin: -7px 0 -8px -10px;
    white-space: nowrap;
    *zoom: 1;
  }
  .bg-3 span {
    position: relative;
  }
</style>

<p class="ap-example">
  <span class="bg-3"><span>А в небе,
  ко всему приученный,</span></span><br>
  <span class="bg-3"><span>Бесмысленно
  кривится диск.</span></span>
</p>

А в небе, ко всему приученный,
Бесмысленно кривится диск.

К сожалению, я не смог бы вам ничего посоветовать, если фоном было изображение, а не сплошной цвет. Кажется, в спецификации ЦСС не хватает специальных свойств для этого. Каких? Предлагаю уважаемым советчикам пофантазировать.


P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Вадим Макеев
21 июня 2012

Обсуждалось к Чикуёнка два года назад: http://chikuyonok.ru/2010/01/uniform-text-background/


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

3 2 4 4




Недавно всплыло

Все уже успели заметить, что вы почти во всех пятничных примерах советуете немного поунижаться 12 Какие законы для текста, который будет восприниматься только на слух? 1 1 Выбранные элементы списка, как не забывать принципы из советов бюро и когда нужен логотип 1