Как создать адаптивный шаблон сайта на CSS3


Как создать адаптивный шаблон сайта на CSS3

Как создать адаптивный шаблон сайта на CSS3

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

Шаг 1. HTML

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

</pre>
<div class="window-margin">
<div class="window"><aside class="sidebar">
<div class="top-bar">RUBEBOX MOVIE</div>
<div class="search-box">
<input type="text" placeholder="Поиск..." /></div>
<menu class="menu">Трейлеры
<ul>
	<li class="active"><a href="#">Приключения / Боевики</a>
<ul>
	<li><a href="#">Последние</a></li>
	<li class="active"><a href="#">Популярные</a></li>
	<li><a href="#">Скоро в прокате</a></li>
	<li><a href="#">Наш выбор</a></li>
</ul>
</li>
	<li><a href="#">Анимация</a></li>
	<li><a href="#">Комедии</a></li>
	<li><a href="#">Документалистика</a></li>
	<li><a href="#">Драма</a></li>
	<li><a href="#">Ужасы</a></li>
	<li><a href="#">Фантастика / Фэнтези</a></li>
	<li><a href="#">Последние A-Я</a></li>
</ul>
<div class="separator"></div>
<ul class="no-bullets">
	<li><a href="#">Последние новости</a></li>
	<li><a href="#">Критика</a></li>
	<li><a href="#">Билеты</a></li>
	<li><a href="#">Toп 250</a></li>
</ul>
<div class="separator"></div>
</menu></aside>
<div class="main" role="main">
<div class="top-bar">
<div class="profile-box"></div>
<ul class="top-menu">
	<li class="menu-icon trigger-sidebar-toggle">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div></li>
	<li><a href="#">Последние новости</a></li>
	<li><a href="#">Статьи</a></li>
	<li class="active"><a href="#">Ролики & Кино</a></li>
	<li><a href="#">Телевидение</a></li>
	<li><a href="#">Музыка</a></li>
	<li><a href="#">Знаменитости</a></li>
</ul>
</div>
 <!-- top bar -->
<div class="featured-movie">
<img class="cover" alt="" src="jpg/backdrop_ggwxvq_1.jpg" />
Штаб
<div class="bottom-bar">
<div class="title-container"><b>Non-stop</b> Трейлер #1</div>
<div class="right">
<div class="stars"></div>
<div class="share">Поделиться</div>
</div>
 <!-- right --></div>
 <!-- bottom bar --></div>
 <!-- featured -->
<div class="movie-list">
<div class="title-bar">
<div class="left">Популярные трейлеры
Приключения / боевики</div>
 <!-- left -->
<div class="right"><a class="blue" href="#">Оценка<i class="fa fa-angle-down"></i></a>
 <a href="#">Новые</a>
 <a href="#">Старые</a></div>
 <!-- right --></div>
 <!-- title-bar -->
<ul class="list">
	<li><img class="cover" alt="" src="jpg/2014-03-08_140412_oavbye_1.png" />
Sin City: A Dame To Kill For
Action, Crime</li>
	<li><img class="cover" alt="" src="jpg/2014-03-08_140329_aawn02_1.png" />
Transcendence
Action, Drama</li>
	<li><img class="cover" alt="" src="jpg/2014-03-08_140239_kyg9i7_1.png" />
Need For Speed
Action, Crime</li>
	<li><img class="cover" alt="" src="jpg/2014-03-08_140052_dq4dyx_1.png" />
The Amazing Spiderman
Action, Adventure</li>
	<li><img class="cover" alt="" src="jpg/2014-03-08_140104_tdgzka_1.png" />
Pompeii
Action, Adventure</li>
	<li><img class="cover" alt="" src="jpg/2014-03-08_140248_fmufrz_1.png" />
Divergent
Action, Sci-Fi</li>
	<li><img class="cover" alt="" src="jpg/2014-03-08_140401_aewzsy_1.png" />
Guardians of the Galaxy
Action, Adventure</li>
	<li><img class="cover" alt="" src="jpg/2014-03-08_140339_wck2gw_1.png" />
X-Men: Days of Fury
Action, Adventure</li>
	<li><img class="cover" alt="" src="jpg/2014-03-08_140311_rj1det_1.png" />
Captain America: The Winter Soilder
Action, Adventure</li>
	<li><img class="cover" alt="" src="jpg/2014-03-08_140248_fmufrz_1.png" />
Divergent
Action, Sci-Fi</li>
	<li><img class="cover" alt="" src="jpg/2014-03-08_140132_bcnfqk_1.png" />
RoboCop (2014)
Action, Crime</li>
	<li><img class="cover" alt="" src="jpg/2014-03-08_140329_aawn02_1.png" />
Transcendence
Action, Drama</li>
	<li><img class="cover" alt="" src="jpg/2014-03-08_140239_kyg9i7_1.png" />
Need For Speed
Action, Crime</li>
	<li><img class="cover" alt="" src="jpg/2014-03-08_140104_tdgzka_1.png" />
Pompeii
Action, Adventure</li>
	<li><img class="cover" alt="" src="jpg/2014-03-08_140412_oavbye_1.png" />
Sin City: A Dame To Kill For
Action, Crime</li>
	<li><img class="cover" alt="" src="jpg/2014-03-08_140339_wck2gw_1.png" />
X-Men: Days of Fury
Action, Adventure</li>
	<li><img class="cover" alt="" src="jpg/2014-03-08_140052_dq4dyx_1.png" />
The Amazing Spiderman
Action, Adventure</li>
	<li><img class="cover" alt="" src="jpg/2014-03-08_140248_fmufrz_1.png" />
Divergent
Action, Sci-Fi</li>
</ul>
<a class="load-more" href="#">Показать больше фильмов</a></div>
</div>
</div>
</div>
<pre>

 

Для каждого спана, у нас будет определенный класс, с указаниям параметров значения, мы будем использовать небольшие иконки для навигации.

Как создать адаптивный шаблон сайта на CSS3

Шаг 2. CSS

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

@sidebar-width: 250px;
@window-margin: 60px;
body {
 background: #FFF linear-gradient(to bottom, #3F567C, #B5CCC6) no-repeat;
 font-family: Open Sans, sans-serif;
}
a {
 text-decoration: none;
 transition-duration: .3s;
&:hover {
 transition-duration: .05s;
 }
}
.window-margin {
 max-width: 1200px;
 padding: @window-margin;
 margin: auto;
}
.window {
 margin: auto;
 border-radius: 5px;
 background: #FFF;
 overflow: hidden;
 position: relative;
 box-shadow: 0 0 5px rgba(0, 0, 0, .1);
.sidebar .top-bar, .main .top-bar {
 height: 65px;
 color: #FFF;
 }
.sidebar {
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 width: @sidebar-width;
 background: #24282C;
 transition-duration: .3s;
color: #DDD;
.top-bar {
 background: #3AB0FF;
 overflow: hidden;
.logo {
 float: left;
 font-family: Open Sans Condensed, sans-serif;
 font-size: 40px;
 line-height: 65px;
 margin-left: 20px;
 }
 }
.search-box {
 background: #373D41;
 padding: 20px;
 position: relative;
input {
 width: 170px;
 border: 0;
 padding: 10px 20px;
 border-radius: 50px;
 outline: none;
 color: #999;
 transition-duration: .3s;
&:focus {
 color: #333;
& ~ .fa {
 color: #999;
 }
 }
 }
.fa {
 position: absolute;
 top: 31px;
 right: 35px;
 color: #CCC;
 transition-duration: .3s;
 cursor: pointer;
 }
 }
.menu {
 padding-top: 20px;
.separator {
 border-top: 1px solid #111111;
 border-bottom: 1px solid #353535;
 margin: 20px;
 }
a {
 color: #DDD;
 text-decoration: none;
&:hover {
 color: #FFF;
 }
 }
.menu-name {
 text-transform: uppercase;
 padding: 0 20px;
 font-size: 14px;
 margin-bottom: 10px;
 }
& > ul.no-bullets > li a {
 &:before {
 content: none !important;
 }
 }
& > ul > li {
 list-style: none;
& > a {
 position: relative;
 top: -3px;
 font-size: 14px;
 padding: 8px 25px;
 display: block;
 font-weight: bold;
&:before {
 content: '';
 height: 9px;
 width: 9px;
 border-radius: 50px;
 display: inline-block;
 margin-right: 10px;
 box-shadow: inset 0 0 0 1px #EEE;
 }
 }
&.active {
 list-style-type: disc;
 color: #FF3A3A;
 padding-bottom: 10px;
& > a {
 padding-bottom: 0;
&:before {
 background: #FF3A3A;
 box-shadow: none;
 }
 }
ul {
 display: block;
 margin-left: 50px;
 margin-top: 5px;
li.active a {
 color: #FFF;
 font-weight: bold;
 }
li a {
 padding: 5px;
 display: block;
 font-size: 13px;
 color: #888;
&:hover {
 color: #FFF;
 }
 }
 }
 }
ul {
 display: none;
 }
 }
}
 }
.main {
 margin-left: @sidebar-width;
 transition-duration: .3s;
 position: relative;
.top-bar {
 background: #279CEB;
.top-menu {
 height: 65px;
 overflow: hidden;
.menu-icon {
 padding: 27px 20px 20px 18px;
 display: none;
 cursor: pointer;
 transition-duration: .3s;
&:hover {
 background: lighten(#3AB0FF, 5%);
 transition-duration: .05s;
 }
.line {
 height: 2px;
 width: 20px;
 background: #FFF;
 margin-bottom: 4px;
 }
 }
li {
 float: left;
 font-size: 14px;
&.active a, &.active a:hover {
 background: #3AB0FF;
 color: #FFF;
 font-weight: bold;
 }
 }
a {
 padding: 0 25px;
 color: #EEE;
 line-height: 65px;
 display: block;
&:hover {
 color: #FFF;
 background: fade(#3AB0FF, 35%);
 }
 }
 }
.profile-box {
 float: right;
 background: #3AB0FF;
 height: 65px;
 line-height: 65px;
 padding: 0 20px;
 cursor: pointer;
.circle {
 background: #FFF;
 height: 30px;
 width: 30px;
 border-radius: 50px;
 display: block;
 float: left;
 margin-top: 15px;
 }
.arrow {
 float: left;
 margin-left: 10px;
 line-height: 65px;
 }
 }
 }
 .featured-movie {
 position: relative;
.cover {
 width: 100%;
 display: block;
 }
.corner-title {
 position: absolute;
 top: 20px;
 left: 20px;
 text-transform: uppercase;
 color: #FFF;
 background: rgba(25,25,25,.3);
 padding: 10px;
 font-size: 13px;
 }
.bottom-bar {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 padding: 20px 30px;
 background: rgba(10,10,10,.8);
 color: #FFF;
 overflow: hidden;
.title-container {
 float: left;
 font-weight: 100;
 font-size: 40px;
.fa {
 margin-right: 10px;
 color: #FF3A3A;
 }
b {
 font-weight: 600;
 }
 }
.right {
 float: right;
 font-size: 14px;
 margin-top: 14px;
.stars {
 float: left;
 color: #F0C236;
 margin-right: 20px;
 }
.share {
 float: left;
 cursor: pointer;
.fa {
 margin-right: 5px;
 }
 }
 }
 }
 }
.movie-list {
 .title-bar {
 padding: 20px;
 border-bottom: 1px solid #DDD;
 overflow: hidden;
.left {
 float: left;
 font-size: 15px;
 text-transform: uppercase;
.grey {
 color: #999;
 }
.bold {
 font-weight: bold;
 }
p {
 display: inline-block;
 margin-right: 10px;
 }
 }
.right {
 float: right;
a {
 color: #999;
 margin-left: 10px;
&.blue {
 color: #279CEB;
 }
 }
 }
 }
.list {
 margin: 20px;
 margin-right: 0;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
li {
 flex: 0 0 130px;
 padding-bottom: 30px;
 margin-right: 20px;
 position: relative;
&:hover:after {
 opacity: 1;
 }
&:after {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 195px;
 content: '\f144';
 background: rgba(0,0,0,.3);
 border-radius: 5px;
 opacity: 0;
 color: #FFF;
 font-size: 40px;
 display: block;
 cursor: pointer;
 line-height: 195px;
 text-align: center;
 font-family: FontAwesome;
 font-style: normal;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 }
img {
 width: 130px;
 height: 195px;
 display: block;
 margin: 0 auto 5px auto;
 cursor: pointer;
 }
.title, .genre {
 text-overflow: ellipsis;
 overflow: hidden;
 white-space: nowrap;
 cursor: pointer;
 }
.title {
 font-weight: bold;
 font-size: 13px;
 margin-bottom: 4px;
 }
.genre {
 color: #999;
 font-size: 12px;
 }
 }
 }
.load-more {
 background: #EEE;
 padding: 15px;
 margin: 20px;
 border-radius: 5px;
 text-align: center;
 color: #666;
 display: block;
&:hover {
 background: #DDD;
 }
.fa {
 margin-left: 10px;
 }
 }
 }
}
}
@tablet-bk: (1100px + (@window-margin*2));
@media only screen and (max-width: @tablet-bk) {
.window > .sidebar {
 transform: translateX(-@sidebar-width);
 }
.window > .main {
 margin-left: 0;
 }
.window > .main .top-bar .top-menu .menu-icon {
 display: block;
 }
.sidebar-is-open {
 .window > .sidebar {
 transform: translateX(0);
 }
 .window > .main {
 transform: translateX(@sidebar-width);
 }
 }
}
@media only screen and(max-width: 960px) {
.window .main .featured-movie .bottom-bar {
 position: static;
.title-container {
 font-size: 25px;
 }
 }
}

 

Нами будет установлено множество медиа-запросов, это необходимо для адаптации шаблона под другие экраны.

Шаг 3. jQuery

Для плавной и корректной работы навигации при маленьком размере окна:

jQuery(document).ready(function($) {
$('a').on('click', function(e) {
 e.preventDefault();
 });
$('.trigger-sidebar-toggle').on('click', function() {
 $('body').toggleClass('sidebar-is-open');
 });
});

Источник: rudebox.org.ua

Previous Основы SEO для веб-дизайнеров
Next Создаем слайдер для сайта с эффектом 3D

Suggested Posts

Руководство по кастомным типам записей WordPress + спец плагин

ДИАГОНАЛЬНОЕ МЕНЮ НА CSS

SEOANALYZER — ПЛАГИН ДЛЯ SEO АНАЛИЗА САЙТОВ

Плавное увеличене изображения на CSS

Как бесплатно продвинуть блог

Модуль Ajax Quick checkout 6.4.0 для Opencart 2.x