2014
4
Окт

HTML-блоки для сайта



Всегда хочется рационально располагать материал на сайте. Вы обращали внимание как расположен материал на страницах Googl+? Такое расположение иначе еще называется плиточный дизайн. Впервые такое расположение материала использовали при разработке Windows8. Именно с этой версии стали использовать плиточное расположение материала и краткое его содержание. Для создания таких блоков используют специальные плагины jQuery, одним из таких является David'a DeSandro, другим его названием является "Кирпичная кладка". Но сейчас уже можно вывести контент в форме кладки с помощью средств CSS, без javascript.

HTML-блоки

Перед вами блок, в котором можно располагать любой материал с использованием изображений, любое видео через iframe, любой текст, описание товара и так далее. Изображения в данном случае не обязательно подгонять по размеру, так как все размеры задаются в CSS. Контейнеры выполняют с помощью div и класс item.


HTML страница


<!-- Контейнер с адаптиными блоками --> <div class="masonry"> <!-- Адаптивные блоки с содержанием --> <div class="item"> <img src="http://valvas.ru/380x280"> <br>Размещаете краткий анонс статьи, картинки или видео... <a href="#">Подробнее »</a> </div> <div class="item"> <img src="http://valvas.ru/220x220"> <br>Размещаете краткий анонс статьи, картинки или видео... <a href="#">Подробнее »</a> </div> <div class="item"> <img src="http://valvas.ru/440x300"> <br>Размещаете краткий анонс статьи, картинки или видео... <a href="#">Подробнее »</a> </div> <div class="item"> <img src="http://valvas.ru/250x150"> <br>Размещаете краткий анонс статьи, картинки или видео... <a href="#">Подробнее »</a> </div> <div class="item"> <img src="http://valvas.ru/300x250"> <br>ЗРазмещаете краткий анонс статьи, картинки или видео... <a href="#ь">Подробнее »</a> </div> <div class="item"> <img src="http://valvas.ru/450x300"> <br>Размещаете краткий анонс статьи, картинки или видео... <a href="#">Подробнее »</a> </div> <div class="item"> <img src="http://valvas.ru/250x200"> <br>Размещаете краткий анонс статьи, картинки или видео... <a href="#">Подробнее »</a> </div> <!-- Конец адаптивных блоков с содержанием --> </div> <!-- Конец контейнера с адаптивными блоками -->

Для размещения необходимого контента используются контейнеры, оформленные с помощью CSS3. Они представлены в виде плиток прямоугольной формы, имеют легкую тень по контуру box-shadow , алгоритм расчета высоты и ширины элемента задан свойством box-sizing, с присвоением значения border-box.

Контент страниц размещаем с использованием родительского контейнера div class="wrapper", внутри которого размещаем контейнер div class="masonry с адаптивными блоками.

При размещении адаптивных блоков в колонке главной страницы или для описания разделов сайта используем div class="masonry" со встроенными в него отдельными блоками div class="item".


CSS Стили


/* ------------- Контейнер с адаптивными блоками------------- */ .masonry { margin: 1.5em 0; padding: 0; column-gap: 1.5em; /* Общее расстояние между колонками */ font-size: .85em; -moz-column-gap: 1.5em; /* Расстояние между колонками для Firefox */ -webkit-column-gap: 1.5em; /* Расстояние между колонками для Safari, Chrome и iOS */ } /* Элементы в виде плиток с содержанием */ .item { display: inline-block; background: #fff; padding: 1em; margin: 0 0 1.5em; width: 100%; box-sizing: border-box; /* Изменения алгоритма расчета ширины и высоты элемента.*/ -moz-box-sizing: border-box; /* Для Firefox */ -webkit-box-sizing: border-box; /* Для Safari, Chrome, iOS иAndroid */ box-shadow: 2px 2px 4px 0 #ccc; /* Внешняя тень плиток */ } /* Стили картинок, видое и фреймов внутри адаптивных плиток */ img, iframe { max-width: 100%; height: auto; display: block; } /* Стили ссылок внутри плиток */ .item a { text-decoration: none; color: #359CC6; margin: 0 10px; } /* Стили ссылок при наведении */ .item a:hover { color: #E88F00; border-bottom: 1px dotted #9F1D35; } /* Медиа-запросы для различных размеров адаптивного макета */ @media only screen and (min-width: 400px) { .masonry { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } } @media only screen and (min-width: 700px) { .masonry { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } } @media only screen and (min-width: 900px) { .masonry { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; } } @media only screen and (min-width: 1100px) { .masonry { -moz-column-count: 5; -webkit-column-count: 5; column-count: 5; } } @media only screen and (min-width: 1280px) { .wrapper { width: 1260px; } }

Использование ключевого слова @media для разных типов носителей, то есть размеров экранов, позволяет создать адаптивность конструкции. При изменении размера экрана, позиция плиток и размер соответственно будут меняться. На экране с размером 500 пикселей плитки располагаются в два столбика, с размером 1100 пикселей – в пять. Изменять размер и делать плавный переход позволяет значение ширины width: 100%; плиток.

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