Необычный срезанный вид материалов на CSS3

Разместил: Apocalypse
Опубликовано: 12 июля 2016

Вот на глаза мне попался очень необычный вид материалов, который я просто не мог не оформить на сайте Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 1#: В самый низ вашего CSS вставьте:

.container {
max-width: 400px;
width: 100%;
margin: 0 auto;
padding-bottom: 70px;
position: relative;
}

.container * {
box-sizing: border-box;
}

.container .intro {
position: relative;
min-height: 300px;
height: 100%;
width: 100%;
overflow: hidden;
transition: all .72s ease-in-out;
}

.container .intro:after {
content: '';
display: block;
position: absolute;
/* width: 100%; */
height: 500px;
right: -100%;
left: 0;
transform: skew(100deg);
background: #fff;
bottom: -70%;
box-shadow: inset 1px 0px 5px 0px rgba(204, 204, 204, 0.72);
}

.container .meta {
max-width: 300px;
width: 100%;
margin: 0% auto 0;
position: absolute;
left: 0;
bottom: 0;
right: 0;
z-index: 10;
padding-top: 110px;
overflow: hidden;
transition: all .52s ease-in-out;
}

.container .meta__inner {
padding: .25rem 1rem;
line-height: 1.5rem;
position: relative;  
background: #fff;
z-index: 15;
background: #fff;
border: 1px solid #ccc;
border-top: none;
}

.container .meta:after {
content: '';
display: block;
position: absolute;
left:0;
right: 0;
top: 80px;
max-width: 300px;
height: 300px;
background: #fff;
border: 1px solid #ccc;
transform: rotate(90deg) skew(10deg);
z-index: 4;
}

.container h3 {
position: relative;
font-family: sans-serif;
font-weight: 300;
border-left: 4px solid tomato;
padding-left: .72rem;  
}

.container p {
font-family: serif;
font-size: .85rem;
font-weight: inherit;
color: #555;
text-align: justify;
}

.container p a {
color: tomato;
text-decoration: none;
opacity: .72;
transition: all .27s ease-in-out;
}

.container p a:hover {
opacity: 1;
text-decoration: underline;
}
.container:hover .meta{
transform: translateY(5px);
}

.container:hover .intro {
transform: translateY(-5px);
}

100

101

102

103

104

105

106

107

108

109

.container {

max-width: 400px;

width: 100%;

margin: 0 auto;

padding-bottom: 70px;

position: relative;

}

.container * {

box-sizing: border-box;

}

.container .intro {

position: relative;

min-height: 300px;

height: 100%;

width: 100%;

overflow: hidden;

transition: all .72s ease-in-out;

}

.container .intro:after {

content: '';

display: block;

position: absolute;

/* width: 100%; */

height: 500px;

right: -100%;

left: 0;

transform: skew(100deg);

background: #fff;

bottom: -70%;

box-shadow: inset 1px 0px 5px 0px rgba(204, 204, 204, 0.72);

}

.container .meta {

max-width: 300px;

width: 100%;

margin: 0% auto 0;

position: absolute;

left: 0;

bottom: 0;

right: 0;

z-index: 10;

padding-top: 110px;

overflow: hidden;

transition: all .52s ease-in-out;

}

.container .meta__inner {

padding: .25rem 1rem;

line-height: 1.5rem;

position: relative;

background: #fff;

z-index: 15;

background: #fff;

border: 1px solid #ccc;

border-top: none;

}

.container .meta:after {

content: '';

display: block;

position: absolute;

left:0;

right: 0;

top: 80px;

max-width: 300px;

height: 300px;

background: #fff;

border: 1px solid #ccc;

transform: rotate(90deg) skew(10deg);

z-index: 4;

}

.container h3 {

position: relative;

font-family: sans-serif;

font-weight: 300;

border-left: 4px solid tomato;

padding-left: .72rem;

}

.container p {

font-family: serif;

font-size: .85rem;

font-weight: inherit;

color: #555;

text-align: justify;

}

.container p a {

color: tomato;

text-decoration: none;

opacity: .72;

transition: all .27s ease-in-out;

}

.container p a:hover {

opacity: 1;

text-decoration: underline;

}

.container:hover .meta{

transform: translateY(5px);

}

.container:hover .intro {

transform: translateY(-5px);

}

2#: HTML код вида материалов:

<div class="container">
<section class="intro" style="background: transparent url(ССЫЛКА_НА_КАРТИНКУ) top center no-repeat;background-size: 100%;"></section>
<div class="meta">
<div class="meta__inner">
<h3>Заголовок</h3>
<p>Здесь любой ваш текст <a href="#">Читать далее...</a></p>
</div>
</div>
</div>

<h3>Заголовок</h3>

<p>Здесь любой ваш текст <a href="#">Читать далее...</a></p>

</div>

Автор публикации

не в сети 2 дня

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1096Регистрация: 27-08-2018

Метки: CSS3 Skew Вид материалов Кривой Необычный Срезанный

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Вам может также понравиться...

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

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии

topka

Есть скрипт ( денег или баллов ? )
где можно потратить эти баллы или передать и заработать ?

Что-то такое видел на одном сайте ( сталкер сайт на юкозе было)

2024-03-06 21:31:46

Всевидящее око

Новый пост от installusd1 в теме «PPI Pay-Per-Install Best Advertising Network»

2024-03-25 09:45:25

Всевидящее око

Новый комментарий от пользователя паоа: «пкаор» в материале Ajax отправка комментариев в Wordpess без плагинов от Apocalypse

2024-03-27 20:08:09

Apocalypse

Сайт был восстановлен спустя несколько месяцев бездействия

2024-06-27 16:12:56

fapalnaapo

а Шо случилось за что блокировали

2024-06-30 20:46:10

Apocalypse

@fapalnaapo, банально хостинг не был уплачен

2024-07-14 08:27:24

Apocalypse

Всем привет. У кого как жизнь?

2024-07-30 19:50:15

fapalnaapo

давольно таки не плохо, очень приятно, мне очень нравится между прочем

2024-08-13 10:09:49

Apocalypse

Всем доброго дня

2024-11-07 12:00:10

Al-Sher

Всем привет

2024-11-09 17:57:18

......

Для публикации сообщений в чате необходимо авторизоваться

Декабрь 2024
Пн	Вт	Ср	Чт	Пт	Сб	Вс
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

Необычный срезанный вид материалов на CSS3

Автор публикации

Apocalypse

Вам может также понравиться...

Объёмное горизонтальное меню на CSS3

Мини-профили с фоном, берущим цвета из аватарок на CSS3

Анимированный Прелоадер (Spinner) на чистом CSS

Панель управления