Создание дизайна сайта с нуля. Урок 6

Создание дизайна сайта с нуля. Урок 5
Сегодня у нас заключительный урок по созданию дизайна страницы. Мы добавим тени нашему дизайну и на этом закончим. Но не переживайте: после этого будет опубликован следующий цикл уроков по установке полученного шаблона на разные CMS (системы управления сайтов), такие как Ucoz, WordPress и, возможно, Joomla.В прошлом уроке я указала минимальные настройки стилей для наших изображений и порекомендовала изучить статьи:- Свойство CSS — box-shadow- Свойство CSS — transform- Примеры CSS теней без использования картинок. Часть 1- Примеры CSS теней без использования картинок. Часть 2
Поэтому я не буду заострять внимание на используемых свойствах, а просто выложу стили CSS для каждого изображения, которые должны были в итоге у Вас получиться.Итак:
1. верхнее изображение:Код CSS
Код
.header_img
{float:right;margin-top: -50px;
webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(-13deg);
-moz-transform: rotate(-13deg);
-ms-transform: rotate(-13deg);
-o-transform: rotate(-13deg);
transform: rotate(-13deg);
border: 10px solid #Fff;
}
.header_img img
{float:right;}

2. Левый блок:
Код
.left_block_img
{
webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
transform: rotate(-8deg);
border: 10px solid #Fff;
width:200px;
}

3. Средний блок:
Код
.middle_block_img {
float: right;
width: 120px;
}

3. Подвал:
Код
.footer img {float:left;}
.footer_img
{float:left;
webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-ms-transform: rotate(8deg);
-o-transform: rotate(8deg);
transform: rotate(-8deg);
border: 10px solid #Fff;
width:200px;
margin-right:20px;
}

И еще я добавила вокруг всей страницы в целом, добавив ей законченности, указав в файле CSS следующие стили:
Код
.container {
width:1000px;
margin:0 auto;
padding:20px;
webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

В результате, у Вас должен получиться такой файл CSS:
Файл CSS
А сама страница должна выглядеть вот так:
Результат урока 6
А теперь внимание. Наше построение дизайна страницы окончено. Но не окончено наше обучение.Я предлагаю Вам домашнее задание, создать дизайн страницы, приведенной ниже
Создание дизайна сайта с нуля. Урок 6

Обратите внимание,  я не прошу Вас покупать этот шаблон. Я хочу показать Вам, что Вы сами можете все сделать. Я даю Вам простор в подборе рисунков, даже цветовой гаммы.А чтобы Вам было интересно, я предлагаю высылать мне получившиеся работы. Я буду их публиковать, указывая на ошибки, а после того, как наберется таких работ 10 штук, я выберу лучшую и сделаю по ней шаблон для Вашего сайта под Вашу CMS( Ucoz, WordPress или Joomla) . И опубликую уроки того, как я это сделала, указывая Ваш сайт в качестве примера. Таким образом, Вы получите и дизайн, и посетителей.Так что дерзайте.