|
|
Дата: Четверг, 08.03.2018, 00:58 | Сообщение # 1
|
Сообщений: 729
Статус: 
|
Новый усовершенствованный вид материала для системы uCoz. Он превосходно вписывается в любой дизайн сайта, имеет превосходный вид который расположен в колонку, а также при наведении выдает красивую анимацию. Вид материала будет выводить непосредственное изображение вашего материала, а также его название, категорию, и дату добавление, при наведении один из материала будет происходить красивая анимация, и для вас будет видно только изображение материала. Хочу сказать что работает очень хорошо, смотрится очень даже шикарно, придайте своему ресурсу новый вид материала!.
Вид материала:
Код
<figure class="snip1401">
<img src="$IMG_URL1$">
<figcaption>
<div class="data_cat">$DATE$</div>
<div class="text_cat">$CATEGORY_NAME$</div>
<h3>$TITLE$</h3>
</figcaption><i class="fa fa-css3"></i>
<a href="$ENTRY_URL$"></a>
</figure>
В таблицу стилей CSS:
Код
@media screen and (min-width: 600px){
.snip1401 {width: 48%;}
}
@media screen and (max-width: 600px){
.snip1401 {width: 98%;}
}
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,800);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1401 {
font-family: 'Playfair Display', Arial, sans-serif;
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
max-height: 220px;
color: #fff;
text-align: right;
font-size: 16px;
background-color: #d5d8da;
}
.snip1401 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.snip1401:hover img,
.snip1401.hover img {
opacity: 1;
}
.snip1401 figcaption {
position: absolute;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
padding: 30px 0 30px 10px;
background-color: rgba(75, 85, 105, 0.9);
width: 40%;
}
.snip1401 figcaption:before {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 100%;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 120px 120px 120px 0;
border-color: transparent rgba(75, 85, 105, 0.9) transparent transparent;
}
.snip1401:after {
position: absolute;
bottom: 50%;
right: 40%;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 120px 120px 0 120px;
border-color: rgba(33, 150, 243, 0.8) transparent transparent transparent;
}
.snip1401 h3,
.snip1401 p {
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
margin: 0;
}
.snip1401 h3 {
position:absolute;
top:20px;
right:-15px;
font-weight:600;
text-shadow: 0 0 10px #607D8B, 0 0 20px #607D8B;
font-size: 18px;
font-family: 'Playfair Display', Arial, sans-serif;
}
.snip1401 p {
padding-top:15px;
margin-right:-15px;
font-size: 14px;
}
.snip1401 i {
position: absolute;
bottom: 0;
left: 0;
padding: 10px 10px;
font-size: 40px;
color: #ffffff;
text-shadow: 0 0 10px #607D8B, 0 0 20px #607D8B;
}
.snip1401 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1401 img {
object-fit: cover;
width: 100%;
max-width: 100%;
height:220px;
padding:15px;
}
.snip1401:hover:after,
.snip1401.hover:after {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.snip1401:hover figcaption,
.snip1401.hover figcaption {
-webkit-transform: translateX(150%);
transform: translateX(155%);
}
.text_cat {
position:absolute;
left:-90px;
bottom:60px;
color:#9bb4e4;
text-shadow: 0 0 10px #000000, 0 0 20px #000000;
transform: rotate(45deg);
}
.data_cat {
position:absolute;
left:-140px;
bottom:158px;
color:#000000;
text-shadow: 0 0 10px #000000;
transform: rotate(-45deg);
}
Спасибо Raccoon!.
Если вдруг у кого какая ошибка, то обязательно вам поможем! 
|
| |
|
|
