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

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

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

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

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

Skarul

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

молчун

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

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

Сообщений: 17

Карма: 1

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

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

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

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

Code

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

Code

  . POST (
     Маржа: 0; обивка: 110px 20px 20px;
     Float: слева;
     ширина: 560px;
     Должность: относительное;
    )
    . пост. postheader (
     Справочная информация: URL (postheader_bg.gif) Повторите-X;
     Float: слева;
     ширина: 600px;
     Должность: абсолютный;
     Слева: 0; Top: 0;
    )

Прикрепления: 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

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

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

Code

.date {
    background: url(date_bg.gif) no-repeat;
    width: 46px; height: 57px;
    float: left;
    padding: 3px 5px 3px 0;
    text-align: center;
    font-size: 1.8em;
    position: absolute;
    left: -50px; top: 0;
}
.date strong, .date small {
    font-size: 0.5em;
    text-transform: uppercase;
    display: block;
}

Прикрепления: 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

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

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

Code

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

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

Code

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

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

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

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

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

neio

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