» »

Вид материалов новостей 2 колонки CSS для uCoz

Вид материалов новостей 2 колонки CSS для uCoz

Вашему вниманию светлый вид материалов на модули новости или файлы, что полностью адаптивный и идет на 2 колонки с элементом эффекта. Все сделано в доступном виде для пользователя, это не сложный блог, что разбит на 2 колонки, и сделан так, что по сторонам идет дизайн в один пиксель и добавлена стилистике виде теней. Что можно ставить аналогичную палитру цвета под фон, где визуально будет смотреться отлично. По высоте он больше стандартный, но это все сам веб мастер в CSS может под свой интернет ресурс настроить. Адаптивность идет на все мобильные приложение и на самые большие мониторы, где все корректно выводит.

Есть эффекты, но он не перегружен ими, это больше всего идет на изображение, где при наведении оно становится черно былым. Но и безусловно функционал, это заголовок и ниже его в синем обводе прописано, когда был размещен. Что для новостного портала необходимая функция, но если ставить на файлы, вам останется добавить операторы, чтоб выводили информацию, сколько скачали или в какой категории материал. Здесь считаю главным, это его адаптивность, а далее его можно уже подогнать под свою тематику, чтоб можно было видно, те функций, что необходимы. Сам код не сложный и в нем еще поставлены шрифтовые иконки, что делает его более современным.

Все снимки, что представлены ниже, были взяты с тестового сайта, где было проведена тестирование на работоспособность.

1.

В две колонки для сайта материал

3.

Адаптивные блоги 2 колонки на модуль сайта

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
2018-01-25 Просмотров: 765 Комментарий: (4)

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

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

Комментарий: 4
Mix5280
Mix5280 2018-01-26 13:131
+1
Не чего сказать, помолчи лучше. Завалил сайт подобным материалом. Ты теперь ещё выложи тёмный вид материала в три колонки, а потом светлый вид в три колонки. Я вот что подумал у тебя что всего два цвета чёрный и белый. Возьми на вооружения 7 цветов радуги, представляешь как сразу увеличится объём материала нового. Потом ещё замечание на счёт твоего описания материала. Пишешь ничего не понять ты в какой школе учился. не складу не луду белиберда одна у тебя. Зато уникальность описания 11a
DESTEQ
DESTEQ 2018-01-26 13:342
-1
Кому надо, тот поймёт. Да и что такого в том, что один вид материалов расписан в нескольких вариантах, как в две колонки, так пускай и в три. Есть люди которые не умеют и попросту не могут сами переписать код под 2 или 3 колонки, поэтому им пригодится это, да и в избежание комментариев типа "А как сделать в 2 колонки" и т.д.
Да и для количества материалов чтоб индексировались тоже хорошо, поэтому не понимаю твоего комментария.
Единственное да, описание местами немного затуманивает разум когда читаешь)
Kosten
Kosten 2018-01-26 19:323
-1
Поверите, ссылки таким мастодонтам CEO продавал, им нормально описание заходило. А там запятую не правильно поставил, плиз перепиши.
Kosten
Kosten 2018-01-27 04:094
-1
Спасибо за совет, нужно сделать темный на 3 колонки и адаптировать под мобильные устройства.
avatar