Главная Всё для uCoz Элементы дизайна Вернуться в каталог файлов?
Вид материалов в две колонки [Как у нас на сайте]
Для скачивания файла нажмите на ссылку под тектом "Оплаченная реклама". Чтобы не нажимать на рекламу и качать файлы без ограничения, зарегистрируйтесь или авторизируйтесь на сайте через соц.сети
Если вы используете антирекламу, отключите её, или же зарегистрируйтесь, чтобы всё было по честному.
Если нет рекламы в данном блоке, выключи Adblock, или зарегистрируйся. Нажимая на рекламу в этом блоке, вы поддерживаете сайт для дальнейшего развития и отключения рекламы от хостинга.

26.12.2017, 00:12
Данный вид материалов хорошо подойдёт для сайтов игровой/новостной тематики, где существует множество категорий и требуется простота и удобство. Вид материалов немного исправлен мною, и подстроен под светлый дизайн. Так-же в нём присутствует оптимизация для мобильных устройств. 



CSS

Код
/*Вид материалов новостей */
.block-view {width: 48%;min-width: 315px;height: 210px;margin: 8px;float: left;overflow: hidden;position: relative;text-align: center;cursor: default;}
.block-view .rezultan, .block-view .content{width: 100%;height: 210px;position: absolute;overflow: hidden;top: 0;left: 0;}
.block-view img{ display: block; position: relative }
.block-view h2{text-transform: uppercase;color: #fff;text-align: center;position: relative;font-size: 14px;padding: 10px;background: rgba(255, 255, 255, 0);margin: 5px 0 0 0;}
.block-view p{font-family: 'Exo 2', sans-serif;font-size: 12px;position: relative;color: #fff;text-align: center;padding: 1px;}
.block-view a.info{width: 100%;height: 100%;display: inline-block;text-decoration: none;padding: 7px 14px;background: white;color: #fff;}
.block-view a.info:hover{box-shadow: 0 0 5px rgba(10, 10, 10, 0.96);}
.block-brief img{ transform: scaleY(1); transition: all 0.7s ease-in-out; width: 100%; }
.block-brief .rezultan{background-color: white;transition: all 0.5s linear;opacity: 0;border: 1px dashed;border-radius: 5px;}
.block-brief h2{border-bottom: 1px dashed rgba(8, 8, 8, 0.34);transform: scale(0);color: #000000;transition: all 0.5s cubic-bezier(0, 0, 0.92, 0.99);opacity: 0;font-family: 'Exo 2',sans-serif;}
.block-brief p{color: rgba(0, 0, 0, 0.96);opacity: 0;transform: scale(0);transition: all 0.5s cubic-bezier(0, 0, 0.83, 0.99);font-size: 13px;display: initial;}
.block-brief a.info{opacity: 0;transform: scale(0);transition: all 0.5s cubic-bezier(0, 0, 0.95, 0.99);}
.block-brief:hover img{ transform: scale(10); opacity: 0; }
.block-brief:hover .rezultan{ opacity: 1; }
.block-brief:hover h2, .block-brief:hover p, .block-brief:hover a.info{transform: scale(1);opacity: 1;}
.block-title-brief {position: absolute;bottom: 0px;width: 100%;height: auto;display: block;background-color: rgba(0, 0, 0, 0.8);text-align: center;line-height: 15px;color: white;font-size: 14px;padding: 11px;}
.block-brief-detail{margin-bottom: 0px;overflow: hidden;text-align: justify;margin: 12px 27px 0px 0px;color: black;font-size: 13px;padding: 1px;position: relative;}
@media screen and (max-width: 1224px){
.block-view { background: rgba(255, 255, 255, 0); width: 100%; padding: 0px; height: 210px; margin: 0px 10px 12px 0px; } }
@media screen and (max-width: 340px){ .block-title-brief {background: rgba(12, 21, 39, 0.63); width: 100%; height: auto; padding: 10px; } }
@media screen and (max-width: 1224px){ .block-view {background: rgba(255, 255, 255, 0); width: 100%; padding: 0px; height: 210px; margin: 0px 10px 12px 0px; } }
@media screen and (max-width: 340px){ .block-title-brief {background: rgba(12, 21, 39, 0.63); width: 100%; height: auto; padding: 10px; } }


HTML

Код
<div class="block-view block-brief">
<?if($IMG_URL1$)?><img src="$IMG_URL1$"><?else?><img src="$OTHER1$"><?endif?><div class="block-title-brief">$TITLE$</div> 
 <div class="rezultan"><a href="$ENTRY_URL$" class="info"> 
 <h2>$TITLE$</h2> 
 <div class="block-brief-detail">
$MESSAGE$ 
 </div> 
 </a> 
 </div> 
</div>
Просмотров: 159 | Загрузок: 0 | Комментарии: 9 | Теги: вид материалов в две колонки




Материал добавил
...
Добавил: ...
Группа: ...
Статус: ...
Язык: Мультиязычный
О материале:
Дата добавления: 26.12.2017 в 00:12
Просмотров: 159
Загрузок: 0
Категория: Элементы дизайна

При возможности отпишитесь о работоспособности модификации!
Всего комментариев: 9
avatar
| Рок-cтар 26.12.2017 в 16:44
Как скачат
0
avatar
| Razilator 26.12.2017 в 21:35
Нельзя
0
avatar
| Рок-cтар 26.12.2017 в 21:41
всмысле а как тогда качат
1
avatar
| Razilator 26.12.2017 в 22:13
Не знаю! m
0
avatar
| Рок-cтар 26.12.2017 в 22:22
позовите админа
0
avatar
| Razilator 26.12.2017 в 22:35
Он тут
0
avatar
| Рок-cтар 27.12.2017 в 12:41
Здравстуте как скачат
1
avatar
| XemorDio 28.12.2017 в 17:27
запрещено путеным
1
avatar
| BlackHARD 28.12.2017 в 20:44Спам
sirF
1
avatar