Сокровищница

Публикация из блога «CSS-сообщество» (автор: HSF):
Дизайн с сакурой
Настройки:
Цветовая схема - Основная (это важно: в других цветовых схемах шрифты не работают);
Гарнитура шрифта - PT Sans;
Ширина основного блока страницы - по умолчанию;
Прозрачность основного блока - без прозрачности;
Расположение аватарок: по умолчанию.
<code>/*шрифты*/
@import url(<a href="https://fonts.googleapis.com/css?family=Bad+sсriрt&subset=cyrillic)" target="_blank">https://fonts.googleapis.com/css?family=Bad+sсriрt&subset=cyrillic)</a>;

@import url('<a href="https://fonts.googleapis.com/css?family=Marck+sсriрt&subset=cyrillic,latin-ext')" target="_blank">https://fonts.googleapis.com/css?family=Marck+sсriрt&subset=cyrillic,latin-ext')</a>;

*:not(.fa) {font-family: Bad sсriрt;}

#author-badge a {font-family: Marck sсriрt !important;}
#author-badge {font-family: Marck sсriрt !important;}

.blog-author, .blog-author a {font-family: Marck sсriрt !important;}

.info:not(.fa) {font-family: PT Sans !important;}

p, .bh-text, .ms, .ms-body {font-family: Bad sсriрt !important;}

/*заменить домик*/
#header a.d {background: url(<a href="http://moziru.com/images/drawn-sakura-blossom-transparent-1.gif)" target="_blank">http://moziru.com/images/drawn-sakura-blossom-transparent-1.gif)</a> 0 0 no-repeat; 
-moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%;
width: 83px !important;}

/*фон*/
html{background: url(<a href="http://s017.radikal.ru/i425/1603/33/d7eaedae80a3.jpg)" target="_blank">http://s017.radikal.ru/i425/1603/33/d7eaedae80a3.jpg)</a>;}

body{padding: 15px;
background: url(<a href="http://s017.radikal.ru/i425/1603/33/d7eaedae80a3.jpg)" target="_blank">http://s017.radikal.ru/i425/1603/33/d7eaedae80a3.jpg)</a>;
background: url(<a href="http://dl.glitter-graphics.com/pub/3632/3632501sjihn5fc91.gif)" target="_blank">http://dl.glitter-graphics.com/pub/3632/3632501sjihn5fc91.gif)</a> repeat; }

/*лента*/
#canvas { background: rgba(255, 255, 255, 0.5);
border-radius: 48px 0 80px 0;}

/*посты и комментарии*/
.bh-post {border-radius: 70px 0 70px 0;
padding-left: 25px;
padding-right: 10px;
padding-bottom: 5px;
box-shadow: 0 0 2px rgba(193,135,107,0.8) !important;
border: 1px solid #92291d;
background: #ffffff;
text-align: justify;} 

.ms {border-radius: 70px 0 70px 0;
background: #ffffff;
padding-left: 25px;
padding-right: 10px;
padding-bottom: 5px;
width: 98%;
box-shadow: 0 0 2px rgba(193,135,107,1) !important;
border: 1px solid #92291d;
text-align: justify;
margin-bottom: 10px;} 

/*все заголовки*/
.in-state h1  {border-radius: 40px 0 0 0;
box-shadow: 0 0 2px rgba(193,135,107,0.8) !important;
border-top: 1px solid #92291d;
border-right: 1px solid #92291d;
border-left: 1px solid #92291d;
background: #ffffff;
padding: 10px;
margin-bottom: 10px;}

.in-state h2 {border-radius: 30px 0 30px 0;
border: 1px solid #92291d;
background: #e4c0bc;
padding: 10px;
margin-right: 15px;
margin-bottom: 10px;}

.hideable {border-radius: 40px 0 0 0;
background: #ffffff;
border-top: 1px solid #92291d;
border-right: 1px solid #92291d;
border-left: 1px solid #92291d;
margin-bottom: 30px;
padding: 10px;}

.corvette h1 {border-radius: 30px 0 30px 0;
border: 1px solid #92291d;
background: #e4c0bc;
padding: 10px;
margin-right: 15px;
margin-bottom: 10px;}

.blog-author {border-radius: 0 0 40px 0;
box-shadow: 0 0 2px rgba(193,135,107,1) !important;
border-right: 1px solid #92291d;
border-left: 1px solid #92291d;
border-bottom: 1px solid #92291d;
padding: 10px;
margin-bottom: 10px;
margin-top: 10px;}

/*ссылка на главную (БХ)*/
.in-state #header a#caption-link {border-radius: 60px 0 0 0;
background:  #8f5447;
font-family: cursive, Marck sсriрt !important;
color: #ffffff;
padding: 13px;}

/*бэджик*/
#author-badge {border-radius: 15px 0 15px 0;
background: #ffffff;
opacity: 0.9;
font-family: Marck sсriрt, Bad sсriрt;}

#author-badge a {color: #92291d;}
a.bh-date-link {color: #92291d;}

/*оформление текста и ссылок*/
.in-state h2 a {color: #3f110d;}

.hideable a {font-size: 15px;}

.corvette h2 {color: #3f110d;}

.corvette h1 {color: #3f110d;
font-size: 18px;}

.blog-author a {font-size: 16px;}

a, a:link, a:active, a:visited {color: #7b3d29;
border-bottom: 1px solid rgba(139,66,42, 0.7);}

/*все иконки*/
.fa-key, .fa-institution, .fa-lock, .fa-star, .fa-book, .fa-comments, .fa-envelope-o, .fa-bank, .fa-warning, .fa-exclamation-triangle, .fa-certificate, .fa-pencil, .info {color: #8b422a !important;}

/*ссылки "профиль и настройки" и "выйти"*/
#profile a, #logout a { color: #ffffff;
border-bottom: 1px solid rgba(139,66,42, 0.7);}

/*лайки*/
.bh-like {padding-right: 15px;}

.fa-heart {color: #92291d !important;}

/*выпадающее меню*/
.dropdown {border-radius: 15px 0 15px 0;
box-shadow: 0 0 2px rgba(193,135,107,0.8) !important;
background: #ffffff;
border: 1px solid #92291d;}

/*стикеры*/
#addSticky, .mySticky {background: rgba(255,255,255,0.7) !important;
border-radius: 50px 0 50px 0;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
border: 1px solid #92291d !important;}
#addSticky:hover, .mySticky:hover {opacity: 1;}
.inSticky, .writeSticky, .rmSticky, .sndSticky {color: #92291d !important;
font-size: 14px !important;}
.mySticky a {color: #92291d !important;}

/*изменение цвета лайка при его нажатии*/
.fa.fa-heart.like.likes {color: #e4c0bc !important;}

/*описание дневника*/
.handwriter {border-radius: 40px 0 40px 0;
padding-left: 25px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
box-shadow: 0 0 2px rgba(193,135,107,0.8) !important;
border: 1px solid #92291d;
background: #ffffff;
text-align: justify;}

/*кнопки "вверх" и "вниз"*/
#footerLinkBlock{background: linear-gradient(to top, #ffffff, #8f5447) !important;}

#topLinkBlock {background: linear-gradient(to bottom, #ffffff, #8f5447) !important;}

/*оформление тегов записи*/
.bh-tags ul li, .bh-tag-link.complex {color: transparent !important;}
.bh-tags a, .bh-tags ul li a {background: url(<a href="http://www.clker.com/cliparts/J/s/D/V/I/b/sakura-blossom-alice.svg)" target="_blank">http://www.clker.com/cliparts/J/s/D/V/I/b/sakura-blossom-alice.svg)</a> no-repeat;
-moz-background-size: 20%; /* Firefox 3.6+ */
    -webkit-background-size: 20%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 20%; /* Opera 9.6+ */
    background-size: 20%;
width: 25px !important;
height: 25px !important;
padding-left: 25px;
margin-left: -10px !important;}

/*аватарки в комментариях*/
.userpic, .userpic-s {height: 70px !important;
width: 70px !important;
border-radius: 40px 0 40px 0 !important;
border: 1px solid #92291d;}

/*аватарки в посте*/
.bh-post-in .userpic img {height: 70px !important;
width: 70px !important;
border-radius: 40px 0 40px 0 !important;
border: 1px solid #92291d;
margin-top: -35px !important;
margin-right: -110px !important;}

/*убрать разделитель постов*/
.bh-post-in {border-bottom: none;}

/*адаптация аватарок для маленьких экранов*/
@media screen and (max-width: 768px){.bh-post-in .userpic img {min-height: 70px !important;
min-width: 70px !important;
border-radius: 40px 0 40px 0 !important;
border: 1px solid #92291d;
margin-top: -25px !important;
margin-right: 130px !important;
margin-left: -30px !important;
}}
@media screen and (max-width: 768px){.userpic, .userpic-s {min-height: 70px !important;
min-width: 70px !important;
border-radius: 40px 0 40px 0 !important;
border: 1px solid #92291d;}}

/*оформление цитаты*/
.quote {border-left: none !important;
font-size: 13px !important;
opacity: 0.65 !important;
border-radius: 15px 0 15px 0 !important;
border: 1px dashed #92291d !important;
padding: 5px !important;
margin-top: 5px !important;}

/*кнопки*/
input.text, input.password, select {box-shadow: 0 0 2px rgba(193,135,107,0.8);
border-radius: 5px 5px 5px 5px !important;
background: #ffffff !important;
padding: 5px !important;
border: 1px solid #92291d;}

#quotator, #quote-selected-text, .submit, .search-all-from-badge input.submit {box-shadow: 0 0 2px rgba(193,135,107,0.8);
background: linear-gradient(to top, #ffffff, #8f5447) !important;
border-radius: 5px 5px 5px 5px !important;
padding: 5px !important;
border: none !important;
color: #000000 !important;
opacity: 0.75 !important;}

/*оформление моря*/
.more-in {border-bottom: 1px dashed #92291d !important;}

/*оформление списка тегов*/
.bh-tag-link a {background: url(<a href="http://aozora-sakuranosato.com/images/iconSakura01.png)" target="_blank">http://aozora-sakuranosato.com/images/iconSakura01.png)</a> no-repeat;
-moz-background-size: 20%; /* Firefox 3.6+ */
    -webkit-background-size: 20%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 20%; /* Opera 9.6+ */
    background-size: 20%;
width: 25px !important;
height: 25px !important;
padding-left: 25px; margin-left: -10px !important;}

.loadable {background: rgba(255,255,255,1) !important;
border: 1px solid #92291d;
border-radius: 40px 0 40px 0 !important;}

/*заменить "солнышко" у имени автора на листочек*/
.fa-certificate:before {content: 'f06c'; }</code>копировать
Сокровищница (публикации за 28 января 2018)6 читателей тэги

Сакура
