Затухающие полоски на CSS3 без изображений

[Nico_izo]

В тексте сей заметки следовало бы указать градиент без вендорного префикса -webkit- и по текущему стандарту (С ключевым словом to).

[CyberAP]

Спасибо, убрал префикс. Не стал добавлять приставку 'to' потому что черновик может измениться в любой момент и ни один браузер не поддерживает такое написание направления градиента. В первую очередь я руководствовался этой спецификацией: www.w3.org/TR/2011/WD-css3-images-20110217/

[Nico_izo]

Приставку to поддерживает Firefox 10+ и Opera 11.60+ и указывать, думаю, надо именно то, что прописано в текущем стандарте, в противном случае мы делаем медвежью услугу тем людям, кто не думая «накопипастят» код. Не думаю, что стандарт ещё раз поменяют, хотя я бы добавил ещё ключевое слово «from», чтобы избавиться от недоразумений :)

[CyberAP]

В этом есть доля истины, но юзер может это скопировать и сам вставить префиксы, а в вебкитах такие градиенты просто отвалятся. Есть компромиссное решение: градус. Обновил инструкцию.

[Alexufo]

Иногда ох проще картинками это делать. Столько возьни с этой универсальностью. Там чтобы набить эти цифры, подогнать все к тому же дизайну, немерено времени уйдет. Но как вариант да, имеет право на существование.
Мне css3 напомниет рисование во флеше через код. Когда уже css3 вектоный редактор будет?

[maxvipon]

Даешь SVG-интернет! Нарисовал макет в Inkscape и передал кодерам, а верстальщики остались без хлеба.

[ArtRoman]

Векторный …фидонет?)

[Serator]

А смысл примера, который могут оценит только обладатели IE10? Может все же вернуть префиксы?

[Serator]

Упс, обознался. Прошу прощения.

[Evengard]

В конец по-моему стоит добавить ещё:

.container li:last-child
{
    background-size: 0 0, 0 0, auto;
    background-image: none;
}​

[CyberAP]

Можно просто background-image: none;

[Evengard]

Разве достаточно?

[Evengard]

Проверил, действительно, вы правы.

[Matrixcracker]

Чудеса :)

[aokolovich]

5 минут водил курсором по демке, пока понял, что никакого transition-а там нет )

[ChemAli]

Правильно ли я понимаю, что метод работает только на однородном фоне?

[CyberAP]

На любом фоне, там же rgba. Метод использован на моём сайте cyberap.net где на фоне стоят фотографии (не в рекламу будет сказано)

[art_tk]

А вертикальные такие как делать?

[CyberAP]

Всё то же самое только надо поменять угол наклона (90deg) и background-size на 1px 100%

[CyberAP]

jsFiddle кроссбраузерный, а Dabblet не работает в опере.