ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Вид материалов в 2 и 3 колонки для ucoz

Вид материалов в 2 и 3 колонки для ucoz

Еще одна вариация для вида материалов сайта, в этот раз применил другую анимацию и для компактности, вывел краткую информацию о файле в кнопку INFO (при наведении на которую курсором появится та самая информация).
Добавил сразу вариант с 3 колонками, в настройках модулей ставить 1 колонку (если всё же регулировать количество колонок в настройках модуля, то в классе стилей internal нужно указать 100%).

Материал адаптивен для мобильных устройств, но для смартфонов добавил медиазапрос на уменьшение количества колонок после 480px (кому не подходит, то можно поменять параметры: медиа запросы находятся в конце стилей).
Оба кода находятся в архиве, стили получились объёмными в основном из-за анимации и браузеры префиксов. Ну для полноты описания сделал демонстрацию.

Скриншот в 2 колонки

Скриншот при наведении курсором на материал

Красивый по стилям Вид материала на сайт

Скриншот при наведении курсором на кнопку INFO

13 Октября 2016 Загрузок: 59 Просмотров: 3186 Комментариев: (25)

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

СКАЧАТЬ

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

Angerfist

Похожие материалы

Оставь свой отзыв

Комментарии: 25
Порядок вывода комментариев: Kosten 13 Октября 2016 18:42¹ 0 Angerfist, сразу заметно в своем стиле сделал, все как нужно, думаю нужно прикинуть его на cstavr сайт. Kosten 13 Октября 2016 18:43² 0 Это вид материала вообще подумал информер, все правильно, и краткое описание идет. Angerfist 13 Октября 2016 18:45³ 0 В демо я просто совместил два вида рядом, и ширину блоку родителю сделал 600px, может поэтому принял за информеры) Кстати если текст описания будет внизу обрезаться некрасиво, то в классе subrear можно приподнять фон bottom: 28px; до момента пока не будет красиво (так как применил overflow: hidden;) Kosten 13 Октября 2016 18:50⁴ 0 Первый больше нравится, просто он как то не стандартно в колонке, и сайт по конструктору должен широкий, или просто если брать в 3 колонки, их в такой стили много, а вот такой в первые вижу. Kosten 13 Октября 2016 19:16¹⁰ 0 Angerfist, скинь демо, на свой урл пересажу, то так бывает, что иногда через какое то время пропадает. Сопрано 13 Октября 2016 18:51⁵ 0 Вообще круто смотрится, и на светлом, но думаю на темном лучше будет. Start 13 Октября 2016 19:00⁶ 0 С каждым разом всё лучше... FeStemBer 13 Октября 2016 19:01⁷ 0 Не думаю, и ранее были очень продуктивные материалы, просто кому то этот нравится, другому другой, но сделано видно очень качественно. Сафрон 13 Октября 2016 19:06⁸ 0 Ждя темного дизайн нет не нужна, вот на светлом будет смотреться красиво. Что с информер можно перепутать, то его можно сделать под такой дизайн, что в одном стиле было. tsakonter 13 Октября 2016 19:11⁹ 0 Видать и было создано под светлый дизайн, просто под темный нет смысла выводить тени, с Костен согласен, мне также больше такой вид нравится. Tergran 13 Октября 2016 19:18¹¹ 0 Что то не кто про эффект не написал, если посмотреть на DEMO то он очень заметный, у вид материала такой в первые вижу. Angerfist 13 Октября 2016 21:26¹² 0 Kosten, если тебе нужен к примеру информер, суть этого кода не меняется (написано ли в заголовке для вида материалов или информера), в коде отбросить панель администратора и всё информер готов, т.к. в информере не предусмотрена панель. Если делать информер из 2-х колонок для формата изображений как у тебя на кино сайте, то ставим ширину классу internal 48% и отступ margin 1%, учитывая что в настройках информера стоит 1-колонка. Для 1 колонки информера 98% и 1% отступ, при этом надо отменить float в этом же классе. Сопрано 13 Октября 2016 21:55¹³ 0 Angerfist, здесь лучше вам сделать, код наизусть знаете. Kosten 14 Октября 2016 01:07¹⁴ 0 Все демонстрация сделана и можно посмотреть оба вида материала и эффект на них.
1 2 »