x
 
Николай
11 апреля 2013

Артём!

Верстаю зубчатый край у резинового блока, смущает, как он не вовремя обрывается. Можно ли оставить только целое количество зубчиков? Или я слишком заморочился?



Николай, бросьте! Ничего страшного, если зубья обрываются в произвольных местах, только отцентруйте фон:

.korona {
  background: url(decor.png) top center repeat-x;
}
  • Горбунов
  • Бирман
  • Шнайдер
  • Поликарпов Митин
  • Синельников
  • Беляев
  • Ильяхов

Эти неровности как-будто оживляют вёрстку.

Если действительно нужны предсказуемые края и блок не сильно растягивается, попробуйте задать точное количество повторений патерна через свойство background-size, например 10:

.korona-fixed {
  background-position: top left;
  background-size: 10% 6px;
}
  • 80px
  • 120px
  • 100px

Получается не очень — графика заметно искажена. Думаю, способ пригодится для волнистых антиалиасинговых краёв пастельных оттенков.

Ещё попробуйте скриптом задавать ширину блоку, чтобы она была кратна ширине одного зубчика. Я так делал в прогресс-баре теста «Какой вы аналитик?» (отвечайте на вопросы и смотрите на верхнюю полоску).

Да, ещё есть СВГ и Канвас, но должна быть веская причина использовать эти технологии для декорации блоков.

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

Напоминает меха баяна :-)

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

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

Комментарии

Сергей Якунин
11 апреля 2013

Можно сделать 100 зубчиков, а каждый зубчик флоат-элементом; лишние зубцы будут уходить «под кат» контейнера с огранченной высотой, скрытым оверфлоу и абсолютным позиционированием.

Так я сделал линейку на http://www.ormbattle.net — при любом размере экрана число дюймов целое.

Сергей Дробот
11 апреля 2013

Можно ещё сделать с помощью чудесного свойства border-image. В нём можно установить значение round, которое хитро масштабирует картинку, чтобы оставалось целое число повторений рисунка на одной стороне блока. Правда с поддержкой пока слабовато — http://caniuse.com/#search=border-image

Сергей Якунин
11 апреля 2013

Вот, сделал фидл с примером: http://jsfiddle.net/rAC9x/2/.

Станислав Лашманов
14 апреля 2013

Без изображений тоже можно обойтись:

http://jsfiddle.net/CyberAP/eSx3d/

Павел Вакуненко
14 апреля 2013

Статья на Хабре о зубчатом фоне на ЦСС:

http://habrahabr.ru/post/176591/


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

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

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

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

Хочется, чтобы много красивых картинок на сайте быстро загружались 14 1 1




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

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