.т2. 3d Эффект с описанием

Сообщений 1 страница 4 из 4

Поделиться120.12.2019 23:49:48

Автор: МАЧОнаДАЧЕ
Возраст: 42 [1983-02-26]
Сообщений: 1268
Откуда: Новокузнецк
Пол: Мужской
Награды:
Зарегистрирован: 20.12.2018
Уважение: [+40/-0]
Позитив: [+51/-3]
Провел на форуме:
18 дней 20 часов
Последний визит:
23.03.2021 06:39:30

Давольно не плохой эффект.
Подходит как для рекламы, заголовко, логотипов и множество вариантов.
Всё зависит от Вашей фантазии.

КЛИКАЙ НА КАРТИНКУ

[html]
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
.lake {
width: 440px;
height: 220px;
margin: 70px auto;
perspective: 500px;
}
.lake .efekt {
display: block;
width: 100%;
height: 100%;
background:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url(https://forumstatic.ru/files/0019/ef/02/85635.jpg); /* Картинка */
background-size: 0, cover;
transform-style: preserve-3d;
transition: all 0.5s;
}
.lake:hover .efekt {
transform: rotateX(80deg);
transform-origin: bottom;
}
.lake .efekt:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 65px; /* Размер поля с текстом */
background: inherit;
background-size: cover, cover;
background-position: bottom;
transform: rotateX(90deg);
transform-origin: bottom;
}
.lake .efekt .descriptions {
color: white;
position: absolute;
top: 100%;
left: 0;
width: 100%;
text-align: center;
font-size: 18px; /* Размер текста */
transform: rotateX(-89.99deg);
transform-origin: top;
z-index: 1;
</style>
</head>
<body>
<div class="lake">
<div class="efekt">
<span class="descriptions">Forix ФоРуМ рунета - это форум имеющий множество полезной информации.
Только на Forix
</div>
</div>
</body>
</html>
[/html]

А ВОТ И КОД

Код:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
.lake {
width: 440px;
height: 220px;
margin: 70px auto;
perspective: 500px;
}
.lake .efekt {
display: block;
width: 100%;
height: 100%;
background:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url(https://forumstatic.ru/files/0019/ef/02/85635.jpg);	/* Картинка */
background-size: 0, cover;
transform-style: preserve-3d;
transition: all 0.5s;
}
.lake:hover .efekt {
transform: rotateX(80deg);
transform-origin: bottom;
}
.lake .efekt:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 65px;	/* Размер поля с текстом */
background: inherit;
background-size: cover, cover;
background-position: bottom;
transform: rotateX(90deg);
transform-origin: bottom;
}
.lake .efekt .descriptions {
color: white;
position: absolute;
top: 100%;
left: 0;
width: 100%;
text-align: center;
font-size: 18px;	/* Размер текста */
transform: rotateX(-89.99deg);
transform-origin: top;
z-index: 1;
</style>
</head>
<body>
<div class="lake">
<div class="efekt">
<span class="descriptions">Forix ФоРуМ рунета - это форум имеющий множество полезной информации.
Только на Forix
</div>
</div>
</body>
</html>

Не забываем ставить лайки!

[good]

Поделиться221.12.2019 00:23:46

Автор: МАЧОнаДАЧЕ
Возраст: 42 [1983-02-26]
Сообщений: 1268
Откуда: Новокузнецк
Пол: Мужской
Награды:
Зарегистрирован: 20.12.2018
Уважение: [+40/-0]
Позитив: [+51/-3]
Провел на форуме:
18 дней 20 часов
Последний визит:
23.03.2021 06:39:30

И сразу же есчё одна плюшка в подобном стиле.
По клику на картинку всплывают:
Интересный заголовок и описание.

КЛИКНИ НА КАРТИНКУ

[html]
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
.lake {
display: inline-block;
position: relative;
margin: 0 auto;
overflow: hidden;
background: #000;
}
.lac {
display: block;
max-width: 100%;
transition: opacity .2s ease-in-out;
}
.lake:after,
.lake:before {
box-sizing: border-box;
position: absolute;
width: 100%;
padding: 20px;
color: #fff;
transition: transform .4s ease-out;
}
.lake:after {
content: attr(data-title);
top: 0;
height: 20%;
background: rgba(0,0,0,.4);
font-size: 2rem;
font-weight: 300;
text-align: center;
transform: translateY(-100%) scale(.8);
}
.lake:before {
content: attr(data-description) "…";
top: 20%;
height: 80%;
background: rgba(107,38,68,.6);
font-size: 1.1rem;
transform: translateY(100%) scale(.8);
}
.lake:hover:after,
.lake:hover:before {
transform: translateY(0%) scale(1);
}
</style>
</head>
<body>
<div class="lake"
data-title="Что такое ФОРУМ"
data-description="Форум (web – forum) – это специальный сайт, или раздел на сайте или портале, который организован для общения и обмена мнениями. Концепция форумов. Форумы предназначены для тематического общения. Они являются своеобразными клубами по интересам. Суть работы форума в создании пользователями тем и их последующем обсуждении. Кроме того, в каждой теме могут также создаваться тематические опросы.">
<img class="lac" src="https://forumstatic.ru/files/0019/ef/02/27873.jpg" alt="" width="450" height="350">
</div>
</body>
</html>
[/html]

А ВОТ И КОД

Код:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
.lake {
display: inline-block;
position: relative;
margin: 0 auto;
overflow: hidden;
background: #000;
}
.lac {
display: block;
max-width: 100%;
transition: opacity .2s ease-in-out;
}
.lake:after,
.lake:before {
box-sizing: border-box;
position: absolute;
width: 100%;
padding: 20px;
color: #fff;
transition: transform .4s ease-out;
}
.lake:after {
content: attr(data-title);
top: 0;
height: 20%;
background: rgba(0,0,0,.4);
font-size: 2rem;
font-weight: 300;
text-align: center;
transform: translateY(-100%) scale(.8);
}
.lake:before {
content: attr(data-description) "…";
top: 20%;
height: 80%;
background: rgba(107,38,68,.6);
font-size: 1.1rem;
transform: translateY(100%) scale(.8);
}
.lake:hover:after,
.lake:hover:before {
transform: translateY(0%) scale(1);
}
</style>
</head>
<body>
<div class="lake"
data-title="Что такое ФОРУМ"
data-description="Форум (web – forum) – это специальный сайт, или раздел на сайте или портале, который организован для общения и обмена мнениями. Концепция форумов. Форумы предназначены для тематического общения. Они являются своеобразными клубами по интересам. Суть работы форума в создании пользователями тем и их последующем обсуждении. Могут также создаваться тематические опросы... Forex ФоРуМ рунета">
<img class="lac" src="https://forumstatic.ru/files/0019/ef/02/27873.jpg" alt="" width="450" height="350">
</div>
</body>
</html>

Итак меняем текст и заголовок на своё.
Был взят из интернета и малость модифицирован!

[good]