Новый вид материалов от uON для uCoz

Новый вид материалов от uON для uCoz

Новый красивый вид материалов с затемнением и эффектом при наведении. Есть демонстрация.


Установка



1. Вставить данный код в CSS:
(шрифт можно заменить на свой)

Код
/* uon.ucoz.com */
@import url(https://fonts.googleapis.com/css?family=Raleway);
.snip1580 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 8px;
  min-width: 250px;
  max-width: 310px;
  width: 100%;
  background-color: #000000;
  color: #ffffff;
  text-align: left;
  font-size: 16px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.snip1580 * {
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.snip1580 img {
  max-width: 100%;
  vertical-align: top;
}
.snip1580 figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.75);
}
.snip1580 h3 {
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  margin: 3px 0;
}
.snip1580 h5 {
  font-weight: 400;
  margin: 0;
  color: #bbb;
  letter-spacing: 1px;
}
.snip1580 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.snip1580:hover figcaption,
.snip1580.hover figcaption {
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background-color: #fff;
}
.snip1580:hover h3,
.snip1580.hover h3,
.snip1580:hover h5,
.snip1580.hover h5 {
  color: #333;
}


2. Вставить код в вид материалов:
Код
<figure class="snip1580">
<img src="$IMG_URL1$" alt="profile-sample2"/>  
<figcaption>  
<h3>$TITLE$</a>$MODER_PANEL_RIGHT$</h3>  
<h5>$CATEGORY_NAME$</h5>  
</figcaption>
<a href="$ENTRY_URL$"></a>  
</figure>


avatar

Samsung Galaxy Fold беслатный mockup

Как многие из вас уже знают, Samsung Galaxy Fold является первым складным устройством, доступным на рынке. Представляем вам отличный бесплатный mockup.

Материалы пользователя на его странице для uCoz

Интересный скрип для uCoz, который выводит материалы пользователя на его личную страницу (профиль).

Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0