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

[@CyberAP]

Если бы border-image-source понимал несколько значений то это было бы возможно. А пока то что есть.

[@CyberAP]

Не очень понимаю как это решит проблему.

[@kizu]

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

Но если же вы уже делали такое — было бы интересно посмотреть на пример. У меня сходу ничего толкового не вышло :)

[@kizu]

Да с нормальной картинкой можно и на луну улететь, тут же вопрос именно в «чистом CSS». Хотя, например, с инлайновым SVG в бордер-имадже было бы отлично, но — FF…

[@CyberAP]

Флоаты тоже не для раскладок создавались.

А по поводу border-image — да, тут только с SVG можно пытаться. А вообще очень хороший вариант с маской как предложили ниже. Там можно блок полностью зазубрить.

[@DeLaVega]

Может я конечно и не прав, но на мой взгляд поддержка только ИЕ10 из всего его семейства — это через чур.
Да и при необходимости я бы это реализовал либо через спрайт и before/after, либо через 2 вложенных дива.

[@AndreySolo]

Про Netscape забыли. Вдруг у кого стоит.

[@DeLaVega]

Я не говорю о 6-7. А хотя бы о 8 или 9, ибо (http://www.w3schools.com/browsers/browsers_explorer.asp) 10,7% пользователей я бы не назвал малой аудиторией…

[@AndreySolo]

Тогда лучше смотреть статистику конкретного ресурса где планируется это использовать.

[@DeLaVega]

Если проект делается с нуля, а не обновление уже имеющего ресурса?
И что то мне подсказывает, что если для этого использовать гифку, то она врятли будет весить более 200b, и соответственно она даже на дайл-апе прогрузиться моментально не говоря уже о современных скоростях интернета, и не нужно париться по поводу кроссбраузерности.

[@Shirixae]

Что-то мне подсказывает, что в школе по русскому языку у вас трояк был. Потому что «что то» пишется через дефис, «прогрузиться», в вашем случае, отвечает на вопрос: «Что делает?», поэтому не должен иметь мягкого знака в "-ться", не говоря уже о том, что перед «не говоря уже» у вас запятой нет.

[@Shirixae]

Ну и, конечно же, «врятли» -> «вряд ли».

И запятая перед «соответственно», да.

[@Evengard]

Если не получается докопаться по сути, следует докопаться до орфографии, да?

[@Shirixae]

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

Ладно бы ошибки были в редкой и малоизвестной ситуации, типа необособления наречного выражения «как максимум». Но тут все случаи описываются учебником русского языка за 1-9 классы.

[@FractalizeR]

Все это так, но все же — по сути комментария есть возражения?

[@aTei]

Единственный минус: отдельная гифка это дополнительный запрос

[@Dark_MX]

Это базовый функционал сайта? Хотят красивостей и безопасности — обновятся.

[@CyberAP]

IE7 и 8 поддерживаются. Просто у них будет плиточный интерфейс. IE9 не поддерживается вообще.

[@Defite]

Правильно пишется «черезчур».

[@Dimox]

Правильно пишется «чересчур».

[@Defite]

Тьфу, да. Опечатался.

[@Defite]

Если хочешь об этом поговорить, добро пожаловать в личку.

[@dzantiev]

А маской не легче будет? http://www.html5rocks.com/en/tutorials/masking/adobe/

[@CyberAP]

Легче и даже лучше, но тогда Opera и IE вообще отвалятся.

[@hell0w0rd]

Еще чу-чуть и только IE отвалится. А он и так отваливается повсюду.

[@DeLaVega]

Мне просто интересно, люди минусующие меня чем руководствуются? Я сам верстальщик и мне куда приятней верстать для современных браузеров, но всё же есть тот самый процент людей, который юзает ИЕ и от него нельзя отказываться, особенно если делаешь сайт для крупного предприятия или завода, на которых по большей части сидят люди именно с ИЕ…

[@DeLaVega]

Спасибо за ваш комментарий, но я вовсе не ставил вопрос о собственной карме, просто хотелось бы увидеть аргументированный ответ, если я в чем то не прав.

[@CyberAP]

Ответы на все ваши вопросы в статье, перечитайте её ещё раз полностью и внимательно.

[@DeLaVega]

Перечитал)) «экономия-хорошо» — целиком и полностью согласен. Но данный элемент дизайна я считаю важным и есть вероятность, что он врят ли будет использован на сайте единожды. Соответственно важно, чтобы он был максимально кроссбраузерным.
И как вариант — использовать хак под ИЕ, в котором будут псевдоэлементы со спрайтом. Добавиться буквально пару строк стилей, но при этом с визуальной точки зрения удовольствие от просмотра сайта получит чуть большая аудитория.

[@CyberAP]

Если мы будем делать пользователям IE хорошо у них не будет стимула с него уходить.
Никто не мешает вам сделать версию с изображениями, но вы видимо в упор не видите моего пункта с требованиями к решению.

[@DeLaVega]

Я его прекрасно вижу. Только кто ставит такие требования — не использовать изображения? За 5 лет практики я как-то ни разу с таким не сталкивался. Да и во многих крупных компаниях рядовой сотрудник просто не имеет возможности к обновлению — запрет со стороны сисадмина.

[@everyonesdesign]

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

Этот топик не про кроссбраузерность, он про новый способ решения задачи, который использовать тоже нужно с умом.

[@Dalairen]

Промышленный дизайн к сайтам вообще никакого отношения не имеет, он занимается вполне материальными вещами.

[@everyonesdesign]

Не думаю, что что-нибудь из современных сайтов будет нормально отображаться в нетскейпе.

[@Lincoln6Echo]

Мне нужно отписаться от этого хаба… Я просто в шоке от масштаба проблемы — зубчатый фон. И решения этой проблемы разными извращенными способами, и конкурсом вариантов других извращений.
Рад за людей, которые могут на это тратить свободное личное время. Наверное, это ближе к области спортивного програмирования, чем практического. О.о
Никого не хочу обидеть.

[@nanodesu]

Этому посту просто необходим тэг Синий заборик [x]. В смысле запоминания(и последующего поиска) он вне конкуренции.

[@rim89]

Технологии это конечно хорошо, но я б верстал классически — картинкой

[@zenden2k]

Вот за что я не люблю верстку — извращения на каждом шагу.

[@stansult]

Dolphin Browser 9.3.2:

[@stansult]

я думал, автору будет интересно поглядеть на результат и в других браузерах
но это явно огорчило как минимум трёх человек :)

[@stansult]

подозреваю, что умение идеально отразить зубчатый заборик не стоит на первом месте в списке необходимых качеств мобильного браузера

смею заметить — Dolphin отличный браузер

[@stansult]

ну вот видите, тем более всем это видно

[@flag_of_labour]

А может лучше просто повторяющийся нужное количество раз png?

[@wwarlock]

Кажется, вот так чуточку веселее)

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%;

Посмотреть на фиддле.

[@CyberAP]

Хороший пример. Спасибо!

[@psyangel]

тут уже будет зависить от фантазии человека :)

[@kizu]

Можно сделать и с полупрозрачными зубчиками/фоном — dabblet.com/gist/5387364 — так ещё и background-size/-position гораздо проще задаются :)

[@CyberAP]

Кстати пока готовил картинки для поста я тоже заметил что полупрозрачные градиенты почему-то не наслаиваются друг на друга сложением цветов, а просто перекрывают полностью прозрачные границы. Объяснить этот эффект не удалось и я решил о нём не говорить :)

[@CyberAP]

Тьфу, ересь написал.