Вид материалов новостей 2 колонки CSS для uCoz
 | |
| Вашему вниманию светлый вид материалов на модули новости или файлы, что полностью адаптивный и идет на 2 колонки с элементом эффекта. Все сделано в доступном виде для пользователя, это не сложный блог, что разбит на 2 колонки, и сделан так, что по сторонам идет дизайн в один пиксель и добавлена стилистике виде теней. Что можно ставить аналогичную палитру цвета под фон, где визуально будет смотреться отлично. По высоте он больше стандартный, но это все сам веб мастер в CSS может под свой интернет ресурс настроить. Адаптивность идет на все мобильные приложение и на самые большие мониторы, где все корректно выводит. Есть эффекты, но он не перегружен ими, это больше всего идет на изображение, где при наведении оно становится черно былым. Но и безусловно функционал, это заголовок и ниже его в синем обводе прописано, когда был размещен. Что для новостного портала необходимая функция, но если ставить на файлы, вам останется добавить операторы, чтоб выводили информацию, сколько скачали или в какой категории материал. Здесь считаю главным, это его адаптивность, а далее его можно уже подогнать под свою тематику, чтоб можно было видно, те функций, что необходимы. Сам код не сложный и в нем еще поставлены шрифтовые иконки, что делает его более современным. Все снимки, что представлены ниже, были взяты с тестового сайта, где было проведена тестирование на работоспособность. 1.  3.  3.  Приступаем к установке: HTML Код <div class="zornet_ru_gnukid"> <div class="amplitudes_tuksawuntev"> <div class="dasewide_vasriation"> <?if($IMG_URL1$)?> <img src="$IMG_URL1$" class="afeature_gulengem"/> <?else?> <img src="http://zornet.ru/Ajaxoskrip/Aabger/zornet_ru_redsa.png" class="afeature_gulengem"/> <?endif?> </div> <a href="$ENTRY_URL$"><h4 class="saking-esizeda">$TITLE$</h4></a> <span class="avtuloping"><i class="fa fa-calendar icons"></i> Дата файла : $DATE$</span> <div class="kagrand_tucircle"> <p> $MESSAGE$ </p> </div> </div> </div> CSS Код .zornet_ru_gnukid { position: relative; width: 45.9%; margin: 7px 2%; float: left; } .amplitudes_tuksawuntev { padding: 19.9px; border: 0px solid rgba(54, 61, 68, 0.06); border-radius: 5px; margin-bottom: 9px; background-clip: padding-box; background-color: #fbf8f8; box-shadow: 0 0 5px 1px rgba(95, 89, 89, 0.39); border: 1px solid #ced2d8; } a { text-decoration: none; } .saking-esizeda { margin-bottom: 12px !important; color : #255a77 !important; font-weight: 700; text-decoration:none; font-size : 15px ; overflow: hidden; height: 18.5px; line-height: 16px; } .saking-esizeda:hover { color : #454647 !important; text-decoration:none; } .avtuloping {font-size: 11px;margin-top: 1px !important;color: #f3eded;font-weight: 300;background-color: #2f75ad;padding: 2.7px;border-radius: 2px;padding-right: 9.5px;padding-left: 9.5px;} .afeature_gulengem {border-radius: 5.7px 5.7px 1px 1px;margin-bottom: 8px !important;width:100%;height: 207px;} .tucon_siderable {font-size : 14px !important;margin-top: 8px !important;margin-bottom: 4.99px !important;color: #2e3033 !important;text-align: justify;} .dasewide_vasriation:hover img { opacity: 0.8; -webkit-filter: grayscale(1); filter: grayscale(1); } .dasewide_vasriation img {-webkit-transition: all .3s cubic-bezier(0.25, 0.1, 0.22, 0.74);} .kagrand_tucircle { overflow: hidden; height: 79px; line-height: 23px; } .icons { padding-right: 7px; } .ribbon:nth-child(even) { margin-right: 7%; } @media screen and (max-width: 1124px) { .zornet_ru_gnukid {width: 48%;margin: 1%;} } @media screen and (max-width: 860px) { .zornet_ru_gnukid {width: 96%;margin: 2%;} } До этого на сайте разместил аналогичный вид материалов, только он создан на одну колонку. Источник: www.7uarts.ga | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 4 | |
Не чего сказать, помолчи лучше. Завалил сайт подобным материалом. Ты теперь ещё выложи тёмный вид материала в три колонки, а потом светлый вид в три колонки. Я вот что подумал у тебя что всего два цвета чёрный и белый. Возьми на вооружения 7 цветов радуги, представляешь как сразу увеличится объём материала нового. Потом ещё замечание на счёт твоего описания материала. Пишешь ничего не понять ты в какой школе учился. не складу не луду белиберда одна у тебя. Зато уникальность описания
 | |
