Публикация из блога «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>
копировать
© Источник: https://blog-house.pro/css-community/post-25651/
Публикация из блога «CSS-сообщество» (автор: Айлона):
Верность
Дизайн в японском стиле с множественным бэкграундом: две картинки + фоновый цвет.
Левая часть фиксированная, правая убегает вниз при добавлении записей.
Иероглифы в оформлении записи, если верить интернетам, складываются в слово "верность".
Галки при оформлении дневника советую не ставить, они имеют приоритет и ломают css.
Дизайн адаптирован под разную ширину экрана до 320px, насколько хватило моих пока скромных познаний.
Имя автора сделано картинкой с наведением, использован шрифт HanZi. При необходимости могу помочь с оформлением. Если нет желания возиться с картинкой, соответствующую часть кода надо заменить следующим:
<code>/*ПЕРЕНЕСТИ ИМЯ АВТОРА*/ #all p.blog-author.corvette.fluid.hideable a { display: block; margin: 0 auto; height: 35px; max-width: 300px; font-size: 26px; }</code>
копировать
А это убрать вовсе:
<code>#all p.blog-author.corvette.fluid.hideable a:hover { background: url(<a href="http://s03.radikal.ru/i176/1712/5e/62f98ec81d0f.png)" target="_blank">http://s03.radikal.ru/i176/1712/5e/62f98ec81d0f.png)</a> no-repeat; background-position: center center; }</code>
копировать
Код под катом.
Цветовая схема: Scarlet
Гарнитура: Georgia
Ширина основного блока страницы: 1000px
Прозрачность основного блока: без прозрачности
Логотип: без логотипа
Код:
html, #caption-link {background: transparent !important;}
/*фон*/
body {background: url(<a href="https://fastpic.co/images/80673830.jpg)" target="_blank">https://fastpic.co/images/80673830.jpg)</a> no-repeat top right, url(<a href="https://fastpic.co/images/80673476.jpg)" target="_blank">https://fastpic.co/images/80673476.jpg)</a> no-repeat top left, url(<a href="https://fastpic.co/images/80673112.jpg)" target="_blank">https://fastpic.co/images/80673112.jpg)</a> no-repeat bottom right #fbf1f2;}
/*БХ*/
#caption-link {position: relative; top: -42px !important;}
/*верхнее меню*/
.corvette {padding-left: 15px;}
/*короткое инфо о дневнике*/
.handwriter {width: 107% !important; max-width: 107% !important; background: none; box-shadow: inset 0 0 20px rgba(231,169,175, 0.6); padding: 10px 10px 0; border-radius: 4px; margin-left: -85px !important;}
/*лента*/
#canvas {background: none; border-radius: 40px; box-shadow: inset 0 0 150px rgba(231,169,175, 0.6); padding: 60px 25px 40px 20px !important; margin-top: 50px !important;}
@media (max-width: 768px) {
#canvas {padding: 60px 10px 40px 5px !important;}
.handwriter {width: 92% !important; max-width: 92% !important; margin-left: 20px !important;}
.handwriter * {font-size: 90%;}
}
/*бэджик*/
#author-badge {background: rgba(251, 226, 226, 0.95) !important; box-shadow: inset 0 0 15px rgba(231,169,175, 0.6) !important;}
/*выпадашки и стикеры*/
.dropdown, #addSticky, .mySticky {background: rgba(251, 226, 226, 0.9) !important; box-shadow: inset 0 0 25px rgba(231, 169, 175, 0.95) !important; border-radius: 4px; padding: 10px !important; border: none !important;}
.dropdown:hover, #addSticky:hover, .mySticky:hover {background: rgba(251, 226, 226, 0.95) !important;}
/*ссылки и цвет*/
.in-state *, a, a:link, a:active, a:visited, #author-badge a, #author-badge .info, a.bh-date-link, .neutral, .comments-area .paginator, .bh-tags ul li, .fa.fa-star.like.before-info {color: #7e2531 !important;}
/*убрать серый цвет активных ссылок*/
.running {filter: none; !important; -webkit-filter: none !important; opacity: 1 !important;}
/*жирный шрифт у активной ссылки в оглавлении дневника*/
#proud-links b {font-weight: bold;}
/*подчеркивание тегов и ссылок при редактировании поста*/
.sys-link, .edit-area .bh-tags ul li a, form .bh-tags ul li a, .additional-params, .people-loader, .smilies-loader {border-bottom: 1px rgba(255,0,0,.07) solid;}
/*подчеркивание моря*/
.more-in {border-bottom: 1px dashed rgba(126, 37, 49, 0.6);}
/*ссылки при наведении*/
a:hover, .fa:hover, a.neutral:hover, .more-in:hover {color: #7e2531 !important; text-shadow: 0 0 0 #7e2531 !important;}
/*кнопки*/
.submit {background: none !important; border-radius: 2px; box-shadow: inset 0 0 15px rgba(231,169,175, 0.6); padding: 8px !important;}
/*кнопка цитирования*/
#quotator, #topLinkBlock, #footerLinkBlock {background: none !important; border-radius: 3px; box-shadow: inset 0 0 15px rgba(231,169,175, 0.6);}
#quotator i.fa, #topLinkBlock, #footerLinkBlock {color: #7e2531 !important; opacity: 1 !important;}
#quote-selected-text {border-bottom: 1px dotted rgba(126, 37, 49, 0.6);}
/*цитата*/
.quote {border-left: none !important; display: inline-block; box-shadow: inset 0 0 20px rgba(231,169,175, 0.6); padding: 0 15px; border-radius: 3px;}
/*выделение*/
::selection {background: #d87f8f !important; color: #000 !important;}
::-moz-selection {background: #d87f8f !important; color: #000 !important;}
/*нажатый лайк или звездочка*/
.fa.fa-heart.like.likes, .fa.fa-star.like {color: #da364d !important;}
/*посты, комменты*/
.bh-post {padding: 10px 15px !important;}
.bh-text, .bh-text p {max-width: 100% !important;}
/*разделительная полоса постов*/
.bh-post-in, .ms, .ms-down {border-color: transparent !important; border-bottom: 1px solid rgba(255,0,0,.15) !important;}
/*ширина области комментов*/
.comments-area.corvette.fluid {padding-left: 15px !important; max-width: 100% !important;}
.ms {padding: 10px 5px !important; width: 100% !important;}
/*надпись "комментарии"*/
.single-entry .distant {padding-left: 4px !important;}
/*область ввода комментариев*/
.single-entry .semi-distant {padding-left: 1px !important;}
#messages-area {box-shadow: none !important;}
.body-messages .ms-attr .complex a {border-bottom: 1px solid rgba(231, 169, 175, 0.8) !important;}
копировать
Лучшее
Материалы сайта предназначены для лиц старше 16 лет (16+)