Повторяющийся зубчатый фон на 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);
    


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

    Демо

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 66

    • UFO just landed and posted this here
        +2
        Если бы border-image-source понимал несколько значений то это было бы возможно. А пока то что есть.
        • UFO just landed and posted this here
            0
            Не очень понимаю как это решит проблему.
            • UFO just landed and posted this here
                0
                Не, не получится. Для градиента внутри border-image нельзя задать background-size, т.е. то, от чего можно было бы отталкиваться для определения border-image. Кроме того, кажется, в ФФ это вообще не сработает. В вебкитах/опере можно, в итоге, лишь примерно подогнать это дело под известную ширину блока, но вот если размеры блока будут неизвестны — всё будет разъезжаться.

                Но если же вы уже делали такое — было бы интересно посмотреть на пример. У меня сходу ничего толкового не вышло :)
                • UFO just landed and posted this here
                    0
                    Да с нормальной картинкой можно и на луну улететь, тут же вопрос именно в «чистом CSS». Хотя, например, с инлайновым SVG в бордер-имадже было бы отлично, но — FF…
                    • UFO just landed and posted this here
                        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
                    Единственный минус: отдельная гифка это дополнительный запрос
                    • UFO just landed and posted this here
                  +2
                  Это базовый функционал сайта? Хотят красивостей и безопасности — обновятся.
                +2
                IE7 и 8 поддерживаются. Просто у них будет плиточный интерфейс. IE9 не поддерживается вообще.
                  –9
                  Правильно пишется «черезчур».
                    +4
                    Правильно пишется «чересчур».
                      –4
                      Тьфу, да. Опечатался.
                      • UFO just landed and posted this here
                          –9
                          Если хочешь об этом поговорить, добро пожаловать в личку.
                    +6
                    Через какой, простите, чур?
                    +2
                    А маской не легче будет? http://www.html5rocks.com/en/tutorials/masking/adobe/
                      0
                      Легче и даже лучше, но тогда Opera и IE вообще отвалятся.
                        +4
                        Еще чу-чуть и только IE отвалится. А он и так отваливается повсюду.
                      –4
                      Мне просто интересно, люди минусующие меня чем руководствуются? Я сам верстальщик и мне куда приятней верстать для современных браузеров, но всё же есть тот самый процент людей, который юзает ИЕ и от него нельзя отказываться, особенно если делаешь сайт для крупного предприятия или завода, на которых по большей части сидят люди именно с ИЕ…
                      • UFO just landed and posted this here
                          +1
                          Спасибо за ваш комментарий, но я вовсе не ставил вопрос о собственной карме, просто хотелось бы увидеть аргументированный ответ, если я в чем то не прав.
                            0
                            Ответы на все ваши вопросы в статье, перечитайте её ещё раз полностью и внимательно.
                              +1
                              Перечитал)) «экономия-хорошо» — целиком и полностью согласен. Но данный элемент дизайна я считаю важным и есть вероятность, что он врят ли будет использован на сайте единожды. Соответственно важно, чтобы он был максимально кроссбраузерным.
                              И как вариант — использовать хак под ИЕ, в котором будут псевдоэлементы со спрайтом. Добавиться буквально пару строк стилей, но при этом с визуальной точки зрения удовольствие от просмотра сайта получит чуть большая аудитория.
                                0
                                Если мы будем делать пользователям IE хорошо у них не будет стимула с него уходить.
                                Никто не мешает вам сделать версию с изображениями, но вы видимо в упор не видите моего пункта с требованиями к решению.
                                  –1
                                  Я его прекрасно вижу. Только кто ставит такие требования — не использовать изображения? За 5 лет практики я как-то ни разу с таким не сталкивался. Да и во многих крупных компаниях рядовой сотрудник просто не имеет возможности к обновлению — запрет со стороны сисадмина.
                                    +3
                                    Мне кажется, что дело в том, что никто не утверждает, что зубчатые фоны следует делать только градиентами; пожалуйста, делайте картинками, если важна поддержка ИЕ. А автор указал новый метод отрисовки зубчатых фонов и — кто знает — может быть когда-нибудь пригодится — это перспективно и интересно.
                                    А способ верстки таких вещей картинками настолько очевиден, что даже смысла обсуждать здесь его я не вижу.

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

                                                смею заметить — Dolphin отличный браузер
                                                • UFO just landed and posted this here
                                                    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
                                                тут уже будет зависить от фантазии человека :)
                                              • UFO just landed and posted this here
                                                  +1
                                                  Можно сделать и с полупрозрачными зубчиками/фоном — dabblet.com/gist/5387364 — так ещё и background-size/-position гораздо проще задаются :)
                                                    0
                                                    Кстати пока готовил картинки для поста я тоже заметил что полупрозрачные градиенты почему-то не наслаиваются друг на друга сложением цветов, а просто перекрывают полностью прозрачные границы. Объяснить этот эффект не удалось и я решил о нём не говорить :)
                                                      0
                                                      Тьфу, ересь написал.

                                                  Only users with full accounts can post comments. Log in, please.