Studio AD : Делаем стильный пост

Страница 1 из 1
1

Архив - только для чтения

Делаем стильный пост (Для блога или чего либо)

Делаем стильный пост

Skarul

Дата: Понедельник, 02.11.2009, 08:02 | Сообщение # 1

молчун

Группа: Пользователи

Пользователь №: 219

Сообщений: 17

Карма: 1

Замечания: 0%

В последнее время я заметил тенденцию в блоге Рубрики где она торчит из его основе макет. Я хотел бы поделиться этой техники для тех, кто хотел бы предоставить их заголовки пост нового стиля. Один совет иметь в виду при разработке этого, убедитесь что он подходит вашей целевой аудитории размером экрана.

Заметим, что эта методика может варьироваться в зависимости от дизайна. Моя цель для вас понять основную концепцию в этом уроке, чтобы вы могли экспериментировать и использовать ее для своих собственных проектов.

Шаг 1 : Черно-белые - HTML
Начните с визуализацией каркаса, как каждый пост пункт будет разбит.

Code

1	<div class="post">
2	<div class="postheader">
3	<! - Почтовые элементы заголовка Goes Here ->
4	</ div>
5	<! - Почтовые Авторские Goes Here ->
6	</ div>

Пoдcвeткa oт АD Исходный код | Переносить строки

Шаг 2 : Черно-белые стилизации - CSS
Каждый пост вступления будут обобщены в рамках. Должностями класса. Поскольку мы используем абсолютное позиционирование на. Postheader, не забудьте добавить достаточно обивка на верхнем. Пост так пост содержание не совпадает с заголовком.

Code

1	. POST (
2	Маржа: 0; обивка: 110px 20px 20px;
3	Float: слева;
4	ширина: 560px;
5	Должность: относительное;
6	)
7	. пост. postheader (
8	Справочная информация: URL (postheader_bg.gif) Повторите-X;
9	Float: слева;
10	ширина: 600px;
11	Должность: абсолютный;
12	Слева: 0; Top: 0;
13	)

Пoдcвeткa oт АD Исходный код | Переносить строки

Прикрепления: 7146325.gif (14.0 Kb) · 8098734.gif (22.6 Kb)

В этом вашем интернете хрен поймешь, кто прикалывается, а кто реально дебил.

Сообщение отредактировал Skarul - Понедельник, 02.11.2009, 08:02

Skarul

Дата: Понедельник, 02.11.2009, 08:06 | Сообщение # 2

молчун

Группа: Пользователи

Пользователь №: 219

Сообщений: 17

Карма: 1

Замечания: 0%

Шаг 3 : Поcтовые Заголовок Черно-белые - HTML
Теперь мы будем смотреть ближе, как каждый элемент будет находиться в пределах. Postheader.

Code

1	<div class="postheader">
2	<span class="date"> <strong> октября </ STRONG> 25 <small> 2009 </ SMALL> </ SPAN>
3	<h2> <a href="#"> Стайлинг Блог Почтовые заголовки с CSS </ A> </ h2>
4	<a href="#" class="comments"> 25 </ A>
5	<p>
6	<span> Категория: <a href="#"> CSS </ A> \| Метки: <a href="#"> Рубрики </ A>, <a href="#"> Tutorials </ A> </ SPAN>
7	По <a href="#"> Сох Танака </ A>
8	</ P>
9	</ div>

Пoдcвeткa oт АD Исходный код | Переносить строки

Шаг 4.1 : Стайлинг Постовые Заголовок - CSS
Date Style
Та часть, которая торчит из макет дату. Установить позиционирование в абсолютном и тянуть его обратно-50px налево.

Code

1	.date {
2	background: url(date_bg.gif) no-repeat;
3	width: 46px; height: 57px;
4	float: left;
5	padding: 3px 5px 3px 0;
6	text-align: center;
7	font-size: 1.8em;
8	position: absolute;
9	left: -50px; top: 0;
10	}
11	.date strong, .date small {
12	font-size: 0.5em;
13	text-transform: uppercase;
14	display: block;
15	}

Пoдcвeткa oт АD Исходный код | Переносить строки

Прикрепления: 3496701.gif (15.2 Kb) · 4026818.gif (15.2 Kb)

В этом вашем интернете хрен поймешь, кто прикалывается, а кто реально дебил.

Сообщение отредактировал Skarul - Понедельник, 02.11.2009, 08:07

Skarul

Дата: Понедельник, 02.11.2009, 08:10 | Сообщение # 3

молчун

Группа: Пользователи

Пользователь №: 219

Сообщений: 17

Карма: 1

Замечания: 0%

Шаг 4.2 : Стайлинг Постовые Заголовок - CSS
Комментариев Стиль
Подобно тому, как мы стиле даты, мы будем использовать абсолютное позиционирование подтолкнуть комментариев блок-10px на верхнюю и-10px вправо.

Code

1	a.comments {
2	position: absolute;
3	right: -10px; top: -10px;
4	background: url(comment_bubble.gif) no-repeat;
5	width: 34px; height: 39px;
6	padding: 7px 0 0;
7	text-align: center;
8	color: #fff;
9	font-size: 1.6em;
10	text-decoration: none;[/c]
11	}

Пoдcвeткa oт АD Исходный код | Переносить строки

Уровень 2 стиль заголовка
Поскольку комментарии площади более кровотечение в верхней части раздела, убедитесь, что у вас достаточно обивка на правой стороне поэтому не пересекаются. Установить высоту строк и высоту в соответствии поэтому оно может быть вертикально выровнен. Для тех, браузеры, теней поддержку текста, мы можем добавить приятно прикасаться письмо стиль Пресса через текстовый тень собственности.

Code

1	.post .postheader h2 {
2	margin: 0; padding: 0 25px 0 10px;
3	font: normal 2.2em Georgia, "Times New Roman", Times, serif;
4	height: 62px; line-height: 62px;
5	text-shadow: 1px 1px 1px #cfeb7f;
6	}
7	.post .postheader h2 a {
8	text-decoration: none;
9	color: #222;
10	display: block;
11	}

Пoдcвeткa oт АD Исходный код | Переносить строки

Вспомогательная информация о стиле
AUX информации будут завернуты в пункте тег. Для размещения на фоновое изображение, не забудьте добавить 60px обивка налево. По категориям и тегам информации, заверните ее в пролет который будет спущен с правой стороны.

Code

1	.post .postheader p{
2	font-size: 0.9em;
3	background: url(author_bg.gif) no-repeat 10px bottom;
4	height: 27px; line-height: 27px;
5	margin: 0; padding: 0 10px 0 60px;
6	color: #fff;
7	}
8	.postheader p a {color: #fff;}
9	.postheader p span {float: right;}

Пoдcвeткa oт АD Исходный код | Переносить строки

Ну и вот что получилось

Автор: Sohtanaka
Перевод: skarul (XylustaR)
p.s. Извените что нету картинок которые требуются для урока, просто ненашёл. Постораюсь найти и не бейте сильно за это

Прикрепления: 3565472.gif (10.3 Kb) · 2843040.gif (14.0 Kb)

В этом вашем интернете хрен поймешь, кто прикалывается, а кто реально дебил.

neio

Дата: Понедельник, 02.11.2009, 09:38 | Сообщение # 4