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

Вид материалов блога главной страницы для uCoz

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

Но поставлен стильный эффект на изображение, как на этом вид материала, где также должно при наведении увеличение по пикселям, в том случай, в самом самом каркасе, что оригинально смотрится. Разместить его можно и на отдельных страницах, это тем кто просто хотел держать любую информацию, которая не будет по умолчанию главной. По функциям видим, что только идет картинка с названием, где она полное по знакам. Для этого прописаны стили, что если выходить в сеть с телефона, все смотрелось корректно. И безусловно краткая информация, что выдает описание, но как по клику в посте или снимку, вы переходите на основу. Здесь веб мастер может его редактировать на различную палитру цвета в CSS, чтоб органично вписывался на портале.

Все проверено и протестировано на тестовой площадке, где представляю обзоры различных аппаратах по ширине диагонали.

HTML

Код

<div class="kontseptsiya_osnovaniem">
  <div class="glavna_obrazets">
  <a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$"></a></div>
  <div class="goretandin_varegikus">
  <h2 class="vertical_reception deralnupagim"><a href="$ENTRY_URL$">$TITLE$</a></h2>
  <div class="grotikan_razetenus">
  <div class="grenumakis">
$MESSAGE$
</div>
</div>
</div>
</div>

CSS

Код

.kontseptsiya_osnovaniem{
overflow:hidden;
background:#f9f9f9;
margin-bottom:12px;
padding: 1px 1px 1px 1px;
border: 1px solid #dfdfe2;
border-radius: 3px;
}

.glavna_obrazets{
float:left;
overflow:hidden;
max-width: 100%;
width:100%;
max-height:170px;
border-radius: 3px 3px 0px 0px;
border-bottom: 1px solid #dad9d9;
}

.glavna_obrazets img{
height: 219px;
min-width:100%;
transition: all 0.3s ease;
border-radius: 3px 3px 3px 3px;
}

.vertical_reception{
color:#423939;
font-size:19px;
font-family:MyriadPro-Semibold;
}

.vertical_reception a{
color:#353e56;
padding: 0 5px;
}

.kontseptsiya_osnovaniem h2{
float:left;
width:100%;
}

.goretandin_varegikus{
float:left;
overflow:hidden;
width:100%;
}

.goretandin_varegikus2{
width:100%;
overflow:hidden;
}

.grotikan_razetenus{
clear:both;
font-size: 13px;
text-align: justify;
width: 100%;
}

.kontseptsiya_osnovaniem:hover .glavna_obrazets img{
-webkit-transform: scale(1.127);
-moz-transform: scale(1.3);
-o-transform: scale(1.127);
}

.grenumakis{
opacity: 0.99;
margin-bottom: 5px;
padding: 0 5px;
height: 67px;
overflow: hidden;
text-align: justify;
}

.deralnupagim{
white-space: nowrap;
overflow: hidden;
padding: 3px;
background: #f9f9f9;
position: relative;
margin: 5px 0px 5px 0px;
}

.deralnupagim::after{
content: '';
position: absolute;
right: 0;
top: 0;
width: 73px;
height: 98%;
background: linear-gradient(to right, rgba(249, 249, 249, 0.26), rgb(249, 249, 249) 100%);
}

@media screen and (max-width: 1224px){
.kontseptsiya_osnovaniem{
background: #f7f7f7;
width: 100%;
height: auto;
padding: 0 0px;
}
}

@media screen and (max-width: 680px){
.glavna_obrazets{
background: rgba(31, 30, 30, 0);
width: 100%;
height: auto;
border-radius: 3px 3px 0px 0px;
border-bottom: 1px solid #bfbfbf;
}
}

1. У всех при открытие сайта, будет идти на одну колонку, здесь вы можете описание большое делать, так как только несколько строк появятся.

2. Полагаю, больше планшету подходит.

3. Потом идет смартфон, и как можно заметить, небольшие изменение.

Создано на CSS вид новостей

4. И считаю одним из главных, после компьютера, идет телефон, что адаптивно на такие форматы.

Адаптивный вид материалов на одну колонки сайта

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

22 Ноября 2017 Просмотров: 1776 Комментариев: (2)

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

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

Kosten

Комментарии: 2
Порядок вывода комментариев: bilyakov 10 Декабря 2017 20:00¹ 0 спасибо, 3 дня ковырялся, не мог понять, как я хочу, оказалось, я вот так хочу, ещё раз спасибо. Kosten 10 Декабря 2017 22:10² 0 Не вопрос, заходите, может что решите еще обновить или в создание новое найдете.