Адаптивный светлый вид материалов блога uCoz - Скрипты - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Скрипты


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

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

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);  
}  

}


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

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





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



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


Важно!

При копировании материала указывать ссылку на источник.

- 565
- 29-Октября-2017
- 0
Материал разместил:

Похожий материал
Статьи сайта