Изумрудный Демон
Угрюм - и - Пиздат
11.03.2018 в 21:52
Пишет Кареглазый Демон:

Этот пост - для любителей оформлять абсолютно все детали дневника.
Не так давно пункты голосования получили отдельные селекторы. И теперь сделать голосование индивидуальным стало проще.
Всего пунктов десять и, соответственно, десять столбиков. Селекторы выглядят как pool-bar.b и дальше цифра 1,2... 10

Можно перекрасить все разом и убрать обводку:
.pool-bar.b1, .pool-bar.b2, .pool-bar.b3, .pool-bar.b4, .pool-bar.b5, .pool-bar.b6, .pool-bar.b7, .pool-bar.b8, .pool-bar.b9, .pool-bar.b10 { background: #ff0000; border: none !important;}
image host

Сделать столбики радужными:
.pool-bar.b1 { background: #ff0000; border: none !important;}
.pool-bar.b2 { background: #ff6c00; border: none !important;}
.pool-bar.b3 { background: #ffc000; border: none !important;}
.pool-bar.b4 { background: #c0ff00; border: none !important;}
.pool-bar.b5 { background: #00ff8a; border: none !important;}
.pool-bar.b6 { background: #00ffea; border: none !important;}
.pool-bar.b7 { background: #0078ff; border: none !important;}
.pool-bar.b8 { background: #2a00ff; border: none !important;}
.pool-bar.b9 { background: #9600ff; border: none !important;}
.pool-bar.b10 { background: #ff00de; border: none !important;}
image host

Создать градиент из полутонов:
.pool-bar.b1 { background: #2c2c2c; border: none !important;}
.pool-bar.b2 { background: #3d3d3d; border: none !important;}
.pool-bar.b3 { background: #4e4e4e; border: none !important;}
.pool-bar.b4 { background: #5f5f5f; border: none !important;}
.pool-bar.b5 { background: #707070; border: none !important;}
.pool-bar.b6 { background: #808080; border: none !important;}
.pool-bar.b7 { background: #919191; border: none !important;}
.pool-bar.b8 { background: #a0a0a0; border: none !important;}
.pool-bar.b9 { background: #b2b2b2; border: none !important;}
.pool-bar.b10 { background: #c3c3c3; border: none !important;}
image host

Задать чередование:
.pool-bar.b1, .pool-bar.b3, .pool-bar.b5, .pool-bar.b7, .pool-bar.b9 { background: #fff; border: none !important;}
.pool-bar.b2, .pool-bar.b4, .pool-bar.b6, .pool-bar.b8, .pool-bar.b10 { background: #000; border: none !important;}
image host

Убрать тень и поэкспериментировать с обводкой:
.pool-bar.b1, .pool-bar.b2, .pool-bar.b3, .pool-bar.b4, .pool-bar.b5, .pool-bar.b6, .pool-bar.b7, .pool-bar.b8, .pool-bar.b9, .pool-bar.b10 { background: #A37E5E; border: 3px solid #fff; !important;box-shadow: none !important;}
image host

URL записи

@темы: урок, как это сделано, возможности CSS