• Страница 1 из 1
  • 1
Архив - только для чтения
Делаем стильный пост
Skarul
Дата: Понедельник, 02.11.2009, 08:02 | Сообщение # 1
молчун
Группа: Пользователи
Пользователь №: 219
Сообщений: 17
В последнее время я заметил тенденцию в блоге Рубрики где она торчит из его основе макет. Я хотел бы поделиться этой техники для тех, кто хотел бы предоставить их заголовки пост нового стиля. Один совет иметь в виду при разработке этого, убедитесь что он подходит вашей целевой аудитории размером экрана.

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




Шаг 1 : Черно-белые - HTML
Начните с визуализацией каркаса, как каждый пост пункт будет разбит.
Code
  <div class="post">   
     <div class="postheader">   
      <! - Почтовые элементы заголовка Goes Here ->   
     </ div>   
     <! - Почтовые Авторские Goes Here ->   
    </ div>

Шаг 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
Шаг 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
Шаг 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
говорун
Группа: Проверенные
Пользователь №: 128
Сообщений: 195
Получено оценок: 26
Спасибо! Лови +
  
Skarul
Дата: Понедельник, 02.11.2009, 09:50 | Сообщение # 5
молчун
Группа: Пользователи
Пользователь №: 219
Сообщений: 17
neio, Да, незачто :Q . В будущем будут ещё уроки :)

В этом вашем интернете хрен поймешь, кто прикалывается, а кто реально дебил.
  
neio
Дата: Понедельник, 02.11.2009, 10:02 | Сообщение # 6
говорун
Группа: Проверенные
Пользователь №: 128
Сообщений: 195
Получено оценок: 26
Quote (Skarul)
будут ещё уроки

Отлично! ^_^

  
OnMusic
Дата: Понедельник, 02.11.2009, 10:42 | Сообщение # 7
говорун
Группа: Проверенные
Пользователь №: 120
Сообщений: 158
Получено оценок: 11
<_< мне не понравилось, как тупо
  
Aleko
Дата: Понедельник, 02.11.2009, 10:45 | Сообщение # 8
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
Skarul, сейчас ко то схватит бан за машинный перевод и грязные коды. Исправь урок.

Бесплатные обои.
  
neio
Дата: Понедельник, 02.11.2009, 11:26 | Сообщение # 9
говорун
Группа: Проверенные
Пользователь №: 128
Сообщений: 195
Получено оценок: 26
OnMusic, я пока что ни одного твоего урока ни видел! ;)
  
MrOizo
Дата: Понедельник, 02.11.2009, 15:25 | Сообщение # 10
говорун
Группа: Проверенные
Пользователь №: 42
Сообщений: 188
Получено оценок: 6
Quote (Skarul)
не забудьте добавить 60px обивка налево.

Что сделать? O_o


  
Maivan
Дата: Понедельник, 02.11.2009, 16:10 | Сообщение # 11
молчун
Группа: Проверенные
Пользователь №: 361
Сообщений: 25
Получено оценок: 6
Оп оп оп!
http://www.sohtanaka.com/web-des....ick-out
  
n1ght(o_O)
Дата: Понедельник, 02.11.2009, 16:15 | Сообщение # 12
говорун
Группа: Проверенные
Пользователь №: 10
Сообщений: 180
Получено оценок: 6
Quote (Maivan)

Quote (Skarul)
Автор: Sohtanaka
Перевод: skarul (XylustaR)
  
Maivan
Дата: Понедельник, 02.11.2009, 16:42 | Сообщение # 13
молчун
Группа: Проверенные
Пользователь №: 361
Сообщений: 25
Получено оценок: 6
n1ght(o_O), Да видел я это!
  
Aleko
Дата: Понедельник, 02.11.2009, 16:53 | Сообщение # 14
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
тема в топку

Бесплатные обои.
  
  • Страница 1 из 1
  • 1
Поиск:
© Studioad.ru 2006 · 2010. Использование материалов форума на сторонних ресурсах без прямой обратной ссылки строго запрещено. Хостинг от uCoz.