Адаптивні html-блоки у вигляді цегляної кладки за допомогою CSS3

40

Напевно всі вже встигли звикнути до такого тренду у веб-дизайні як Masonry (в перекладі з анг. це цегляна кладка), по іншому його ще називають плитковий дизайн, цікавий спосіб виведення вмісту, що дозволяє раціонально використовувати весь наявний простір сайту. Найвідомішим прикладом використання плиткового дизайну, є, напевно, Googl+. Ну, а законодавцями і зачинателями цього дійства стали «м’якотілі», коли випустили у світ Windows8, де як раз і були вперше використані плитки з логотипами додатків і коротким змістом. Звичайно така методу застосовувалася і раніше, але все більше у вигляді експериментів розробників-ентузіастів.
Існують різні способи реалізації компактних html-блоків з вмістом у вигляді цегляної кладки, найпоширеніший, це використання спеціалізованих плагінів jQuery, наприклад скрипт David’a DeSandro, який так і називається Masonry (цегляна кладка). Розгорнутий мануал по установе, настроювання і роботи скрипта написав у свій час Kama, кому цікаво можете вивчити детально.
Ми ж сьогодні розглянемо не менш цікавий, а мій, звичайно ж, дуже суб’єктивний погляд, найцікавіший спосіб виведення вмісту у формі цегельної кладки, виключно засобами CSS, без підключення до роботи додаткових javascript плагінів і громіздких бібліотек.

Для початку дивимося приклад, а потім, докладно розберемо, що, куди і навіщо:

Адаптивные html-блоки в виде кирпичной кладки

ДемоСкачать

Як бачите, в таких компактних блоках, ви зможете розмістити все що завгодно, будь-який вміст, зображення, вбудований через iframe відео з будь-яких відео-хостингів, текстовий вміст, посилання, різні віджети, опис цінники товарів, і т. д. До того ж вам не доведеться піклуватися про розміри картинок або відеоплеєра з YouTube, наприклад, всі розміри задані в css, завдяки чому, медійний контент, автоматом підлаштується під батьківський контейнер, роль яких виконують звичні div-и з класом item.

Структура HTML


<div class="masonry">

<div class="item">
<img src="http://placehold.it/350x200">
<br>Тут розміщуєте короткий анонс статті, опис товару, картинки або відео... <a href="###">Детальніше »</a>
</div>
<div class="item">
<img src="http://placehold.it/250x250">
<br>Тут розміщуєте короткий анонс статті, опис товару, картинки або відео... <a href="###">Детальніше »</a>
</div>
<div class="item">
<img src="http://placehold.it/470x320">
<br>Тут розміщуєте короткий анонс статті, опис товару, картинки або відео... <a href="###">Детальніше »</a>
</div>
<div class="item">
<img src="http://placehold.it/250x150">
<br>Тут розміщуєте короткий анонс статті, опис товару, картинки або відео... <a href="###">Детальніше »</a>
</div>
<div class="item">
<img src="http://placehold.it/300x250">
<br>Тут розміщуєте короткий анонс статті, опис товару, картинки або відео... <a href="###">Детальніше »</a>
</div>
<div class="item">
<img src="http://placehold.it/450x300">
<br>Тут розміщуєте короткий анонс статті, опис товару, картинки або відео... <a href="###">Детальніше »</a>
</div>
<div class="item">
<img src="http://placehold.it/250x200">
<br>Тут розміщуєте короткий анонс статті, опис товару, картинки або відео... <a href="###">Детальніше »</a>
</div>
<div class="item">
<img src="http://placehold.it/250x150">
<br>Тут розміщуєте короткий анонс статті, опис товару, картинки або відео... <a href="###">Детальніше »</a>
</div>
<div class="item">
<img src="http://placehold.it/250x150">
<br>Тут розміщуєте короткий анонс статті, опис товару, картинки або відео... <a href="###">Детальніше »</a>
</div>
<div class="item">
<img src="http://placehold.it/280x190">
<br>Тут розміщуєте короткий анонс статті, опис товару, картинки або відео... <a href="###">Детальніше »</a>
</div>
<div class="item">
<img src="http://placehold.it/500x400">
<br>Тут розміщуєте короткий анонс статті, опис товару, картинки або відео... <a href="###">Детальніше »</a>
</div>

</div>


Тут розміщуєте короткий анонс статті, опис товару, картинки або відео… Докладніше »


Тут розміщуєте короткий анонс статті, опис товару, картинки або відео… Докладніше »


Тут розміщуєте короткий анонс статті, опис товару, картинки або відео… Докладніше »


Тут розміщуєте короткий анонс статті, опис товару, картинки або відео… Докладніше »


Тут розміщуєте короткий анонс статті, опис товару, картинки або відео… Докладніше »


Тут розміщуєте короткий анонс статті, опис товару, картинки або відео… Докладніше »


Тут розміщуєте короткий анонс статті, опис товару, картинки або відео… Докладніше »


Тут розміщуєте короткий анонс статті, опис товару, картинки або відео… Докладніше »


Тут розміщуєте короткий анонс статті, опис товару, картинки або відео… Докладніше »


Тут розміщуєте короткий анонс статті, опис товару, картинки або відео… Докладніше »


Тут розміщуєте короткий анонс статті, опис товару, картинки або відео… Докладніше »

Контейнери, в яких розміщується необхідний контент, оформлені за допомогою властивостей css3 у вигляді прямокутних плиток з легкої зовнішньої тінню box-shadow і змінами алгоритму розрахунку ширини та висоти елемента box-sizing, з присвоєним значенням border-box.

Для формування зовнішнього вигляду блоків і побудови їх в потрібний нам макет у формі окремих плиток, використовується мінімум коду css, нічого зайвого. Короткі коментарі до властивостей, які я прописав безпосередньо в исходниках, допоможуть вам швидше розібратися і, пі бажанні налаштувати блоки під свій вишуканий смак))).

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;
}
}

/* ————- Контейнер з адаптивними блоками————- */
.masonry {
margin: 1.5 em 0;
padding: 0;
column-gap: 1.5 em; /* Загальна відстань між колонками */
font-size: .85em;
-moz-column-gap: 1.5 em; /* Відстань між колонками для Firefox */
-webkit-column-gap: 1.5 em; /* Відстань між колонками для Safari, Chrome і iOS */
}/* Елементи у вигляді плиток з вмістом */
.item {
display: inline-block;
background: #fff;
padding: 1em;
margin: 0 0 1.5 em;
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;
}
}

У демонстраційному прикладі я помістив контейнер div class=”masonry з адаптивними блоками на борту, всередині загального, батьківського контейнера div class=”wrapper”, який зазвичай використовується на сайтах для розміщення вмісту сторінок. Якщо ви вирішите застосувати ці адаптивні блоки не у вигляді окремої сторінки, а наприклад в основний колонці на головній сторінці, або для виведення коротких анонсів статей, опису розділів сайту, вам достатньо використовувати div class=”masonry” з вбудованими в нього окремими блоками div class=”item”. Блоку відмінно, на повному автоматі, підлаштуються під розмір батьківського контейнера.
Адаптивність всієї конструкції досягається за допомогою спеціальних меду-запитів @media для різних типів носіїв, тобто розміру їх екранів. В процесі зменшення або збільшення розміру екрану, позиція плиток і їх розмір будуть змінюватися, в залежності від пристрою, на якому здійснюється перегляд. Так наприклад, при перегляді на пристроях з розміром екрану в 400px, плитки вишикуються в дві колонки, а на моніторах більше 1100px, блоки виведуться вже п’ять колонок. Процентне значення ширини width: 100%; плиток, дозволяє здійснити плавний перехід і зміна розміру, в залежності від типів користувацьких пристроїв.

Де застосовувати такий спосіб виведення інформації? Та де завгодно. У вас на блозі або на сайті, є рубрики(категорії), закладіть представницьку картинку, відповідну тематиці категорії, додайте короткий опис, приправте все це ссилочку на сторінку цієї самої рубрики, і додайте все це справа на головній сторінці. Або ж, організуйте висновок новин, коротких анонсів самих свіжих записів блогу, опис товарів в інтернет-магазинах і т. д. і т. п. Варіантів використання даного методу маса. Ось тільки як-то в самого ще руки не дійшли, реорганізувати структуру свого блогу. Сподіваюся, ті кому сподобався цей спосіб, будуть жвавішим мене та використовують адаптивні боки у вигляді плиток на своїх нових і вже працюють інтернет-проектах.

Обкатати метод, поекспериментувати з параметрами, ви можете безпосередньо в редакторі коду онлайн: Тынц >>. Всі вихідні коди, як на долоні, доступні до прямої правці, і в живу, одразу видно результат.

З повагою, Андрій.

Удачі! Буду дуже вдячний, якщо поділитеся посиланням на запис у своїх соц. мережах: