Автор: Ктая

Тихого восторга пост

На днях натолкнулась на очень интересный дизайн дневника, который изменял даже стикеры. К счастью, там упоминалось не только сообщество, но и конкретный автор дизайна, так что я пошла спрашивать сразу у автора — как такую прелесть можно сделать? В какой стороне вообще искать?
И замечательный человек Тайя (спасибо ей огромное за уделенное время) не просто подсказала, где искать, но и поделилась кодом 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
14

Комментарии


Лучшее   Правила сайта   Вход   Регистрация   Восстановление пароля

Материалы сайта предназначены для лиц старше 16 лет (16+)