Адаптивные html-блоки разных размеров с помощью CSS3
Наверняка все уже успели привыкнуть к такому тренду в веб-дизайне как Masonry (в переводе с анг. это кирпичная кладка), по другому его ещё называют плиточный дизайн, интересный способ вывода контента, позволяющий рационально использовать всё имеющееся пространство сайта. Самым известным примером использования плиточного дизайна, является, наверное, Google+. Ну, а законодателями и зачинателями сего действа стали «мягкотелые», когда выпустили в свет Windows8, где как раз и были впервые использованы плитки с логотипами приложений и кратким содержанием. Конечно такая метода применялась и раньше, но всё больше в виде экспериментов разработчиков-энтузиастов.
Существуют различные способы реализации компактных html-блоков с содержанием в виде кирпичной кладки, самый распространенный, это использование специализированных плагинов jQuery, например скрипт David’a DeSandro, который так и называется Masonry (кирпичная кладка). Развернутый мануал по установе, настройке и работе скрипта написал в своё время Kama, кому интересно можете изучить подробно.
Для начала смотрим пример, а потом, подробнейшим образом разберём, что, куда и зачем:
Как видите, в таких компактных блоках, вы сможете размещать всё что угодно, любой контент, изображения, встроенное через iframe видео с любых видео-хостингов, текстовое содержание, ссылки, различные виджеты, описание ценники товаров, и т.д. К тому же вам не придется заботиться о размерах картинок или видеоплеера с YouTube, например, все размеры заданы в css, благодаря чему, медийный контент, автоматом подстроится под родительский контейнер, роль которых выполняют привычные div-ы с классом item.
HTML структура
<!-- Контейнер с адаптиными блоками -->
<div>
<!-- Адаптивные блоки с содержанием -->
<div>
<img src="http://placehold.it/350x200">
<br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="ссылка на полную запись">Подробнее »</a>
</div>
<div>
<img src="http://placehold.it/250x250">
<br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="ссылка на полную запись">Подробнее »</a>
</div>
<div>
<img src="http://placehold.it/470x320">
<br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="ссылка на полную запись">Подробнее »</a>
</div>
<div>
<img src="http://placehold.it/250x150">
<br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="ссылка на полную запись">Подробнее »</a>
</div>
<div>
<img src="http://placehold.it/300x250">
<br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="ссылка на полную запись">Подробнее »</a>
</div>
<div>
<img src="http://placehold.it/450x300">
<br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="ссылка на полную запись">Подробнее »</a>
</div>
<div>
<img src="http://placehold.it/250x200">
<br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="ссылка на полную запись">Подробнее »</a>
</div>
<div>
<img src="http://placehold.it/250x150">
<br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="ссылка на полную запись">Подробнее »</a>
</div>
<div>
<img src="http://placehold.it/250x150">
<br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="ссылка на полную запись">Подробнее »</a>
</div>
<div>
<img src="http://placehold.it/280x190">
<br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="ссылка на полную запись">Подробнее »</a>
</div>
<div>
<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;
}
}
В демонстрационном примере я поместил контейнер div class=»masonry с адаптивными блоками на борту, внутри общего, родительского контейнера div class=»wrapper», который обычно используется на сайтах для размещения контента страниц. Если вы решите применить эти адаптивные блоки не в виде отдельной страницы, а например в основной колонке, на главной странице, или для вывода кратких анонсов статей, описания разделов сайта, вам достаточно использовать div class=»masonry» со встроенными в него отдельными блоками div class=»item». Блоку отлично, на полном автомате, подстроятся под размер родительского контейнера.
Адаптивность всей конструкции достигается посредством специальных меда-запросов @media для различных типов носителей, то-бишь размеров их экранов. В процессе уменьшения или увеличения размера экрана, позиция плиток и их размер будут изменяться, в зависимости от устройства, на котором осуществляется просмотр. Так например, при просмотре на устройствах с размером экрана в 400px, плитки выстроятся в две колонки, а на мониторах больше 1100px, блоки выведутся уже в пять колонок. Процентное значение ширины width: 100%; плиток, позволяет осуществить плавный переход и изменение размера, в зависимости от типов пользовательских устройств.
Где применять такой способ вывода информации? Да где угодно. У вас на блоге или сайте, есть рубрики(категории), заделайте представительную картинку, соответствующую тематике категории, добавьте небольшое описание, приправьте всё это ссылочкой на страницу этой самой рубрики, и разместите всё это дело на главной странице. Или же, организуйте вывод новостей, кратких анонсов самых свежих записей блога, описание товаров в интернет магазинах и т.д. и т.п. Вариантов использования данного метода масса. Вот только как-то у самого ещё руки не дошли, реорганизовать структуру своего блога. Надеюсь, те кому приглянулся этот способ, будут порасторопнее меня и используют адаптивные боки в виде плиток на своих новых и уже работающих интернет-проектах.
Источник: http://dbmast.ru/adaptivnye-html-bloki-v-vide-kirpichnoj-kladki-s-pomoshhyu-css3.
Рубрики: Разработка
Тэги: bootstrap 3 | html
Адаптивные встроенные блоки HTML + CSS
Это встроенный блок для сайтов, которые идут в адаптивной верстке и созданы на чистом CSS и HTML, где отлично смотрится для вывода информации. Давайте изначально кратко про блоки, которые вы вероятно встречали, так как они идут в разном дизайне. Здесь он отлично выстроен, где в левом верхнем углу, вы как веб-разработчик можете поставить шрифтовую иконку, которая соответствует материалу, что находится в блоке. А по сути там идет только стилистика с изображением, которое можно красиво оформить под свой сайт.Здесь выставил картинки из фильма «Зелена стрела», что пришлось под эту гамму цвета всю основу, вплоть до фона выставлять. Хотя на светлом сайте не исключаю увидеть тени и разные элементы. И так, вообще на сайте такие блоки, так как их можно разместить под шапкой, и уже самостоятельно в них поместить картинки с переходом, что в большинстве можно видеть на официальных ресурсах, что предлагают услуги.
Ведь нумерация, что здесь идет, то эта отличная идея для сортировки услуг по пакетам. Также вижу, что они красиво станут смотреться в кино сайтах, да вообще под любую тематику отличный вариант эти адаптивные блоки, что идут в горизонтальном виде. Так как одним из распространенных применений блоков является отображение элементов списка по горизонтали.
Как пример, просто изменил фон, что сразу ярче стали смотреться:
Приступаем к установке:
HTML
Код
<div>
<div>
<div>
<div>
<img src=»http://zornet.ru/_fr/81/3056119.jpg» alt=»ZorNet.Ru — сайт для вебмастера»>
<div>1</div>
</div>
<p>ZorNet.Ru — первый</p>
</div>
<div>
<div>
<img src=»http://zornet.ru/_fr/81/1935177.jpg» alt=»Интересные решения для сайта»>
<div>2</div>
</div>
<p>Актуальный материал</p>
</div>
<div>
<div>
<img src=»http://zornet.ru/_fr/81/8179981.jpg» alt=»Стили CSS»>
<div>3</div>
</div>
<p>Здесь идет заголовок</p>
</div>
<div>
<div>
<img src=»http://zornet.ru/_fr/81/0041951.jpg» alt=»ZorNet.Ru — интернет портал»>
<div>4</div>
</div>
<p>Здесь ключевое слово</p>
</div>
</div>
</div>
CSS
Код
.kacagainsuvod {max-width: 1085px;
margin: 0 auto;
padding: 50px 0;
}
.kedaunbaes-ugasonug {
text-align: center;
}
.ganvesem-atekacuvos {
display: inline-block;
vertical-align: top;
margin: 0 30px 0 0;
width: 217px;
line-height: 1.4;
letter-spacing: normal;
color: #eae2e2;
font-size: 14px;
font-weight: bold;
}
.ganvesem-atekacuvos:last-child {
margin: 0;
}
.ganvesem-atekacuvos .kasted-kuvam {
margin: 0 auto 17px;
max-width: 100%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
position: relative;
height: 321px;
border: 2px solid #bbafaf;
}
.ganvesem-atekacuvos img {
display: block;
height: 321px;
}
.ganvesem-atekacuvos .vadekin {
width: 50px;
height: 50px;
-webkit-border-radius: 0 0 10px 0;
-moz-border-radius: 0 0 10px 0;
border-radius: 0 0 10px 0;
background-color: #dc6e3c;
font-weight: 700;
font-size: 25px;
line-height: 50px;
color: #efecec;
text-align: center;
position: absolute;
top: 0;
left: 0;
text-shadow: 0 1px 0 #4e4747;
}
@media screen and (max-width: 991px) {
.ganvesem-atekacuvos {
margin: 0 30px 30px;
}
.ganvesem-atekacuvos:last-child {
margin: 0 30px 0;
}
}
Если смотреть по конструкции, то безусловно больше по своему формату похоже на вид материалов, который идет в колонку. Но есть одно отличие, так как здесь ниже можно описать кратко по теме или поставить ключевое слова.
Или создать все вместе для большего понимания, что в этом блоке размещено, где горизонтальное положение даст больше разворота по установке, так как под вверх сайта, это под шапкой есть тема установить, и аналогично в самом низу, перех элементом низ сайта, с выводом на отдельную страницу.
Демонстрация
Адаптивный блок с контентом с помощью CSS
Это красиво созданные блоки, плюс они адаптивны под мобильные аппараты, на которых можно разместить различную информацию на главной странице. Безусловно вы встречали такой стили на разных официальных сайтах, где больше всего под тематику услуги были ресурсы. Здесь можно разделять блоки реагирующего контента с несколькими эффектами на него, которые оригинально выглядят на любом тематическом сайте.В этом сообщении вы увидите, что в блоке содержимого наведите указатель мыши, и значок будет увеличен, это может быть хорошим вариантом для вашего следующего проекта по его реализации. Так как очень удобно расписать очень много материала в таких блоках, что можно каждому задать свой оттенок цвета. По своей форме они больше похоже на вид материалов, что идут в несколько колонок.
Так как здесь по функциям все есть, кроме изображения, что реально здесь оно лишнее. Так как вместо его идет шрифтовая кнопка, которая под собой уже подразумевает, какой это раздел или категория. Также есть название и можно прописать краткое описание, где при наведении будет автоматически срабатывать эффект смены палитры, что можно задать любой оттенок цвета.
Проверяя на работоспособность, что ниже будет ссылка на Demi страницу, здесь условные картинки, что сняты с мобильных аппаратах, на разном разрешение по ширине.
1. Это примерно планшет;
2. Вид со смартфона;
3. Так будет смотреться с экрана сотового телефона;
Переходя к материалу, где найдете три вещи:
1. Блок реагирующего содержимого или чувствительная сетка;
2. Масштабируемые значки Svg При наведении;
3. Фоновый цвет Анимация при наведении;
Теперь разберемся, как интегрировать этот блок реагирующего контента с вашим сайтом на ваш сайт:
Здесь идет код HTML, который если весь разворачивать, тот будет большим, что его расположил в текстовом документе, что можно скачать, также там стили CSS аналогично присутствуют.
Наряду с этим вы также узнаете, как использовать psuedo elemetns для создания стрелки и обеспечения различного цвета, где также предоставляется цвет качества материала для каждого блока контента, под каждый фон блока содержимого.
Вы можете использовать этот блок контента на своем сайте, чтобы сделать его более эффективным и красивым по форме. Также разместить свою службу с помощью этой гибкой сетки, чтобы обеспечить быстрый просмотр вашего сервиса, который вы предоставляете вместе с относительными значками, можно легко найти из значков.
Демонстрация
Так изначально идет, где как можно заметить. все яркие оттенки выстроены.
Адаптивные html-блоки в виде кирпичной кладки с помощью CSS3 ~ Страницы Интернета
Наверняка все уже успели привыкнуть к такому тренду в веб-дизайне как Masonry (в переводе с анг. это кирпичная кладка), по другому его ещё называют плиточный дизайн, интересный способ вывода контента, позволяющий рационально использовать всё имеющееся пространство сайта. Самым известным примером использования плиточного дизайна, является, наверное, Googl+. Ну, а законодателями и зачинателями сего действа стали «мягкотелые», когда выпустили в свет Windows8, где как раз и были впервые использованы плитки с логотипами приложений и кратким содержанием. Конечно такая метода применялась и раньше, но всё больше в виде экспериментов разработчиков-энтузиастов.Мы же сегодня, рассмотрим не менее интересный, а намой, конечно же очень субъективный взгляд, самый интересный способ вывода контента в форме кирпичной кладки, исключительно средствами CSS, без подключения к работе дополнительных javascript плагинов и громоздких библиотек.
Для начала смотрим пример, а потом, подробнейшим образом разберём, что, куда и зачем:
Как видите, в таких компактных блоках, вы сможете размещать всё что угодно, любой контент, изображения, встроенное через iframe видео с любых видео-хостингов, текстовое содержание, ссылки, различные виджеты, описание ценники товаров, и т.д. К тому же вам не придется заботиться о размерах картинок или видеоплеера с YouTube, например, все размеры заданы в css, благодаря чему, медийный контент, автоматом подстроится под родительский контейнер, роль которых выполняют привычные div-ы с классом item.
HTML структура
<!-- Контейнер с адаптиными блоками -->
<div>
<!-- Адаптивные блоки с содержанием -->
<div>
<img src="http://placehold.it/350x200">
<br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="ссылка на полную запись">Подробнее »</a>
</div>
<div>
<img src="http://placehold.it/250x250">
<br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="ссылка на полную запись">Подробнее »</a>
</div>
<div>
<img src="http://placehold.it/470x320">
<br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="ссылка на полную запись">Подробнее »</a>
</div>
<div>
<img src="http://placehold.it/250x150">
<br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="ссылка на полную запись">Подробнее »</a>
</div>
<div>
<img src="http://placehold.it/300x250">
<br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="ссылка на полную запись">Подробнее »</a>
</div>
<div>
<img src="http://placehold.it/450x300">
<br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="ссылка на полную запись">Подробнее »</a>
</div>
<div>
<img src="http://placehold.it/250x200">
<br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="ссылка на полную запись">Подробнее »</a>
</div>
<div>
<img src="http://placehold.it/250x150">
<br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="ссылка на полную запись">Подробнее »</a>
</div>
<div>
<img src="http://placehold.it/250x150">
<br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="ссылка на полную запись">Подробнее »</a>
</div>
<div>
<img src="http://placehold.it/280x190">
<br>Здесь размещаете краткий анонс статьи, описание товара, картинки или видео... <a href="ссылка на полную запись">Подробнее »</a>
</div>
<div>
<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;
}
} В демонстрационном примере я поместил контейнер divwrapper", который обычно используется на сайтах для размещения контента страниц. Если вы решите применить эти адаптивные блоки не в виде отдельной страницы, а например в основной колонке, на главной странице, или для вывода кратких анонсов статей, описания разделов сайта, вам достаточно использовать div со встроенными в него отдельными блоками div. Блоку отлично, на полном автомате, подстроятся под размер родительского контейнера.
Адаптивность всей конструкции достигается посредством специальных меда-запросов @media для различных типов носителей, то-бишь размеров их экранов. В процессе уменьшения или увеличения размера экрана, позиция плиток и их размер будут изменяться, в зависимости от устройства, на котором осуществляется просмотр. Так например, при просмотре на устройствах с размером экрана в 400px, плитки выстроятся в две колонки, а на мониторах больше 1100px, блоки выведутся уже в пять колонок. Процентное значение ширины width: 100%; плиток, позволяет осуществить плавный переход и изменение размера, в зависимости от типов пользовательских устройств.
Где применять такой способ вывода информации? Да где угодно. У вас на блоге или сайте, есть рубрики(категории), заделайте представительную картинку, соответствующую тематике категории, добавьте небольшое описание, приправьте всё это ссылочкой на страницу этой самой рубрики, и разместите всё это дело на главной странице. Или же, организуйте вывод новостей, кратких анонсов самых свежих записей блога, описание товаров в интернет магазинах и т.д. и т.п. Вариантов использования данного метода масса. Вот только как-то у самого ещё руки не дошли, реорганизовать структуру своего блога. Надеюсь, те кому приглянулся этот способ, будут порасторопнее меня и используют адаптивные боки в виде плиток на своих новых и уже работающих интернет-проектах.
Обкатать метод, поэкспериментировать с параметрами, вы можете непосредственно в редакторе кода онлайн: Тынц >>. Все исходники, как на ладони, доступны к прямой правке, и в живую, сразу виден результат.С уваже