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

[yatsutko]

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

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

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

Однако

Comments

[dn54]

Только они получились квадратики, а не кружочки.

[yatsutko]

Они кружочки: border-radius: 5px;

Собственно, по ссылке всё видно.

[dn54]

Пойду выкину свой монитор, а то он, похоже, сломался - квадратики рисует.

[yatsutko]

Что за браузер? Ось?

[dn54]

xp sp2, firefox 3.6.28

Да, кстати, вишенка на торте - ie6 там же вообще ничего не рисует. Но на это можешь не обращать внимания. =:)

[yatsutko]

3.6.28? Зачем? Аскетизм, что ли какой-то религиозный? Актуальная версия 23.0.1.

А упоминать сегодня ie6 уже даже не смешно. Да и ie7 уже, пожалуй, тоже. Да и 8.

[dn54]

>3.6.28? Зачем?

Затем, что в следующих версиях зачем-то (зачем?) сделали несколько идиотских изменений в интерфейсе, которые меня раздражают.

Кстати, на ie7 (и дальше) я по той же причине не перешёл.

[yatsutko]

Ну ок, чо. ie3 или мозаика какая ваще css не читают. А кто-то, может, и под ними сидит. Не учитывать же чудаков. Они сами должны понимать, какие побочные эффекты имеет намеренное использование устаревших программ.

[dn54]

Учитывая, что браузеры мне всё равно нужны не для зарабатывания денег, а для развлечения, то "побочный эффект" бывает ровно один - "не прочитал какую-то очередную наверняка ненужную фигню на каком-то очередном наверняка ненужном сайте".

[yatsutko]

То есть, аскетизм, как и было сказано.

[dn54]

Вот даже не буду спорить. Аскетизм так аскетизм, мне всё равно, тащемта.