Как сделать градиентный маркер списка средствами css (с помощью :before)

Решил поделиться одним изысканием.

Представим, что дизайн нашего сайта таков, что нам очень хочется, чтобы ненумерованные списки маркировались градиентными цветными кружочками. Самое простое решение — нарисовать гифку или png в графическом редакторе и подключить её при помощи css следующим образом:

li {list-style-image:url("hujovina.gif"); }

Однако, не знаю, как кто, а я не любою плодить в вёрстке миллион мелких графических файлов. Десяток незначительных изменений дизайна — и папки на хостинге полны какой-то фигни, а ты даже толком не помнишь, используются они у тебя где-то или нет. Это, конечно, легко выяснить, но зачем эти лишние движения? Лучше максимум оформления влепить в css и не париться. Продолжить чтение