Сокровищница6 читателей тэги

Автор: одна Кисонька

#БлогХаус искать «БлогХаус» по всему сайту с другими тэгами

Сакура

Публикация из блога «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>копировать

Код под катом.

продолжение следует…

Дизайн "Сакура"

Публикация из блога «CSS-сообщество» (автор: Тайя):
Сакура

Цветовая схема: 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;}копировать
© Источник: https://blog-house.pro/css-community/post-15209/

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

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