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

[yatsutko]

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

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

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

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

Поскольку маркер - фиговина, находящаяся перед элементом списка, первое, что приходит в голову, использовать псевдоэлемент :before, а именно - запихнуть в его свойство content код блока с градиентным бэкграундом и скруглёнными углами. Однако, как выяснилось, хрен: код, введённый в качестве значения свойства content, причём хоть тупо с клавиатуры, хоть в виде искейп-последовательностей, хоть в виде шестнадцатеричных кодов с обратным слэшем, выводится перед элементом именно как код. То есть, таким образом мы получаем не градиентный блочок перед каждым элементом списка, а код градиентного блочка перед каждым элементом списка. Можно, конечно, оформить список и так, но, во-первых, задача стоит не такая, а, во-вторых, как говорил во времена оны один мой товарищ, это слишком духовно.

Помедитировав, я спросил себя: зачем, собственно, пытаться придать вид блока с градиентным фоном контенту псевдоэлемента :before, когда можно придать этот самый вид самому этому псевдоэлементу?

В-общем, представляю итог. Представим, что у нас есть некий список:

• Хуй;


• пизда;


• птичка без гнезда;


• жалкие солдаты;


• тупые депутаты.

Что нам надо сделать? Убрать страндартные маркеры и прописать для псевдоэлемента li:before стили, которые представят его в виде блока с нужным нам фоном (цвета возьмём поядрёнее, для наглядности) и скруглёнными углами. Вот такой, примерно, css (градиент для разных современных браузеров прописывается уже вполне одинаково, однако специфические префиксы ещё стоит использовать):

.listahan li {
list-style-type: none;
font-size: 120%;
font-weight:bold;
}

.listahan li:before {
content: "";
display: inline-block;
border: none;
border-radius: 5px;
width: 11px;
height: 11px;
background-image: -moz-linear-gradient(left, #f22e0d, #fd33c6, #f22e0d, #fdfb33);
background-image: -webkit-linear-gradient(left, #f22e0d, #fd33c6, #f22e0d, #fdfb33);
background-image: -o-linear-gradient(left, #f22e0d, #fd33c6, #f22e0d, #fdfb33);
background-image: -ms-linear-gradient(left, #f22e0d, #fd33c6, #f22e0d, #fdfb33);
background-image: linear-gradient(left, #f22e0d, #fd33c6, #f22e0d, #fdfb33);
margin-right: 6px;
}

Так будет выглядеть результат (если вы смотрите репост в ЖЖ или в ФБ, вы нихуя не видите, само собой. Идите по ссылке - http://blog.yatsutko.net/2371):

• Хуй;
• пизда;
• птичка без гнезда;
• жалкие солдаты;
• тупые депутаты.

Вот.

…

Profit.

Запись опубликована Записки Дениса ЯЦУТКО. You can comment here or there.