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

Адаптивный светлый вид материалов блога uCoz

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

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

HTML

Код

<div class="tasiparun-viewn" title=""><div class="tasiparun-img" title="">
<a href="$IMG_URL1$" class="ulightbox" title=""><img src="$IMG_URL1$" alt="$TITLE$" title=""></a>
</div>
<div class="tasiparun-title" title="">
<a href="$ENTRY_URL$" title="">$TITLE$</a>
</div>
<div class="tasiparun-text" title=""><div class="zornet_ru-text">$MESSAGE$</div></div>
</div>

CSS

Код

.tasiparun-viewn{
background: rgba(249, 249, 249, 0.99);
padding: 10px;
color: #312f2f;
overflow: hidden;
box-shadow: 0px 2px 6px 0px rgba(214, 210, 210, 0.96);
border: 1px solid #e4e4e4;
border-radius: 3px;
margin: 0 0 10px 0;
}

.tasiparun-img{
width: 180px;
height: 125px;
overflow: hidden;
float: left;
margin: 0 15px 0 0;
}

.tasiparun-img img{
width: 185px;
height: 130px;
transition: all 0.4s cubic-bezier(0.74, 0.59, 0.11, 0.96);
}

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

.tasiparun-title{
font-size: 18px;
overflow:hidden;
padding: 3px 0px;
font-family: PT Sans;
font-weight: bold;
border-bottom: 1px solid rgba(228, 228, 228, 0.96);
}

.tasiparun-title a:hover, .tasiparun-text a:hover{
color: rgba(136, 60, 14, 0.93);
}

.tasiparun-text{
font-size: 14px;
padding: 5px 0;
overflow: hidden;
}

.tasiparun-text br{
display: none;
}

.zornet_ru-text{
opacity: 0.8;
margin-bottom: 15px;
padding: 0 0px;
height: 70px;
overflow: hidden;
text-align: justify;
}

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

.tasiparun-img{
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;
}

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

.tasiparun-img:hover img{
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}

}

Работоспособность проверена на тестовом портале.

По умолчанию, не зависит от фиксированной ширине;

Большинство в сеть заходят с планшета, так примерно должно.

Вид материалов новостей (простой и стильный) для uCoz

Смартфон не исключение;

Офигенный вид материалов для файлов на uCoz

Второй по трафику телефон, что здесь безусловно шикарно;

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

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

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

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

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

Kosten

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