Рисуем шахматную доску с помощью CSS3 градиентов

[Kalan]

Только не «пикник», а, например, «клеёнка». По-моему.

[conturov]

Насколько я помню страница ошибки на Twitter сделана на CSS (Кит и птички и волны).

[Aliance]

Была, потом сделали картинкой.

[EvilX]

Там и некоторые кнопки сделаны на css. Птички и прочее.

[danilissimus]

>Если вы знаете другие интересные решения
>интересные
>Рисуем шахматную доску
Кое-кто поделил на ноль!

[Yekver]

В Опере просто разноцветные четырёхугольники без полосочек и клеточек.

[Kicker]

habrahabr.ru/blogs/css/79046/

[taliban]

Я вот не понял к чему ссылка? Там написано что в опере работает градиент, но здесь он почему-то не показывается, может обьясните что Вы имели ввиду?

[SeTeM]

Возможно, у Yekver версия Оперы до пре-альфе 10.5.

[Yekver]

у меня 11 версия.

[taliban]

И у меня 11 и не работает, а по ссылке, кстати, про градиент не написано :)

[Kicker]

Возможно я ошибаюсь. Но на сколько я понял, Опера пока что не поддерживает полноценно градиенты. Можно сделать через svg, но лучше подождать полную поддержку.

[taliban]

-o-linear-gradient — на будущее написали?:) Смылс тогда в этой строчке?

[Kicker]

Писал не я, а автор оригинальной статьи. Возможно он, что то знает(:
Нашел, что синтаксис градиента будет таким — o-linear-box-gradient(если верить источнику), но к сожалению в моей 11 Опере это не сработало.

[Volshebnyi]

На будущее: чтобы в оперезаработало какое-то CSS-свойство из черновиков, не обязательно писать -o-linear-gradient, к тому же невалидно. Пишите linear-gradient

[Panya]

-o-transition тоже советуете писать без префикса? :)

[conturov]

В опере не работает.
Версия: 11.00
Presto: 2.7.62
Сборка: 1156
Платформа: Win32
Система: Windows XP

[Alroniks]

Тоже не работает

Версия: 11.00
Сборка: 1156
Платформа: Linux
Система: i686, 2.6.35-23-generic

[auror]

То же самое.

Версия: 11.00
Сборка: 1156
Платформа: Win32
Система: Windows NT 6.1

[Defite]

а опера не торопится включать поддержку css3 градиентов.и это печально, в итоге получается, что градиент адекватно показывается FF, Safari/Chrome, в IE как обычно — через задний проход и, наконец, для Opera был ранее уже найден способ обхода этой проблемы.

[Theo_from_Sed]

Ммм… А это проблема? Я думаю пока стандарт не утрясётся — незачем гнать лошадей и придумывать хаки. Уж лучше взять кроссбраузерную библиотеку сделать со всеми радостями от CSS3, и подключать её для «несознательных» броузеров…

[Defite]

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

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

[EvgeniyLazarev]

Сегодня поддержка всеми браузерами этих новейших технологий выглядит примерно как говорящий робот, приносящий тебе в постель чашку кофе с утра :)

[ukku]

Это конечно все прекрасно, но лично я бы не рискнул на свой проект ставить css3 градиент :) картинкой было бы кроссбраузернее. А так — идея вполне интересная :)

[taliban]

Мы ставили, а для оперы отдельно вставляли картинку :) Новые технологии, 2 строчки лишнего кода, но когда в опере появится поддержка можно будет не менять код а удалить лишний

[ukku]

Для меня поще вставить 1 картинку и не париться :) Это все конечно все эпически круто что используются новые технологии :) но…

[taliban]

Если бы все так думали то использовали бы щас до сих пор JS 1.3 и css 2.0 =) А зачем париться?

[ukku]

просто стоит подождать большую 3 (WebKit Opera IE )… но это мое имхо))

[taliban]

О.О Впервые вижу чтоб оперой заменяли ФФ =)

[TiGR]

Я делал градиент как в примерах, только сделал два диагонально пересекающихся. Ну и? Коду получилось больше, чем занимает png картинка. И при этом не работает в IE и Opera.

Так что откатился на png. Реально использовать сложные градиенты сейчас рано.

[taliban]

filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#CCCCCC);
Это для Ие, если что =)

noindex:-o-prefocus,
.needed_style {
	/* цсс для оперы */
}

итого имеем + 2 строки для оперы

[TiGR]

Я же написал: Реально использовать сложные градиенты сейчас рано. И статья не про простой вертикальный градиент, который играющи добавляется через css PIE, а про сложные. Сделайте такое решение для IE и Opera. Например, для шахматной доски.

[taliban]

Я реально даже не вижу смысла в таких градиентах сложных, если честно, никогда не сталкивался с такой надобностью :)

[TiGR]

Ну хорошо, возьмите не шахматную доску, а диагональные полосочки. Вполне могут быть дальним фоном. Вполне реальная задача. Сейчас — это куча дублирующего кода, и отсутствие поддержки в IE и Opera. Смысла использовать градиенты вот так — ноль.

[taliban]

В любом случае получаем +2 строки на браузер для картинки(исключение для браузера и дубрирующиее название класса), это не много если есть желание. Наш дизайнер любит эксперементировать с цсс3 и мы ему это позволяем, костыли вставляет при нестыковках, заказчик видит все одинаково во всех браузерах, дизайнер доволен опытом, мы работаем не затрагивая эту часть — все довольны. Я не вижу в этом ничего плохого.

[TiGR]

Ну не +2, а +4. Костылей придётся делать много. Вы просто попробуйте, и поймёте о чём я.

А вот насчёт «дизайнер любит эксперементировать с цсс3», пускай экспериментирует. Но в реальных проектах экспериментировать не надо. Вот Твиттер тоже откатился в нескольких местах от css3 на обычные картинки. А там совсем не дураки работают, верно?

[taliban]

Все таки +2 строки на браузер =) я даже описал какие, я видел код цсс и я знаю о чем говорю. А вот насчет твиттера не знаю, я не знаю людей кто там работает, не буду ничего говорить. Да и дизайнер эксперементирует с реальными проектами, Пока все довольны, никто не пострадал.
Боитесь эксперементировать, ждите, я ж не заставляю делать как другие, это сугубо личное дело каждого. Картинки так картинки.

[TiGR]

Да кто сказал «боитесь»? Я в реальном проекте это использовал. Просто кода получилось куда больше, чем с png. И в IE сложные градиенты вообще не сделаешь. Ну или шибко извращаясь, так что получается уже не просто по 2 строчки на браузер, а 2 абсолютно разные строчки на браузер. То есть, имеем 5 разных реализаций одного и того же. Вот не надо говорить, что это «проще» или «лучше». Я просто оценил сколько тратилось времени на внесение небольших изменений во все эти версии и откатился к картинкам.

И насчёт 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;

В определённый момент мне стало очень тоскливо смотреть на эту портянку. Фикс для IE заключается в изготовлении PNG. Для оперы — либо PNG, либо SVG. Ну и зачем эта портянка нужна, если всё равно используется PNG?

[Jumanji]

Интересно кончено, но жутко не кросбраузерно, потому в больших серьезных проекта не применимо пока, собственно как и весь CSS3

[Panya]

Вы ошибаетесь. Многие именно большие проекты переходят на подход «graceful degradation» как своего рода технику оптимизации (вместо кучи запросов за декоративными картинками несколько строчек на CSS3).

[TiGR]

Несколько строчек? Вы посмотрите, сколько там строк! 20 строк кода для «шахматной доски». И ещё замучаешься поддерживать. Я пробовал. Для пользователей IE и Opera (в рунете это сильно больше половины пользователей), всё равно делать fallback из png? Ну и зачем нужно такое счастье?

[Panya]

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

Итак, какие плюсы нам дает использование 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>

[TiGR]

А давайте не будем про линейные градиенты? Это совсем другая ситуация, и совсем другой разговор.

Я реально использовал эту технику из статьи. В итоге откатился к png. Объясняю: Вы так красиво расписываете мол «если нужно что-то поменять, всё легко». В случае с сложными градиентами это не так. У вас 20 строк кода для одного градиента (вместо одной), и если нужно что-то поменять, менять нужно, чаще всего, все их. А они друг друга местами дублируют, а местами синтаксис и логика и порядок совсем разные, просто search/replace не всегда поможет. Короче, ещё не понятно, что быстрее — подправить исходную картинку или 20 строк этих спагетти.

И ещё раз, не надо про простые градиенты. Тем более, что с горизонтальными градиентами в IE тоже проблемы.

И потом, png получаются совсем маленькими, их тоже можно завернуть в data:uri. Было бы желание.

[Panya]

Я и не говрил про технику из статьи (я считаю ее достаточно экспериментальной и слабо применимой в реальности). Я дал ответ на: "… потому в больших серьезных проекта не применимо пока, собственно как и весь CSS3".

У вас 20 строк кода для одного градиента (вместо одной), и если нужно что-то поменять, менять нужно, чаще всего, все их.

У меня, если посчитать, 3 строчки кода. Изменения и генерация data:uri делается полуавтоматически (комманда для генерации base64 из содержимого файла под курсором в нужном формате + сниппет для генерации разных свойств для Gecko и Webkit вариантов и отдельный сниппет для фильтра IE).

И ещё раз, не надо про простые градиенты. Тем более, что с горизонтальными градиентами в IE тоже проблемы.

Линейные градиенты очень часто используются в реальных макетах, поэтому то, что я описал можно уже СЕЙЧАС использовать. Естественно, в более сложных случаях (например радиальные градиенты) и там, где важно одинаковое отображение для большого количества поддерживаемых браузеров, лучше сделать картинкой. Кстати, какие проблемы с горизонтальными градиентами в IE?

[TiGR]

Ну простые решения с ними не справляются (типа того же css PIE).

Я дал ответ на: "… потому в больших серьезных проекта не применимо пока, собственно как и весь CSS3".

Тогда я не знаю, кому вы отвечаете. Я так не думаю и такого не говорил.

И потом, я ну ни слова не говорил про простые градиенты. А вы продолжаете мне про них говорить. Я не спорю с тем, что простые градиенты можно использовать. Но пока что костылями затыкать приходится слишком много (делать svg для оперы, вариант для IE [хотя тут есть автоматические средства]). Смысле есть, например, когда градиент произвольной длины. Во всех остальных случаях — проще обойтись картинкой.

Просто эти генераторы градиентов выдают такой нечеловеческий код (это если со всеми фильтрами, svg и прочим), что становится жутко.

[Panya]

Вы влезли в дисскусию в ответ на мой ответ пользователю Jumanji. Я написал про то, что даже со всеми недостатками, есть плюсы у использования CSS3 в больших серьезных проектах уже сейчас. Это было безотносительно техники, которая описана в статье. Вы почему-то отреагировали на «несколько строчек», в контексте ее, хотя в моем комментарии про нее ни слова.

[TiGR]

Хм. Что ж, тогда виноват. Просто обсуждение в общем идёт всё равно в контексте топика.

[SEObomj]

Я тоже так считаю, но в закладки добавил. Через пару лет нужен будет градиент, а у меня уже шпаргалка готова. Так что автору все равно респект =)

[TiGR]

Через пару лет от этой шпаргалки будет мало пользы. По крайней мере, я очень на это надеюсь.

[tenshi]

какой прок от от векторных фонов с фиксированными параметрами? для этого картинки подходят как нельзя лучше

[Kicker]

А что Вам мешает поставить градиент на задний фон к примеру, без фиксированных параметров?

[tenshi]

а при чём тут градиенты?

[Kicker]

Ок, ступил, прочитал вскользь. При чем тут векторный фон? Или, что Вы имеете ввиду?

[tenshi]

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

[0vector0]

Первая строка, третий столбец. Очень похоже на итальянскую скатерть. Еще в сериале «Клан Сопрано» в мясном магазине Сатриали были такие.
st.kinopoisk.ru/im/kadr/6/4/6/kinopoisk.ru-Sopranos_2C-The-646456.jpg