x
 
Сергей Ревякин
15 ноября 2012

Здравствуйте, уважаемые советчики!

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



Я уже отвечал, как сделать такую декоративную линию справа от текста, посмотрите там, как всё устроено.

Для отцентрированного текста мне не удалось найти надёжное решение в рамках одного тега — то Сафари сломается, то Эксплорер. Если добавить дополнительный span, получится так:

<style>
  h1 {
    position: relative;
    overflow: hidden;
    font-size: 24px;
    font-weight: normal;
    text-align: center;
  }
  h1 > span {
    display: inline-block;
    margin: 0 .4em;
  }
  h1 > span:before,
  h1 > span:after {
    content: '';
    position: absolute;
    width: 100%;
    border-top: 2px solid #4e4e4e;
    margin-top: .6em;
  }
  h1 > span:before {
    margin-left: -102%;
  }
  h1 > span:after {
    margin-left: 2%;
  }
</style>

<h1><span>Рекомендуем</span></h1>

Рекомендуем


Издательство «Охотник»



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

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

Комментарии


15 ноября 2012

Очень остроумный вариант Романа Комарова: http://dabblet.com/gist/2502535/

Дмитрий Полисадов
15 ноября 2012

Подскажите, как быть по отношению к старым браузерам? Я про то, что псевдоэлементы before и after не работают в ИЕ 7 и ниже.

Мне, просто нужно подтвердить свою мысль, что ничего страшного нет в том, что посетитель в ИЕ 7 не увидит этих линий справа и слева от заголовка? Или для ИЕ придется делать свой стиль? Как правильно и профессионально поступить?

Спасибо.


15 ноября 2012

Если вы поддерживаете ИЕ 7, то необходимо принять решение. Если эти линии — простая декорация, ничего страшного, что небольшой процент пользователей их не увидит. Если полоски — элемент фирменного стиля или ещё почему-нибудь очень важны, то стоит показать в каждом браузере, заменив псевдоэлементы реальными тегами.

Рустам Шарипов
15 ноября 2012

Дима, лично я давно пользуюсь псевдоселекторами :before и :after, равно как :first-child, :last-child и :nth-child(n), а для совместимости с динозаврами“ применяю ie7-js (http://code.google.com/p/ie7-js). Если страница не слишком нагружена, тормозов почти не ощущается.

Иван Воищев
16 ноября 2012

Я использую не крутое решение. Но тоже ничего http://voischev-ivan.ya.ru/replies.xml?item_no=2693


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

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

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

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

Каким способом сделать простую анимацию на спрайтах Как устроена беспарольная аутентификация почтой 7




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

Иногда я спрашиваю о скидке для тренировки и потому что не против шанса сэкономить 1 Как избежать «эффекта Тильды»? 2 1 4