Что почитать: свежие записи из разных блогов
Записи с тэгом #css из разных блогов
-, микроблог «Новости сайта»
CSS-сообщество — место, где можно поделиться кодом интересного дизайна для всех пользователей и позаимствовать то, что понравилось. Пока проект в стадии становления, такой подход будет достаточно удобен для многих. Ссылка на сообщество всегда на главной странице.
Sly Fox, сообщество «Css для блога»
Дневная тема (закончено )
Комбинируется с основной.
/*вообще все ссылки*/
a, a:link, a:active, a:visited {
color: #c34d53;
border-bottom: 1px solid rgba(218, 193, 103, 0);
}
/*все ссылки при наведении*/
a:hover {
text-decoration: underline;
}
/*убрать домик*/
#header a.d {
display: none;
}
/*фон надписи блогхаус (ссылка на главную)*/
.in-state #header a#caption-link {
background: #2b2b2b;
padding: 10px;
padding-right:25px;
Sly Fox, сообщество «Css для блога»
Ночная тема (первая проба)
/*Цветовая схема и размер шрифта*/
/* фон для всей страницы*/
html, body {
background:#424242;
}
/*фон для главного столбика с записями*/
#canvas {
background: #303030;
Добавление рамочек к постам при наведении
Через задницу немного, конечно, но. Мне с самого начала хотелось чистый белый бложик, но при этом с визуально отделяемыми друг от друга при наведении постами. Как такое сделать:
.bh-post-in { border: 1px solid #ffffff; border-radius: 2px ; padding-left: 30px; padding-top: 10px;} - стиль до наведения курсора
.bh-post-in:hover { border: 1px solid #d5d5d5; border-radius: 5px ; padding-left: 30px; box-shadow: 0 0 2px rgba(0,0,0,0.5); padding-top: 10px;} - стиль после наведения курсора
border: 1px - толщина границы в пикселях
solid - вид рамки, есть другие варианты по ссылке
#ffffff - цвет. В моем случае это цвет фона блога, чтобы без наведения курсора на пост рамка была не видна. Код цветов и обозначение в rgb можно посмотреть по ссылке
border-radius: 2px - скругление на углах, чем больше значение в пикселях, тем сильнее
padding-left: 30px; padding-top: 10px; - отступы сверху и слева от поста, т.к. без паддингов рамка "прилипает" к тексту, можно делать больше-меньше и добавить отступы справа (padding-right) и снизу (padding-bottom)
box-shadow: 0 0 2px rgba(0,0,0,0.5); - в ховере кроме рамки используется тень. Первые два ноля - отступы от рамки по осям Х и Y, далее - толщина в пикселях, затем цвет.
P.S. Понимаю, что это все можно сделать проще, но мое мастерство верстки - на тройных костылях. Может, на первое время кому-то пригодится.
css Дизайн темный
/*Цветовая схема и размер шрифта*/
/* фон для всей страницы*/
html, body {
background:#424242;
}
/*фон для главного столбика с записями*/
#canvas {
background: #303030;
}
/*область с кнопками для ленты, дискуссий, почты*/
#author-badge {
background: #303030;
font-size: 11pt;
color: #b19d76;
}
/*шрифт и цвет шрифта для страницы, текста, таблиц, кнопок, списков*/
body, p, div, table, td, th, input.submit, button, li {
font-size: 15pt;
color: #ffffff;
}
/*фон надписи БлогХаус (ссылка на главную)*/
.in-state #header a#caption-link {
background: #2b2b2b;
}
/*шрифт самой надписи*/
#header a#caption-link {
color: #f5d9a3;
}
/*Название блога*/
.in-state h1, .in-state h1 a{
color: #cccccc;
}
/*Название записей*/
.in-state h2, .in-state h2 a {
color: #f5d9a3;
font-size: 15pt !important;
}
/*слово "Автор:" под названием блога*/
p.blog-author {
color: #cccccc;
}
/*имя автора под названием блога*/
p.blog-author a {
color: #cccccc;
}
/*остальные надписи с панели(написать в блог, черновики, тэги) а также Коментарии, продолжение следует, редактирование...*/
.neutral {
color: #cccccc !important;
font-size: 11pt !important;
}
/*важная информация(колокольчик, шарик(солнце?) на панели автора и кто знает что еще*/
.info {
color: #cab58e !important;
}
/*дата*/
.bh-date {
font-size: 9pt;
color: #cab58e;
}