x
 
Дмитрий Тонюк
30 августа 2012

Здравствуйте, подскажите, как лучше сверстать данные элементы без ЦСС 3?



По старинке, без ЦСС 3, эти «стрелочки» я сверстал очень просто, за 10 минут.

Подготовил разметку:

<ul class="tags">
  <li><a href="#">раз-два</a></li>
  <li><a href="#">три</a></li>
  <li><a href="#">четыре</a></li>
  <li><a href="#">пять</a></li>
  <li><a href="#">вышел</a></li>
  <li><a href="#">зайчик</a></li>
  <li><a href="#">погулять</a></li>
</ul>

Растянул картинку за середину в Фотошопе:

->

Написал базовые стили (кегль взял чуть крупнее, ваши 9px — это слишком):

ul.tags {
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  *zoom: 1;
}
ul.tags li {
  list-style: none;
  float: left;
  margin: 0 10px 7px 0;
  padding: 0;
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 22px;
  height: 22px;
  color: white;
  background-color: #006d96;
}
ul.tags a {
  position: relative;
  display: block;
  padding: 0 9px 0 7px;
  text-decoration: none;
  color: #eeeeee;
}
ul.tags a:hover {
  color: white;
}

Убрал тестовый background-color и декорировал элементы, скормив картинку сасс-миксину, который я использую для быстрого украшения фиксированных по высоте элементов:

ul.tags li {
  position: relative;
  @include decorate('arrow.png');
}
ul.tags a {
  /* Чтобы псевдоэлементы
     не закрыли ссылку */
  position: relative;
  z-index: 2;
}

Выделенная жёлтым строка генерирует такой ЦСС:

ul.tags li:before,
ul.tags li:after {
  content: '';
  background-image: url('arrow.png');
  background-repeat: no-repeat;
  position: absolute;
  width: 50%;
  height: 22px;
  top: 0;
}
ul.tags li:before {
  background-position: 0 0;
  left: 0;
}
ul.tags li:after {
  background-position: 100% 0;
  left: 50%;
}

Готово:


Как видите, два псевдоэлемента используют части одной и той же картинки. При ширине файла в 300 пикселей, максимальная ширина элемента получится около 600 пикселей.

Я предпочитаю оставлять картинку целой, не резать её, чтобы дизайнер потом мог самостоятельно поправить мелочи. Наример, такой кнопке:

[-]

добавить ободок:

[-]

Это было бы невозможно, разрежь я кнопку на tl.png, tr.png, br.png, bl.png.

Чтобы декорация сработала в ИЕ 7, не поддерживающем псевдоэлементы :before и :after, замените их реальными, указав классы при вызове миксина:

@include decorate('arrow.png', 0, 0, 0, 0, '.left', '.right');

Разметка изменится соответственно:

<ul class="tags">
  <li>
    <i class="left"></i>
    <i class="right"></i>
    <a href="#">раз-два</a>
  </li>
  <li>
    <i class="left"></i>
    <i class="right"></i>
    <a href="#">три</a>
  </li>
  <!-- ... -->
</ul>

Предлагаю уважаемым советчикам подумать, как сверстать такой элемент с помощью ЦСС 3. Примеры вёрстки удобно показывать фидлами и даблетами.

Если вы ещё не знакомы с препроцессорами ЦСС, начните с языка Сасс.

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

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

Комментарии

Антон Симонов
30 августа 2012

http://jsfiddle.net/8PHZ8/1/embedded/result/

Дмитрий Шимкин
30 августа 2012

Артём!

Если я не ошибаюсь, такой способ с одной картинкой сложно использовать в спрайтах.

Павел Михалёв
15 сентября 2012

Чтобы сверстать такой элемент с помощью ЦСС 3, понадобится его исходник в ПСД. Иначе, если вертикальный градиент ещё можно подобрать, то цветовой переход по горизонтали (в начале и в конце) повторить будет очень трудно. Имея же ПСД-исходник можно воспользоватся плагином «ЦСС 3 Пс» (http://css3ps.com).

«Стрелочку» с простым вертикальным градиентом можно сверстать так, как это делает Ана Тюдор: http://dabblet.com/gist/3725803.


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

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

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

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

Сайты для слабовидящих 2 За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 С чего начать изучение ЦСС? 1 Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5