Комментарии 66
НЛО прилетело и опубликовало эту надпись здесь
Если бы
border-image-source
понимал несколько значений то это было бы возможно. А пока то что есть.НЛО прилетело и опубликовало эту надпись здесь
Не очень понимаю как это решит проблему.
НЛО прилетело и опубликовало эту надпись здесь
Не, не получится. Для градиента внутри border-image нельзя задать background-size, т.е. то, от чего можно было бы отталкиваться для определения border-image. Кроме того, кажется, в ФФ это вообще не сработает. В вебкитах/опере можно, в итоге, лишь примерно подогнать это дело под известную ширину блока, но вот если размеры блока будут неизвестны — всё будет разъезжаться.
Но если же вы уже делали такое — было бы интересно посмотреть на пример. У меня сходу ничего толкового не вышло :)
Но если же вы уже делали такое — было бы интересно посмотреть на пример. У меня сходу ничего толкового не вышло :)
НЛО прилетело и опубликовало эту надпись здесь
Да с нормальной картинкой можно и на луну улететь, тут же вопрос именно в «чистом CSS». Хотя, например, с инлайновым SVG в бордер-имадже было бы отлично, но — FF…
Может я конечно и не прав, но на мой взгляд поддержка только ИЕ10 из всего его семейства — это через чур.
Да и при необходимости я бы это реализовал либо через спрайт и before/after, либо через 2 вложенных дива.
Да и при необходимости я бы это реализовал либо через спрайт и before/after, либо через 2 вложенных дива.
Про Netscape забыли. Вдруг у кого стоит.
Я не говорю о 6-7. А хотя бы о 8 или 9, ибо (http://www.w3schools.com/browsers/browsers_explorer.asp) 10,7% пользователей я бы не назвал малой аудиторией…
Тогда лучше смотреть статистику конкретного ресурса где планируется это использовать.
Если проект делается с нуля, а не обновление уже имеющего ресурса?
И что то мне подсказывает, что если для этого использовать гифку, то она врятли будет весить более 200b, и соответственно она даже на дайл-апе прогрузиться моментально не говоря уже о современных скоростях интернета, и не нужно париться по поводу кроссбраузерности.
И что то мне подсказывает, что если для этого использовать гифку, то она врятли будет весить более 200b, и соответственно она даже на дайл-апе прогрузиться моментально не говоря уже о современных скоростях интернета, и не нужно париться по поводу кроссбраузерности.
Что-то мне подсказывает, что в школе по русскому языку у вас трояк был. Потому что «что то» пишется через дефис, «прогрузиться», в вашем случае, отвечает на вопрос: «Что делает?», поэтому не должен иметь мягкого знака в "-ться", не говоря уже о том, что перед «не говоря уже» у вас запятой нет.
Ну и, конечно же, «врятли» -> «вряд ли».
И запятая перед «соответственно», да.
И запятая перед «соответственно», да.
Если не получается докопаться по сути, следует докопаться до орфографии, да?
Просто когда в огромном посте 2-3 опечатки — пишешь в ЛС, автор исправляет, хабр стал лушче, за окном — птички и радуга. А когда в сраном комментарии на три строчки 5-6 ошибок — это звездец, и никакие ЛС уже не спасут. Человек, вон, судя по профилю, дожил до 24 лет и до сих пор не знает базовых норм русского языка.
Ладно бы ошибки были в редкой и малоизвестной ситуации, типа необособления наречного выражения «как максимум». Но тут все случаи описываются учебником русского языка за 1-9 классы.
Ладно бы ошибки были в редкой и малоизвестной ситуации, типа необособления наречного выражения «как максимум». Но тут все случаи описываются учебником русского языка за 1-9 классы.
Единственный минус: отдельная гифка это дополнительный запрос
Это базовый функционал сайта? Хотят красивостей и безопасности — обновятся.
IE7 и 8 поддерживаются. Просто у них будет плиточный интерфейс. IE9 не поддерживается вообще.
Правильно пишется «черезчур».
НЛО прилетело и опубликовало эту надпись здесь
А маской не легче будет? http://www.html5rocks.com/en/tutorials/masking/adobe/
Мне просто интересно, люди минусующие меня чем руководствуются? Я сам верстальщик и мне куда приятней верстать для современных браузеров, но всё же есть тот самый процент людей, который юзает ИЕ и от него нельзя отказываться, особенно если делаешь сайт для крупного предприятия или завода, на которых по большей части сидят люди именно с ИЕ…
НЛО прилетело и опубликовало эту надпись здесь
Спасибо за ваш комментарий, но я вовсе не ставил вопрос о собственной карме, просто хотелось бы увидеть аргументированный ответ, если я в чем то не прав.
Ответы на все ваши вопросы в статье, перечитайте её ещё раз полностью и внимательно.
Перечитал)) «экономия-хорошо» — целиком и полностью согласен. Но данный элемент дизайна я считаю важным и есть вероятность, что он врят ли будет использован на сайте единожды. Соответственно важно, чтобы он был максимально кроссбраузерным.
И как вариант — использовать хак под ИЕ, в котором будут псевдоэлементы со спрайтом. Добавиться буквально пару строк стилей, но при этом с визуальной точки зрения удовольствие от просмотра сайта получит чуть большая аудитория.
И как вариант — использовать хак под ИЕ, в котором будут псевдоэлементы со спрайтом. Добавиться буквально пару строк стилей, но при этом с визуальной точки зрения удовольствие от просмотра сайта получит чуть большая аудитория.
Если мы будем делать пользователям IE хорошо у них не будет стимула с него уходить.
Никто не мешает вам сделать версию с изображениями, но вы видимо в упор не видите моего пункта с требованиями к решению.
Никто не мешает вам сделать версию с изображениями, но вы видимо в упор не видите моего пункта с требованиями к решению.
Я его прекрасно вижу. Только кто ставит такие требования — не использовать изображения? За 5 лет практики я как-то ни разу с таким не сталкивался. Да и во многих крупных компаниях рядовой сотрудник просто не имеет возможности к обновлению — запрет со стороны сисадмина.
Мне кажется, что дело в том, что никто не утверждает, что зубчатые фоны следует делать только градиентами; пожалуйста, делайте картинками, если важна поддержка ИЕ. А автор указал новый метод отрисовки зубчатых фонов и — кто знает — может быть когда-нибудь пригодится — это перспективно и интересно.
А способ верстки таких вещей картинками настолько очевиден, что даже смысла обсуждать здесь его я не вижу.
Этот топик не про кроссбраузерность, он про новый способ решения задачи, который использовать тоже нужно с умом.
А способ верстки таких вещей картинками настолько очевиден, что даже смысла обсуждать здесь его я не вижу.
Этот топик не про кроссбраузерность, он про новый способ решения задачи, который использовать тоже нужно с умом.
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Мне нужно отписаться от этого хаба… Я просто в шоке от масштаба проблемы — зубчатый фон. И решения этой проблемы разными извращенными способами, и конкурсом вариантов других извращений.
Рад за людей, которые могут на это тратить свободное личное время. Наверное, это ближе к области спортивного програмирования, чем практического. О.о
Никого не хочу обидеть.
Рад за людей, которые могут на это тратить свободное личное время. Наверное, это ближе к области спортивного програмирования, чем практического. О.о
Никого не хочу обидеть.
Этому посту просто необходим тэг Синий заборик [x]. В смысле запоминания(и последующего поиска) он вне конкуренции.
НЛО прилетело и опубликовало эту надпись здесь
Технологии это конечно хорошо, но я б верстал классически — картинкой
Вот за что я не люблю верстку — извращения на каждом шагу.
Dolphin Browser 9.3.2:
А может лучше просто повторяющийся нужное количество раз 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 гораздо проще задаются :)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Повторяющийся зубчатый фон на CSS