» »

Адаптивный вид материалов для каталогов сайта


Адаптивный вид материалов для каталогов сайта

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

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

Вообщем выкладываю что получилось, сам вид материалов минималистичен (вся информация выводится при наведении курсора) код вроде понятный для тех кто переделает под себя.

HTML вид материалов:
Код

<div class="block-type">
<div class="hover-effect">
<div class="img-type" style="background-image: url('$IMG_URL1$')">
<div class="caption">
<?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?>  
<h4>$TITLE$</h4>
<p><?substr($MESSAGE$,0,150)?> ...</p>
<a class="btn" href="$ENTRY_URL$" title="Подробнее">Подробнее</a>
</div>
</div>
</div>
</div>


CSS стили:
Код

.block-type {
  width:48%;
  float:left;
  margin: 1%;
}
.img-type {
  z-index:1;
  border: 1px solid #363636;
  border-radius: 5px;
  display: block;
  position: relative;
  margin: 0;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -moz-box-shadow:0 5px 5px #000;
  box-shadow:0 5px 5px #000;
-webkit-box-shadow:0 5px 5px #000;
}
.hover-effect {
  position: relative;
}  
.hover-effect img {
  width: 100%;
  height: 100%;
}
.hover-effect .caption {
  position: absolute;
  top: 0;
  left: 0px;
  background: rgba(0,0,0,0.7);
  width: 100%;
  height: 100%;
  color: #FFFFFF;
  opacity: 0;
  -o-transition: all 0.2s linear 0s;
  -moz-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  -ms-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
.hover-effect .caption h4 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid gray;
  padding-bottom: 5px;
  margin: 5px;
  -webkit-transform: scale(0.25);
  -moz-transform: scale(0.25);
  -ms-transform: scale(0.25);
  -o-transform: scale(0.25);
  transform: scale(0.25);
  -o-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -webkit-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.hover-effect .caption p {
  margin: 5px;
  padding: 5px;
  text-align: left;
  -webkit-transform: scale(0.25);
  -moz-transform: scale(0.25);
  -ms-transform: scale(0.25);
  -o-transform: scale(0.25);
  transform: scale(0.25);
  -o-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -webkit-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.hover-effect .caption a.btn {
  width: 80px;
  text-align: center;
  display: block;
  background: #68432d;
  color: #FFFFFF;
  padding: 2px 5px;
  border-radius: 5px;
  margin: 0px auto 0px auto;
  -webkit-transform: scale(0.25);
  -moz-transform: scale(0.25);
  -ms-transform: scale(0.25);
  -o-transform: scale(0.25);
  transform: scale(0.25);
  -o-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -webkit-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.hover-effect:hover .caption {
  opacity: 1;
}
.hover-effect:hover .caption h4,
.hover-effect:hover .caption p,
.hover-effect:hover .caption a.btn {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
@media screen and (min-width:240px) and (max-width:480px) {
.block-type {width:98%;float:none;}
}  


Добавлю что в конце сделал медиазапрос после 480px, изначально материал идёт в две колонки а вот на экранах мобильных устройств ниже 480px уже будет одна колонка. Сделано для того чтобы во первых на маленьких экранах можно было уместить всю информацию по файлу, разглядеть само изображение и прочитать текст)))

Извиняюсь что не сделал Демо а только скриншоты.
Скриншоты с Responisator:

вид материала сайта
стильный вид материала для сайта
31.05.2016 Просмотров: 584 Комментарий: (25)

Поделиться в социальных сетях

Материал разместил

Комментарий: 25
Kosten
Kosten 31.05.2016 13:341
0
Angerfist, реально впечатляет вид материала, который уже настроен под мобильные устройства, не можете скинуть демо, чтоб главное изображение больше сделал.
Angerfist
Angerfist 31.05.2016 13:413
0
Извини я не делал демо, протестировал просто и удалил потом
tsakonter
tsakonter 31.05.2016 13:444
0
Angerfist, если у меня CEO не подключен, могу же я на каталоге файлов вывести краткое, чтоб оно показывало на вид материала?
Angerfist
Angerfist 31.05.2016 14:137
0
Извини я вопрос не понял, а если ты про Демо в отдельном html файле в корне сайта то по моему влетает в поиск...
Maryges
Maryges 31.05.2016 16:3313
0
Что то подобное видел на одном сайте, он не под uCoz тематику сделан, а как блог, и там много чего интересного, сайт dbmast.ru, что можно очень много для сайта найти, не сочтите за рекламу, просто вижу с этого сайта файлы и источник на них.
Kosten
Kosten 31.05.2016 16:3914
+4
Maryges, но здесь вы Америку не открыли, там иногда беру материал, что нравится, он всегда рабочий и есть на некоторых, где на демо файл можно взять и самому не делать.

Просто по юкоз сайту уже редко хожу, чтоб найти и переделать что то, а сейчас больше по таким блогам, так как сейчас что CSS хорошо подходит на конструктор, чего раньше не замечал, но видать после обновлений.
feliksteg
feliksteg 31.05.2016 16:4515
0
Так заметно, сейчас хоть статьи появляются и хорошо, что сами пишите. Просто как раньше на одних файлах не раскрутить сайт. Это повезло тем, кто раньше, как конструктор появился и они описание почти не делали так название и пару слов и что главное в топы попадали и сейчас там, так немного поместили, но в десятке ровно находятся.
Angerfist
Angerfist 31.05.2016 17:2716
+1
Знаю этот сайт тоже уже давно, частенько захожу туда чтобы найти что то новое для себя на его уроках и примерах, если схожее нашёл что то в коде то наверное реализация адаптивности в процентах(и то придумано не ими) а сам эффект я где то давал ссылку на учебник по CSS3 оттуда примеры беру и потом всё в одну кучу смешиваю)))
Scheme
Scheme 31.05.2016 13:392
0
Вот так нужно файлы закидывать на сайт, все понятно написано, и все представлено в скринах. Но думаю на вид материала можно и demo сделать, но очень кто редко делает, этот точно пригодится +5.
Kosten
Kosten 31.05.2016 13:545
0
Поставил на тестовый сайт, реально круто смотрится, сейчас скрин скину на главную, чтоб понятнее было. Также есть тени, если на светлый шаблон ставить, которые будут в низу.
Canon
Canon 31.05.2016 14:076
0
Сейчас много можно заметить, что на игровых сайтах такой вид материала ставят, просто есть у него небольшие преимущества, это как можно больше вывести на главной, и сам формат уже смотрится оригинально.
feliksteg
feliksteg 31.05.2016 14:158
+3
Этот вид материала мне напоминает один информер, который недавно на сайте был представлен. Просто он переделал сейчас вид материала и как видно сразу на его адаптацию сделано, что очень хорошо. А по ДЕМО, не понимаю как можно его поставить, в этом случай нужно на сам модуль установить, и сами видите, что установка простая, не чего в корень сайта не нужно кидать. У кого есть тестовый или просто сайт, то можете на время поставить и посмотреть все плюсы и минусы. Так как ставил, почти все устроило, только вот кнопку в другой цвет можно аоменять, сейчас она темно коричневой идеи, но смотря у кого какой дизайн. Ставил примерно на такой шаблон и шел в 2 колонки.
Kosten
Kosten 31.05.2016 14:419
0
Для этого и идет стили, где самому можно настроить по дизайн.
Сафрон
Сафрон 31.05.2016 16:2012
+4
Но так сделано в стилях, видать авто прописали, если и будет место, то в 3 будет. Но меня другое, вот если такой материал постоянно будет, а имею веду, что он адаптирован, то кто этим занимается на услугах, может пролететь. Ведь согласитесь, вы ставите шаблон от uCoz и думаете сразу где взять вид материалов, но которые в сети, те не адаптированные под мобильные устройства, а вот этот и по дизайн очень прилично смотрится и все сделано, только и остается поставить.
Angerfist
Angerfist 31.05.2016 17:3917
0
Ну да, эффект авто адаптивности под ширину засчёт процентного соотношения размеров в стилях, а 3 колонки если нужно то менять надо width:48% хотя бы на 30%, почему я ширину не 50% и 100% прописал, потому что margin отступы сделал 1%.
Сопрано
Сопрано 31.05.2016 15:3410
0
Это можно поставить шаблон от системы конструктора и в него этот вид материалов, и ваш сайт полностью адаптирован.
Scheme
Scheme 31.05.2016 16:1611
+2
Почему вы так считаете, что только такой вид материала, может подойти только под игровые тематики. Здесь с вами могу поспорить, так как можно вроде этого по дизайн, встретить и совершено на другой теме и отлично стоит на сайте, все под сайт основного стиля сделан.
avatar
Edo2649 31.05.2016 18:3518
-2
мне вы не видите картинку http://prntscr.com/ban9ue
Kosten
Kosten 31.05.2016 18:3819
0
Что за картинку, проверено на тестовом сайте, все отлично работает, проверял на каталоге файлов.
Angerfist
Angerfist 31.05.2016 19:0020
+2
33.3% процента много выставили, отступы margin я делал 1%, поэтому если 3 колонки то прикиньте хотя бы 30%, ну и в описании я писал про формат изображений, если 3 колонки будет не очень пропорционально это раз) А два то что в стилях указали проценты поэтому в настройках модуля количество колонок нужно оставить 1-одну, так как я понял у вас модуль онлайн игры и если это так то попробуйте ещё вместо $IMG_URL1$ вывести $SCREEN_URL$
avatar
Edo2649 01.06.2016 00:3224
0
Спасибо! biggrin

Kosten
Kosten 01.06.2016 00:5225
0
С чем вас и поздравляю, смотрится вроде нормально на скрине, но безусловно на самом сайте совершенно другой взгляд.
csretven
csretven 31.05.2016 19:4721
0
Это можно сказать, новый технологический вид материала, что забираю, пригодится, а потом забудишь про него.
Спасибо.
Qiwizaliv100
Qiwizaliv100 31.05.2016 20:2822
0
хммм этот вид материалов нормальный, очень популярен на сайтах
Сопрано
Сопрано 31.05.2016 21:4623
+2
Qiwizaliv100, а что вы хотели, Angerfist фуфло не заливает, всегда оригинальное и рабочий материал.
avatar