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

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

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

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



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

Скриншот при наведении курсором на материал
Красивый по стилям Вид материала на сайт
Скриншот при наведении курсором на кнопку INFO
13 Октября 2016 Загрузок: 59 Просмотров: 2945 Комментариев: (25)

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

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

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

Комментарии: 25
Kosten
Kosten 13 Октября 2016 18:421
0
Angerfist, сразу заметно в своем стиле сделал, все как нужно, думаю нужно прикинуть его на cstavr сайт.
Kosten
Kosten 13 Октября 2016 18:432
0
Это вид материала 52a вообще подумал информер, все правильно, и краткое описание идет.
Angerfist
Angerfist 13 Октября 2016 18:453
0
В демо я просто совместил два вида рядом, и ширину блоку родителю сделал 600px, может поэтому принял за информеры)

Кстати если текст описания будет внизу обрезаться некрасиво, то в классе subrear можно приподнять фон bottom: 28px; до момента пока не будет красиво (так как применил overflow: hidden;)
Kosten
Kosten 13 Октября 2016 18:504
0
Первый больше нравится, просто он как то не стандартно в колонке, и сайт по конструктору должен широкий, или просто если брать в 3 колонки, их в такой стили много, а вот такой в первые вижу.

Kosten
Kosten 13 Октября 2016 19:1610
0
Angerfist, скинь демо, на свой урл пересажу, то так бывает, что иногда через какое то время пропадает.

Сопрано
Сопрано 13 Октября 2016 18:515
0
Вообще круто смотрится, и на светлом, но думаю на темном лучше будет.
Start
Start 13 Октября 2016 19:006
0
С каждым разом всё лучше...
FeStemBer
FeStemBer 13 Октября 2016 19:017
0
Не думаю, и ранее были очень продуктивные материалы, просто кому то этот нравится, другому другой, но сделано видно очень качественно.
Сафрон
Сафрон 13 Октября 2016 19:068
0
Ждя темного дизайн нет не нужна, вот на светлом будет смотреться красиво. Что с информер можно перепутать, то его можно сделать под такой дизайн, что в одном стиле было.
tsakonter
tsakonter 13 Октября 2016 19:119
0
Видать и было создано под светлый дизайн, просто под темный нет смысла выводить тени, с Костен согласен, мне также больше такой вид нравится.
Tergran
Tergran 13 Октября 2016 19:1811
0
Что то не кто про эффект не написал, если посмотреть на DEMO то он очень заметный, у вид материала такой в первые вижу.
Angerfist
Angerfist 13 Октября 2016 21:2612
0
Kosten, если тебе нужен к примеру информер, суть этого кода не меняется (написано ли в заголовке для вида материалов или информера), в коде отбросить панель администратора и всё информер готов, т.к. в информере не предусмотрена панель.
Если делать информер из 2-х колонок для формата изображений как у тебя на кино сайте, то ставим ширину классу internal 48% и отступ margin 1%, учитывая что в настройках информера стоит 1-колонка. Для 1 колонки информера 98% и 1% отступ, при этом надо отменить float в этом же классе.
Сопрано
Сопрано 13 Октября 2016 21:5513
0
Angerfist, здесь лучше вам сделать, код наизусть знаете.
Kosten
Kosten 14 Октября 2016 01:0714
0
Все демонстрация сделана и можно посмотреть оба вида материала и эффект на них.
1 2 »
avatar