Как стать автором
Обновить

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

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

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

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

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

Ладно бы ошибки были в редкой и малоизвестной ситуации, типа необособления наречного выражения «как максимум». Но тут все случаи описываются учебником русского языка за 1-9 классы.
Все это так, но все же — по сути комментария есть возражения?
Единственный минус: отдельная гифка это дополнительный запрос
НЛО прилетело и опубликовало эту надпись здесь
Это базовый функционал сайта? Хотят красивостей и безопасности — обновятся.
IE7 и 8 поддерживаются. Просто у них будет плиточный интерфейс. IE9 не поддерживается вообще.
Правильно пишется «черезчур».
Правильно пишется «чересчур».
Тьфу, да. Опечатался.
НЛО прилетело и опубликовало эту надпись здесь
Если хочешь об этом поговорить, добро пожаловать в личку.
НЛО прилетело и опубликовало эту надпись здесь
Легче и даже лучше, но тогда Opera и IE вообще отвалятся.
Еще чу-чуть и только IE отвалится. А он и так отваливается повсюду.
Мне просто интересно, люди минусующие меня чем руководствуются? Я сам верстальщик и мне куда приятней верстать для современных браузеров, но всё же есть тот самый процент людей, который юзает ИЕ и от него нельзя отказываться, особенно если делаешь сайт для крупного предприятия или завода, на которых по большей части сидят люди именно с ИЕ…
НЛО прилетело и опубликовало эту надпись здесь
Спасибо за ваш комментарий, но я вовсе не ставил вопрос о собственной карме, просто хотелось бы увидеть аргументированный ответ, если я в чем то не прав.
Перечитал)) «экономия-хорошо» — целиком и полностью согласен. Но данный элемент дизайна я считаю важным и есть вероятность, что он врят ли будет использован на сайте единожды. Соответственно важно, чтобы он был максимально кроссбраузерным.
И как вариант — использовать хак под ИЕ, в котором будут псевдоэлементы со спрайтом. Добавиться буквально пару строк стилей, но при этом с визуальной точки зрения удовольствие от просмотра сайта получит чуть большая аудитория.
Если мы будем делать пользователям IE хорошо у них не будет стимула с него уходить.
Никто не мешает вам сделать версию с изображениями, но вы видимо в упор не видите моего пункта с требованиями к решению.
Я его прекрасно вижу. Только кто ставит такие требования — не использовать изображения? За 5 лет практики я как-то ни разу с таким не сталкивался. Да и во многих крупных компаниях рядовой сотрудник просто не имеет возможности к обновлению — запрет со стороны сисадмина.
Мне кажется, что дело в том, что никто не утверждает, что зубчатые фоны следует делать только градиентами; пожалуйста, делайте картинками, если важна поддержка ИЕ. А автор указал новый метод отрисовки зубчатых фонов и — кто знает — может быть когда-нибудь пригодится — это перспективно и интересно.
А способ верстки таких вещей картинками настолько очевиден, что даже смысла обсуждать здесь его я не вижу.

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

смею заметить — Dolphin отличный браузер
НЛО прилетело и опубликовало эту надпись здесь
ну вот видите, тем более всем это видно
А может лучше просто повторяющийся нужное количество раз png?
Кажется, вот так чуточку веселее)



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


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

Публикации

Истории