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

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

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

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

Если говорить о том, как выглядит при открытии интернет-ресурса, то все просто и понятно будет, если говорим о компьютере.

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

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

Остается телефон, там разные форматы идут на экраны, но все же будет оставаться как на остальных. Почти все по форме остается, но разве только все в уменьшенном визуализации идет.

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

С дизайн понятно, теперь нужно все поставить:

Как посчитаете, где поменять, это в каком каталоге, хоть в доске объявление.

HTML

Код

<div class="vilkur_kalibrovka">
<div class="funkamer_gekas">
<a href="$IMG_URL1$" class="ulightbox"><img src="$IMG_URL1$" alt="$TITLE$"></a></div>
<div class="calgurkus_zornet">
<a href="$ENTRY_URL$">$TITLE$</a>
</div>
<div class="tenologiya_nagorazun" title=""><div class="fekaduner_ugmanus">$MESSAGE$</div>
</div>
</div>

CSS

Код

.vilkur_kalibrovka{
background: rgba(253, 252, 252, 0.87);
padding: 10px;
color: rgba(95, 88, 88, 0.96);
overflow: hidden;
box-shadow: 0px 2px 10px 1px rgba(214, 207, 207, 0.36);
border: 1px solid rgba(232, 225, 225, 0.96);
border-radius: 3.7px;
margin: 0 0 15px 0;
}

.funkamer_gekas{
width: 219px;
height: 128px;
overflow: hidden;
float: left;
margin: 0 10px 0 0;
border: 3px solid rgba(251, 248, 248, 0.86);
box-shadow: 0px 0px 1px 1px rgba(204, 196, 196, 0.94);
border-radius: 3px;
}

.funkamer_gekas img{
width: 221px;
height: 145px;
transition: all 0.4s cubic-bezier(0.74, 0.59, 0.18, 0.82);
}

.funkamer_gekas:hover img{
transform: scale(1.2) rotate(-10deg);
opacity: 1;
}

.calgurkus_zornet{
font-size: 21px;
overflow:hidden;
padding: 3px 0px;
font-family: Geneva;
border-bottom: 1px solid rgba(228, 226, 226, 0.79);
}

.calgurkus_zornet a{
color: rgba(40, 105, 140, 0.93);
}

.calgurkus_zornet a:hover, .tenologiya_nagorazun a:hover{
color: rgba(119, 50, 23, 0.93);
}

.tenologiya_nagorazun{
font-size: 14px;
padding: 9px 0;
overflow: hidden;
}

.tenologiya_nagorazun br{
display: none;
}

.fekaduner_ugmanus{
opacity: 0.9;
margin-bottom: 14px;
padding: 0 0px;
height: 69px;
overflow: hidden;
text-align: justify;
}

@media only screen and (min-width: 240px) and (max-width: 860px){
.vilkur_kalibrovka{
width: auto;
margin: 0 0 10px 0 !important;
}

.funkamer_gekas{
display: block;
width:auto;
height: auto !important;
float: none;
margin: 0 0 5px 0;
overflow: hidden;
background-size:cover;
background-position:top;
background-repeat:no-repeat;
}

.funkamer_gekas img{
max-width: 100%;
width: 100%;
}

.funkamer_gekas:hover img{
transform: scale(1.2);
}

Из дизайна, здесь прописан обвод на снимок, где немного закругленные углы на 3 пикселя, если у вас площадка, где блоки с углами, то в CSS все редактируется. Что касается всего дизайна, это палитра цвета, что не исключаю на темной гамме.

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

24 Ноября 2017 Просмотров: 1389 Комментариев: (0)

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

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

Kosten

Комментарии: 0