Comments 56
Только не «пикник», а, например, «клеёнка». По-моему.
Насколько я помню страница ошибки на Twitter сделана на CSS (Кит и птички и волны).
>Если вы знаете другие интересные решения
>интересные
>Рисуем шахматную доску
Кое-кто поделил на ноль!
>интересные
>Рисуем шахматную доску
Кое-кто поделил на ноль!
В Опере просто разноцветные четырёхугольники без полосочек и клеточек.
Я вот не понял к чему ссылка? Там написано что в опере работает градиент, но здесь он почему-то не показывается, может обьясните что Вы имели ввиду?
Возможно, у Yekver версия Оперы до пре-альфе 10.5.
Возможно я ошибаюсь. Но на сколько я понял, Опера пока что не поддерживает полноценно градиенты. Можно сделать через svg, но лучше подождать полную поддержку.
В опере не работает.
Версия: 11.00
Presto: 2.7.62
Сборка: 1156
Платформа: Win32
Система: Windows XP
Версия: 11.00
Presto: 2.7.62
Сборка: 1156
Платформа: Win32
Система: Windows XP
То же самое.
Версия: 11.00
Сборка: 1156
Платформа: Win32
Система: Windows NT 6.1
Версия: 11.00
Сборка: 1156
Платформа: Win32
Система: Windows NT 6.1
а опера не торопится включать поддержку css3 градиентов.и это печально, в итоге получается, что градиент адекватно показывается FF, Safari/Chrome, в IE как обычно — через задний проход и, наконец, для Opera был ранее уже найден способ обхода этой проблемы.
Ммм… А это проблема? Я думаю пока стандарт не утрясётся — незачем гнать лошадей и придумывать хаки. Уж лучше взять кроссбраузерную библиотеку сделать со всеми радостями от CSS3, и подключать её для «несознательных» броузеров…
не проблема, когда есть возможность подключать библиотеку.когда я когда-то игрался с ЖЖ, то мне казалось черезчур уж по-еретически запихивать подключение скрипта, скажем в сайдбар. Да и вроде бы они блокировали внешние js-скрипты.
А в целом — да, надежнее положиться на библиотеку. Потому что стандарт будет еще долго утрясаться, меняться, а красивый сайт хочется уже сегодня.
А в целом — да, надежнее положиться на библиотеку. Потому что стандарт будет еще долго утрясаться, меняться, а красивый сайт хочется уже сегодня.
Сегодня поддержка всеми браузерами этих новейших технологий выглядит примерно как говорящий робот, приносящий тебе в постель чашку кофе с утра :)
Это конечно все прекрасно, но лично я бы не рискнул на свой проект ставить css3 градиент :) картинкой было бы кроссбраузернее. А так — идея вполне интересная :)
Мы ставили, а для оперы отдельно вставляли картинку :) Новые технологии, 2 строчки лишнего кода, но когда в опере появится поддержка можно будет не менять код а удалить лишний
Для меня поще вставить 1 картинку и не париться :) Это все конечно все эпически круто что используются новые технологии :) но…
Я делал градиент как в примерах, только сделал два диагонально пересекающихся. Ну и? Коду получилось больше, чем занимает png картинка. И при этом не работает в IE и Opera.
Так что откатился на png. Реально использовать сложные градиенты сейчас рано.
Так что откатился на png. Реально использовать сложные градиенты сейчас рано.
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#CCCCCC);
Это для Ие, если что =)
итого имеем + 2 строки для оперы
Это для Ие, если что =)
noindex:-o-prefocus,
.needed_style {
/* цсс для оперы */
}
итого имеем + 2 строки для оперы
Я же написал: Реально использовать сложные градиенты сейчас рано. И статья не про простой вертикальный градиент, который играющи добавляется через css PIE, а про сложные. Сделайте такое решение для IE и Opera. Например, для шахматной доски.
Я реально даже не вижу смысла в таких градиентах сложных, если честно, никогда не сталкивался с такой надобностью :)
Ну хорошо, возьмите не шахматную доску, а диагональные полосочки. Вполне могут быть дальним фоном. Вполне реальная задача. Сейчас — это куча дублирующего кода, и отсутствие поддержки в IE и Opera. Смысла использовать градиенты вот так — ноль.
В любом случае получаем +2 строки на браузер для картинки(исключение для браузера и дубрирующиее название класса), это не много если есть желание. Наш дизайнер любит эксперементировать с цсс3 и мы ему это позволяем, костыли вставляет при нестыковках, заказчик видит все одинаково во всех браузерах, дизайнер доволен опытом, мы работаем не затрагивая эту часть — все довольны. Я не вижу в этом ничего плохого.
Ну не +2, а +4. Костылей придётся делать много. Вы просто попробуйте, и поймёте о чём я.
А вот насчёт «дизайнер любит эксперементировать с цсс3», пускай экспериментирует. Но в реальных проектах экспериментировать не надо. Вот Твиттер тоже откатился в нескольких местах от css3 на обычные картинки. А там совсем не дураки работают, верно?
А вот насчёт «дизайнер любит эксперементировать с цсс3», пускай экспериментирует. Но в реальных проектах экспериментировать не надо. Вот Твиттер тоже откатился в нескольких местах от css3 на обычные картинки. А там совсем не дураки работают, верно?
Все таки +2 строки на браузер =) я даже описал какие, я видел код цсс и я знаю о чем говорю. А вот насчет твиттера не знаю, я не знаю людей кто там работает, не буду ничего говорить. Да и дизайнер эксперементирует с реальными проектами, Пока все довольны, никто не пострадал.
Боитесь эксперементировать, ждите, я ж не заставляю делать как другие, это сугубо личное дело каждого. Картинки так картинки.
Боитесь эксперементировать, ждите, я ж не заставляю делать как другие, это сугубо личное дело каждого. Картинки так картинки.
Да кто сказал «боитесь»? Я в реальном проекте это использовал. Просто кода получилось куда больше, чем с png. И в IE сложные градиенты вообще не сделаешь. Ну или шибко извращаясь, так что получается уже не просто по 2 строчки на браузер, а 2 абсолютно разные строчки на браузер. То есть, имеем 5 разных реализаций одного и того же. Вот не надо говорить, что это «проще» или «лучше». Я просто оценил сколько тратилось времени на внесение небольших изменений во все эти версии и откатился к картинкам.
И насчёт 2х строчек. Я вот о таком::
И насчёт 2х строчек. Я вот о таком::
background-image: -webkit-gradient(linear, 0 100%, 100% 0,
color-stop(.25, rgba(0, 0, 0, .1)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(0, 0, 0, .1)),
color-stop(.75, rgba(0, 0, 0, .1)), color-stop(.75, transparent),
to(transparent)),
-webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(0, 0, 0, .1)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(0, 0, 0, .1)),
color-stop(.75, rgba(0, 0, 0, .1)), color-stop(.75, transparent),
to(transparent));
background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, .1) 25%, transparent 25%,
transparent 50%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .1) 75%,
transparent 75%, transparent),
-moz-linear-gradient(-45deg, rgba(0, 0, 0, .1) 25%, transparent 25%,
transparent 50%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .1) 75%,
transparent 75%, transparent);
background-image: -o-linear-box-gradient(45deg, rgba(0, 0, 0, .1) 25%, transparent 25%,
transparent 50%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .1) 75%,
transparent 75%, transparent),
-o-linear-box-gradient(-45deg, rgba(0, 0, 0, .1) 25%, transparent 25%,
transparent 50%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .1) 75%,
transparent 75%, transparent);
background-image: linear-box-gradient(45deg, rgba(0, 0, 0, .1) 25%, transparent 25%,
transparent 50%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .1) 75%,
transparent 75%, transparent),
linear-box-gradient(-45deg, rgba(0, 0, 0, .1) 25%, transparent 25%,
transparent 50%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .1) 75%,
transparent 75%, transparent);
-webkit-background-size: 7em 7em;
-moz-background-size: 7em 7em;
background-size: 7em 7em;
Интересно кончено, но жутко не кросбраузерно, потому в больших серьезных проекта не применимо пока, собственно как и весь CSS3
Вы ошибаетесь. Многие именно большие проекты переходят на подход «graceful degradation» как своего рода технику оптимизации (вместо кучи запросов за декоративными картинками несколько строчек на CSS3).
Несколько строчек? Вы посмотрите, сколько там строк! 20 строк кода для «шахматной доски». И ещё замучаешься поддерживать. Я пробовал. Для пользователей IE и Opera (в рунете это сильно больше половины пользователей), всё равно делать fallback из png? Ну и зачем нужно такое счастье?
Давайте для примера рассмотрим просто линейные градиенты. Потому как техника, описываемая в этой статье действительно может быть применена в довольно малом количестве случаев.
Итак, какие плюсы нам дает использование CSS3 градиентов перед обычной картинкой в PNG:
Минусы:
Первый минус можно компенсировать при помощи автоматических инструментов и правильно настроенного редактора (сниппеты, макросы, поиск и замена наконец).
Теперь про кроссбраузерность:
Вот, для примера, достаточно кроссбраузерный линейный градиент:
В data:uri закодировано это (без пробелов):
Итак, какие плюсы нам дает использование CSS3 градиентов перед обычной картинкой в PNG:
- Нет http-запроса к серверу
- Масштабируемость
- Легкость поддержки и изменения (изменить цвет в тексте проще, чем менять картинку)
- Даже при условии разных реализаций и записи с префиксами, текст в отличии от картики легко сжимается gzip'ом и в итоге по весу выходит меньше, чем картинка
Минусы:
- Разность реализаций увеличивает количество телодвижений для получения результата
- Разность реализаций не всегда позволяет сделать одинаково везде
Первый минус можно компенсировать при помощи автоматических инструментов и правильно настроенного редактора (сниппеты, макросы, поиск и замена наконец).
Теперь про кроссбраузерность:
- В Опере (и в IE9) можно запросто сделать градиент через SVG (тоже удобный для правки формат) в background-image. А чтобы не делать запрос к серверу можно вставить SVG-картинку при помощи data:uri
- В IE можно сделать чрезе фильтр gradient
Вот, для примера, достаточно кроссбраузерный линейный градиент:
.grad {
background:#e1e1e1 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZyIgeDE9IjAiIHkxPSIwIiB4Mj0iMCIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2ZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2UxZTFlMSIvPjwvbGluZWFyR3JhZGllbnQ%2BPC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZykiLz48L3N2Zz4NCg%3D%3D);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e1e1e1));
background:-moz-linear-gradient(#fff, #e1e1e1);
}
в ie.css:
.grad {
filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#ffffff, EndColorStr=#e1e1e1);
}
В data:uri закодировано это (без пробелов):
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="g" x1="0" y1="0" x2="0" y2="100%">
<stop offset="0" stop-color="#fff"/>
<stop offset="100%" stop-color="#e1e1e1"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#g)"/>
</svg>
А давайте не будем про линейные градиенты? Это совсем другая ситуация, и совсем другой разговор.
Я реально использовал эту технику из статьи. В итоге откатился к png. Объясняю: Вы так красиво расписываете мол «если нужно что-то поменять, всё легко». В случае с сложными градиентами это не так. У вас 20 строк кода для одного градиента (вместо одной), и если нужно что-то поменять, менять нужно, чаще всего, все их. А они друг друга местами дублируют, а местами синтаксис и логика и порядок совсем разные, просто search/replace не всегда поможет. Короче, ещё не понятно, что быстрее — подправить исходную картинку или 20 строк этих спагетти.
И ещё раз, не надо про простые градиенты. Тем более, что с горизонтальными градиентами в IE тоже проблемы.
И потом, png получаются совсем маленькими, их тоже можно завернуть в data:uri. Было бы желание.
Я реально использовал эту технику из статьи. В итоге откатился к png. Объясняю: Вы так красиво расписываете мол «если нужно что-то поменять, всё легко». В случае с сложными градиентами это не так. У вас 20 строк кода для одного градиента (вместо одной), и если нужно что-то поменять, менять нужно, чаще всего, все их. А они друг друга местами дублируют, а местами синтаксис и логика и порядок совсем разные, просто search/replace не всегда поможет. Короче, ещё не понятно, что быстрее — подправить исходную картинку или 20 строк этих спагетти.
И ещё раз, не надо про простые градиенты. Тем более, что с горизонтальными градиентами в IE тоже проблемы.
И потом, png получаются совсем маленькими, их тоже можно завернуть в data:uri. Было бы желание.
Я и не говрил про технику из статьи (я считаю ее достаточно экспериментальной и слабо применимой в реальности). Я дал ответ на: "… потому в больших серьезных проекта не применимо пока, собственно как и весь CSS3".
У меня, если посчитать, 3 строчки кода. Изменения и генерация data:uri делается полуавтоматически (комманда для генерации base64 из содержимого файла под курсором в нужном формате + сниппет для генерации разных свойств для Gecko и Webkit вариантов и отдельный сниппет для фильтра IE).
Линейные градиенты очень часто используются в реальных макетах, поэтому то, что я описал можно уже СЕЙЧАС использовать. Естественно, в более сложных случаях (например радиальные градиенты) и там, где важно одинаковое отображение для большого количества поддерживаемых браузеров, лучше сделать картинкой. Кстати, какие проблемы с горизонтальными градиентами в IE?
У вас 20 строк кода для одного градиента (вместо одной), и если нужно что-то поменять, менять нужно, чаще всего, все их.
У меня, если посчитать, 3 строчки кода. Изменения и генерация data:uri делается полуавтоматически (комманда для генерации base64 из содержимого файла под курсором в нужном формате + сниппет для генерации разных свойств для Gecko и Webkit вариантов и отдельный сниппет для фильтра IE).
И ещё раз, не надо про простые градиенты. Тем более, что с горизонтальными градиентами в IE тоже проблемы.
Линейные градиенты очень часто используются в реальных макетах, поэтому то, что я описал можно уже СЕЙЧАС использовать. Естественно, в более сложных случаях (например радиальные градиенты) и там, где важно одинаковое отображение для большого количества поддерживаемых браузеров, лучше сделать картинкой. Кстати, какие проблемы с горизонтальными градиентами в IE?
Ну простые решения с ними не справляются (типа того же css PIE).
И потом, я ну ни слова не говорил про простые градиенты. А вы продолжаете мне про них говорить. Я не спорю с тем, что простые градиенты можно использовать. Но пока что костылями затыкать приходится слишком много (делать svg для оперы, вариант для IE [хотя тут есть автоматические средства]). Смысле есть, например, когда градиент произвольной длины. Во всех остальных случаях — проще обойтись картинкой.
Просто эти генераторы градиентов выдают такой нечеловеческий код (это если со всеми фильтрами, svg и прочим), что становится жутко.
Я дал ответ на: "… потому в больших серьезных проекта не применимо пока, собственно как и весь CSS3".Тогда я не знаю, кому вы отвечаете. Я так не думаю и такого не говорил.
И потом, я ну ни слова не говорил про простые градиенты. А вы продолжаете мне про них говорить. Я не спорю с тем, что простые градиенты можно использовать. Но пока что костылями затыкать приходится слишком много (делать svg для оперы, вариант для IE [хотя тут есть автоматические средства]). Смысле есть, например, когда градиент произвольной длины. Во всех остальных случаях — проще обойтись картинкой.
Просто эти генераторы градиентов выдают такой нечеловеческий код (это если со всеми фильтрами, svg и прочим), что становится жутко.
Вы влезли в дисскусию в ответ на мой ответ пользователю Jumanji. Я написал про то, что даже со всеми недостатками, есть плюсы у использования CSS3 в больших серьезных проектах уже сейчас. Это было безотносительно техники, которая описана в статье. Вы почему-то отреагировали на «несколько строчек», в контексте ее, хотя в моем комментарии про нее ни слова.
Я тоже так считаю, но в закладки добавил. Через пару лет нужен будет градиент, а у меня уже шпаргалка готова. Так что автору все равно респект =)
какой прок от от векторных фонов с фиксированными параметрами? для этого картинки подходят как нельзя лучше
Первая строка, третий столбец. Очень похоже на итальянскую скатерть. Еще в сериале «Клан Сопрано» в мясном магазине Сатриали были такие.
st.kinopoisk.ru/im/kadr/6/4/6/kinopoisk.ru-Sopranos_2C-The-646456.jpg
st.kinopoisk.ru/im/kadr/6/4/6/kinopoisk.ru-Sopranos_2C-The-646456.jpg
UFO just landed and posted this here
Sign up to leave a comment.
Рисуем шахматную доску с помощью CSS3 градиентов