Сокровищница6 читателей тэги
Публичный цитатник самого интересного из разных источников
Дизайн "Верность"
Публикация из блога «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>копировать
Код под катом.
Дизайн "Сакура"
Публикация из блога «CSS-сообщество» (автор: Тайя):
Сакура
© Источник: https://blog-house.pro/css-community/post-15209/
Цветовая схема: 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;}копировать