Пользователь
0,0
рейтинг
14 апреля 2013 в 01:25

Разработка → Повторяющийся зубчатый фон на CSS



Давно на хабре не было постов про CSS и я решил восполнить этот пробел. Сегодня мы учимся готовить зубчатый фон используя только средства CSS и никаких изображений!

Важные требования к такому забору:

  • Никаких изображений!
  • Он должен спокойно тянуться по горизонтали
  • Обязательно должен поддерживать неравномерный фон у подложки
  • Фон не должен требовать никакой экстра-разметки. Лучше всего будет избегать псевдо-элементов (экономия — хорошо).

Поддерживаемые браузеры: Chrome, Firefox (> 3.6), Opera (>= 12), Safari (>= 5), IE10.

Для IE 7, 8 у нас будет фоллбэк в виде обычной заливки. А вот с IE9 проблема — он не поддерживает градиенты, но при этом понимает hsla и rgba цвета. Воистину «великолепный» браузер. Что ж, его пока придётся игнорировать. Если кто–то подскажет хороший фоллбэк для IE буду только благодарен.

Что ж, приступим.

Наш зубчатый край будет состоять из двух наслаивающихся друг на друга градиентов в виде треугольников.



background-image:
        linear-gradient(to bottom right, transparent 50.5%, lightblue 50.5%),
        linear-gradient(to bottom left, transparent 50.5%, lightblue 50.5%);    /* 50.5%, иначе угол будет не острый */
background-repeat: repeat-x, repeat-x;
background-position: 10px 0, 10px 0;  /*  начинаем не с обрезанного угла  */
background-size: 20px 20px, 20px 20px;


Чтобы скрыть все неприятные моменты снизу просто наложим поверх сплошной цвет.

border-top: 10px solid transparent;  /*  подготовим место под зубчики  */
background-image:
        linear-gradient(lightblue, skyblue),  /*  общий фон блока, всегда идёт первым перекрывая всё что под ним  */
        linear-gradient(to bottom right, transparent 50.5%, lightblue 50.5%),
        linear-gradient(to bottom left, transparent 50.5%, lightblue 50.5%);
background-repeat: repeat, repeat-x, repeat-x;
background-position: 0 0, 10px 0, 10px 0;
background-size: auto auto, 20px 20px, 20px 20px;
background-clip: padding-box, border-box, border-box;  /*  обрезаем края у общей заливки  */
background-origin: padding-box, border-box, border-box, border-box, border-box;  /*  позиционируем зубцы относительно верхней границы, а фон относительно внутреннего отступа  */


Ну вот и готово. Осталось добавить такие же зубцы снизу.

border-top: 10px solid transparent;
background-image:
        linear-gradient(lightblue, skyblue),
        linear-gradient(to bottom right, transparent 50.5%, lightblue 50.5%),
        linear-gradient(to bottom left, transparent 50.5%, lightblue 50.5%),
        linear-gradient(to top right, transparent 50.5%, skyblue 50.5%),
        linear-gradient(to top left, transparent 50.5%, skyblue 50.5%);
background-repeat: repeat, repeat-x, repeat-x, repeat-x, repeat-x;
background-position: 0 0, 10px 0, 10px 0, 10px 100%, 10px 100%;
background-size: auto auto, 20px 20px, 20px 20px, 20px 20px, 20px 20px;
background-clip: padding-box, border-box, border-box, border-box, border-box;
background-origin: padding-box, border-box, border-box, border-box, border-box;


Не забываем про фоллбэк:

background-color: lightblue;
background-color: hsla(0, 0%, 0%, 0);


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

Демо
Станислав @CyberAP
карма
13,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (66)

  • 0
    Ожидал увидеть целое число зубчиков.
    • +2
      Если бы border-image-source понимал несколько значений то это было бы возможно. А пока то что есть.
      • 0
        Можно задействовать псевдо-элементы.
        • 0
          Не очень понимаю как это решит проблему.
          • +2
            ::before {
                display: block;
                border-top: …;
                border-image: …;
                content: "";
            }
            ::after {
                display: block;
                border-bottom: …;
                border-image: …;
                content: "";
            }
            

            Делаете border-image на рамках псевдоэлементов, деградируется до обычной рамки.
            • 0
              Не, не получится. Для градиента внутри border-image нельзя задать background-size, т.е. то, от чего можно было бы отталкиваться для определения border-image. Кроме того, кажется, в ФФ это вообще не сработает. В вебкитах/опере можно, в итоге, лишь примерно подогнать это дело под известную ширину блока, но вот если размеры блока будут неизвестны — всё будет разъезжаться.

              Но если же вы уже делали такое — было бы интересно посмотреть на пример. У меня сходу ничего толкового не вышло :)
              • 0
                Да тут вообще нормальная картинка нужна, а не градиентом извращаться. И тогда уж псевдо-элементы ни к чему. Просто фоны раскидать по разным областям.
                • 0
                  Да с нормальной картинкой можно и на луну улететь, тут же вопрос именно в «чистом CSS». Хотя, например, с инлайновым SVG в бордер-имадже было бы отлично, но — FF…
                  • 0
                    По-моему, «чистый CSS» здесь экстремизм. Всё же градиенты не совсем для того создавались.
                    • 0
                      Флоаты тоже не для раскладок создавались.

                      А по поводу border-image — да, тут только с SVG можно пытаться. А вообще очень хороший вариант с маской как предложили ниже. Там можно блок полностью зазубрить.
  • –5
    Может я конечно и не прав, но на мой взгляд поддержка только ИЕ10 из всего его семейства — это через чур.
    Да и при необходимости я бы это реализовал либо через спрайт и before/after, либо через 2 вложенных дива.
    • +13
      Про Netscape забыли. Вдруг у кого стоит.
      • +7
        Я не говорю о 6-7. А хотя бы о 8 или 9, ибо (http://www.w3schools.com/browsers/browsers_explorer.asp) 10,7% пользователей я бы не назвал малой аудиторией…
        • 0
          Тогда лучше смотреть статистику конкретного ресурса где планируется это использовать.
          • +14
            Если проект делается с нуля, а не обновление уже имеющего ресурса?
            И что то мне подсказывает, что если для этого использовать гифку, то она врятли будет весить более 200b, и соответственно она даже на дайл-апе прогрузиться моментально не говоря уже о современных скоростях интернета, и не нужно париться по поводу кроссбраузерности.
            • –13
              Что-то мне подсказывает, что в школе по русскому языку у вас трояк был. Потому что «что то» пишется через дефис, «прогрузиться», в вашем случае, отвечает на вопрос: «Что делает?», поэтому не должен иметь мягкого знака в "-ться", не говоря уже о том, что перед «не говоря уже» у вас запятой нет.
              • –11
                Ну и, конечно же, «врятли» -> «вряд ли».

                И запятая перед «соответственно», да.
                • +9
                  Если не получается докопаться по сути, следует докопаться до орфографии, да?
                  • +5
                    Просто когда в огромном посте 2-3 опечатки — пишешь в ЛС, автор исправляет, хабр стал лушче, за окном — птички и радуга. А когда в сраном комментарии на три строчки 5-6 ошибок — это звездец, и никакие ЛС уже не спасут. Человек, вон, судя по профилю, дожил до 24 лет и до сих пор не знает базовых норм русского языка.

                    Ладно бы ошибки были в редкой и малоизвестной ситуации, типа необособления наречного выражения «как максимум». Но тут все случаи описываются учебником русского языка за 1-9 классы.
                    • +1
                      Все это так, но все же — по сути комментария есть возражения?
            • 0
              Единственный минус: отдельная гифка это дополнительный запрос
              • 0
                100-байтную PNG картинку легко встроить через data:uri.
        • +2
          Это базовый функционал сайта? Хотят красивостей и безопасности — обновятся.
    • +2
      IE7 и 8 поддерживаются. Просто у них будет плиточный интерфейс. IE9 не поддерживается вообще.
    • –9
      Правильно пишется «черезчур».
      • +4
        Правильно пишется «чересчур».
        • –4
          Тьфу, да. Опечатался.
          • –2
            Хорошая такая опечатка :). „З“ и „С“ на разных концах клавиатуры.
            • –9
              Если хочешь об этом поговорить, добро пожаловать в личку.
    • +6
      Через какой, простите, чур?
  • +2
    А маской не легче будет? http://www.html5rocks.com/en/tutorials/masking/adobe/
    • 0
      Легче и даже лучше, но тогда Opera и IE вообще отвалятся.
      • +4
        Еще чу-чуть и только IE отвалится. А он и так отваливается повсюду.
  • –4
    Мне просто интересно, люди минусующие меня чем руководствуются? Я сам верстальщик и мне куда приятней верстать для современных браузеров, но всё же есть тот самый процент людей, который юзает ИЕ и от него нельзя отказываться, особенно если делаешь сайт для крупного предприятия или завода, на которых по большей части сидят люди именно с ИЕ…
    • НЛО прилетело и опубликовало эту надпись здесь
      • +1
        Спасибо за ваш комментарий, но я вовсе не ставил вопрос о собственной карме, просто хотелось бы увидеть аргументированный ответ, если я в чем то не прав.
        • 0
          Ответы на все ваши вопросы в статье, перечитайте её ещё раз полностью и внимательно.
          • +1
            Перечитал)) «экономия-хорошо» — целиком и полностью согласен. Но данный элемент дизайна я считаю важным и есть вероятность, что он врят ли будет использован на сайте единожды. Соответственно важно, чтобы он был максимально кроссбраузерным.
            И как вариант — использовать хак под ИЕ, в котором будут псевдоэлементы со спрайтом. Добавиться буквально пару строк стилей, но при этом с визуальной точки зрения удовольствие от просмотра сайта получит чуть большая аудитория.
            • 0
              Если мы будем делать пользователям IE хорошо у них не будет стимула с него уходить.
              Никто не мешает вам сделать версию с изображениями, но вы видимо в упор не видите моего пункта с требованиями к решению.
              • –1
                Я его прекрасно вижу. Только кто ставит такие требования — не использовать изображения? За 5 лет практики я как-то ни разу с таким не сталкивался. Да и во многих крупных компаниях рядовой сотрудник просто не имеет возможности к обновлению — запрет со стороны сисадмина.
                • +3
                  Мне кажется, что дело в том, что никто не утверждает, что зубчатые фоны следует делать только градиентами; пожалуйста, делайте картинками, если важна поддержка ИЕ. А автор указал новый метод отрисовки зубчатых фонов и — кто знает — может быть когда-нибудь пригодится — это перспективно и интересно.
                  А способ верстки таких вещей картинками настолько очевиден, что даже смысла обсуждать здесь его я не вижу.

                  Этот топик не про кроссбраузерность, он про новый способ решения задачи, который использовать тоже нужно с умом.
    • НЛО прилетело и опубликовало эту надпись здесь
      • +4
        Промышленный дизайн к сайтам вообще никакого отношения не имеет, он занимается вполне материальными вещами.
      • 0
        Не думаю, что что-нибудь из современных сайтов будет нормально отображаться в нетскейпе.
  • НЛО прилетело и опубликовало эту надпись здесь
  • +8
    Мне нужно отписаться от этого хаба… Я просто в шоке от масштаба проблемы — зубчатый фон. И решения этой проблемы разными извращенными способами, и конкурсом вариантов других извращений.
    Рад за людей, которые могут на это тратить свободное личное время. Наверное, это ближе к области спортивного програмирования, чем практического. О.о
    Никого не хочу обидеть.
  • +4
    Этому посту просто необходим тэг Синий заборик [x]. В смысле запоминания(и последующего поиска) он вне конкуренции.
  • НЛО прилетело и опубликовало эту надпись здесь
  • +3
    Технологии это конечно хорошо, но я б верстал классически — картинкой
  • 0
    Вот за что я не люблю верстку — извращения на каждом шагу.
    • НЛО прилетело и опубликовало эту надпись здесь
  • –1
    Dolphin Browser 9.3.2:
    image
    • 0
      У него там своя атмосфера.
      • 0
        я думал, автору будет интересно поглядеть на результат и в других браузерах
        но это явно огорчило как минимум трёх человек :)
        • –1
          для таких браузеров-неумёх лучше делать откат, чем пытаться починить.
          • 0
            подозреваю, что умение идеально отразить зубчатый заборик не стоит на первом месте в списке необходимых качеств мобильного браузера

            смею заметить — Dolphin отличный браузер
            • –1
              всем видно, как он хорош.
              • 0
                ну вот видите, тем более всем это видно
  • –2
    А может лучше просто повторяющийся нужное количество раз png?
  • +23
    Кажется, вот так чуточку веселее)



    background-image:
            linear-gradient(lightcoral, red),
            linear-gradient(to bottom right, transparent 50.5%, lightcoral 50.5%),
            linear-gradient(to bottom left, transparent 50.5%, lightcoral 50.5%),
            linear-gradient(to top right, transparent 50.5%, red 50.5%),
            linear-gradient(to top left, transparent 50.5%, red 50.5%);
    
        background-position: 0 0, 20px 0, 10px 0, 10px 100%, 10px 100%;
    


    Посмотреть на фиддле.
    • 0
      Хороший пример. Спасибо!
    • 0
      тут уже будет зависить от фантазии человека :)
  • –1
    На Sass+Compass будет как-то так.
  • +1
    Можно сделать и с полупрозрачными зубчиками/фоном — dabblet.com/gist/5387364 — так ещё и background-size/-position гораздо проще задаются :)
    • 0
      Кстати пока готовил картинки для поста я тоже заметил что полупрозрачные градиенты почему-то не наслаиваются друг на друга сложением цветов, а просто перекрывают полностью прозрачные границы. Объяснить этот эффект не удалось и я решил о нём не говорить :)
      • 0
        Тьфу, ересь написал.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.