На днях натолкнулась на очень интересный дизайн дневника, который изменял даже стикеры. К счастью, там упоминалось не только сообщество, но и конкретный автор дизайна, так что я пошла спрашивать сразу у автора — как такую прелесть можно сделать? В какой стороне вообще искать?
И замечательный человек
Тайя (спасибо ей огромное за уделенное время) не просто подсказала, где искать, но и поделилась кодом CSS, которым это оформляется *тихо,но очень восторженно пищит* Причем все было так просто и ясно расписано, что у меня с первого раза получилось!
Вот такая красота у меня получилась:
CSS для каждого блога и страницы автора настраивается отдельно, так что можно развлекаться от души.
И с разрешения волшебницы
Тайя прикладываю коды CSS, которыми это можно сделать.
Курсивом будут выделены примечания, которые из кода можно убрать, жирным — то, вместо чего нужно вставить урл или цифровой код цвета
Фон стикера картинкой
#addSticky, .mySticky {
background: url(
ссылка_на_картинку) !important; /
*фон картинкой*/
border: none !important; /
*убрать границу*/
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); /
*тень*/
}
Текст и значочки на стикерах:
.inSticky, .inSticky *, .rmSticky, #donotsendsticker, .sndSticky {color: #
нужный_цвет !important;}
Полупрозрачный стикер:
#addSticky, .mySticky {
background: Snow !important; /
*цвет фона*/
color:
#f3dac0 !important; /
*цвет текста*/
border: none !important; /
*убрать границы*/
border-radius: 5px 5px 20px; /
*закругленные уголки*/
box-shadow: 0 0 10px #744A3E !important; /
*тень*/
opacity:
0.7; /
*ПРОЗРАЧНОСТЬ*/
transition: all ease 0.6s; /
*это плавная смена прозрачности при наведении*/
}
Вариант:
#addSticky:hover, .mySticky:hover, #addSticky:focus, .mySticky:focus {opacity: 1;} /*
при наведении стикер становится непрозрачным!*/
Если стикер получается очень прозрачным и на нем неудобно читать текст, то в параметре opacity:
0.7 можно заменить на 0,8
Комментарии