el_murid (el_murid) wrote,
el_murid
el_murid

Categories:

Основной макет. Подложка


Рабочий пример http://tastytheme.livejournal.com/

Основной фон  

Фон макета заливаем однородной текстурой. Указываем параметр  fixed, дающий при прокрутке плывущий еффект верхних слоев поста и боковой панели. Кому не нравиться - убираем параметр. Указываем цвет заливки под текстурой, для варианта просмотра страницы в браузере, при отключенной графике. Указываем основной шрифт и его размер для макета.

body {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
background: url(http://pics.livejournal.com/tastytheme/pic/00030c9f) fixed #8f9595;
}

Верхняя часть. Заголовок.

Состоит из двух классов объектов .bodyheaderblock и .body-title

Здесь создаем некое подобие маркизы. В фотошопе делаем графический елемент в виде зубца, для заливки по горизонтали с прозрачным фоном.  Так как цвет заливки нам не нужен, делаем фон прозрачным. Устанавливаем размер верхней границы в значение 0, иначе у нас останется ненужная верхняя полоска и делаем на всякий случай прозрачной. Делаем отступы, также равными 0. Заливаем по горизонтали repeat-x готовым элементом зубца, с координатами  0% 0% выровненными по верхней границе класса. Получаем ровную заливку, плотно прилегающую к полосе меню.


.bodyheaderblock {
border-top: 0px solid transparent;
background-color: transparent;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
background: url("http://pics.livejournal.com/tastytheme/pic/0003q4hz") 0% 0% repeat-x;
}

.body-title

Теперь мне нужно сместить заголовок на 130 пикселей  вправо с такими параметрами позиционирования - padding: 18px 0px 6px 130px;  и перед ним прилепить иконку.   Далее параметрами координат позиционирую иконку к шрифту - background-position: 100px 19px; Делаю шрифт вдавленным в фон - color: #666666; и -text-shadow: 1px 1px #D6D6D6; 

.body-title {
background: transparent;
background-image: url("http://pics.livejournal.com/tastytheme/pic/0003b976") ;
background-repeat: no-repeat;
background-origin: padding-box;
background-position: 100px 19px;
font-family: ;
font-size: 12px;
font-weight: normal;
color: #666666;
text-shadow: 1px 1px #D6D6D6;
text-align: left;
padding: 18px 0px 6px 130px;
}

.bodyblock

Теперь мне нужно установить границы макета слева и справа. Я даю им отступ от края монитора в 100 пикселей.
Сверху 10, снизу 20 пикселей padding: 10px 100px 20px 100px; Сверху отделяю тонкой серой линией - border-top: 1px solid #dddddd; Снизу заливаю по горизонтали вторую часть маркизы, вторым изображением зубца, перевернутым в фотошопе на 180 градусов.   background: url("http://pics.livejournal.com/tastytheme/pic/0003p8kx") 0% 100% repeat-x; Таким образом подготовлена подложка под область поста и боковой панели.

Мне не нравится когда шрифт в посте разливается от края до края, делая таким образом пост трудно читаемым. Во вторых пропадает эффект подложки и пространства. Вид становится более плоским. Поэтому даем объектам отступы по краям, тем более что их можно использовать дополнительно.

.bodyblock {
border-top: 1px solid #dddddd;
border-bottom: 0px solid #dddddd;
padding: 10px 100px 20px 100px;
background-color: transparent;
margin: 0px 0px 0px 0px;
background: url("http://pics.livejournal.com/tastytheme/pic/0003p8kx") 0% 100% repeat-x;
}

Нижняя часть. Подвал.

.pagefooterblock

Аналогично баннеру делаю изображение для подвала и на этом заканчиваю подготовку общего фона.

.pagefooterblock {
text-align: center;
padding-top: 6px;
padding-bottom: 0px;
background-color: #323232;
font-family: ;
font-size: 12px;
color: #777;
margin-top: 0px;
border-top: 0px solid #dddddd;
background-position: 50% 50%;
background-repeat: no-repeat;
background-image: url("http://pics.livejournal.com/tastytheme/pic/0003eryk");
height: 120px;
}



Далее будем разбираться с областью поста.

Subscribe

Recent Posts from This Journal

  • Омикрон

    Экстренная сессия ВОЗ по новому (южноафриканскому) штамму вируса пришла к следующим выводам: штамм охарактеризован как «вызывающий беспокойство» (в…

  • Семинар 27 ноября

    Уважаемые коллеги. Завтра в 19,00 (мск) я буду проводить открытый семинар на Ютубе. Будучи крайне неопытным пользователем этого ресурса, пока…

  • Мошенничество

    Вице-премьер Татьяна Голикова заявила на заседании оперштаба, что коллективный иммунитет к коронавирусу превысил 70% в шести регионах России: это…

  • Post a new comment

    Error

    Comments allowed for friends only

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 2 comments