В этом проекте мы познакомим вас с этапами создания привлекательных переворачивающихся карточек. Вы узнаете, как применять к своим картам эффекты параллакса, чтобы придать им ощущение глубины и интерактивности.
Эти адаптивные переворачивающиеся карты с параллаксом представляют собой общую концепцию дизайна, которую можно реализовать с помощью HTML и CSS. Основная концепция состоит в том, чтобы создать структуру, похожую на карту, которая при нажатии или наведении курсора мыши переворачивается или вращается, открывая больше материала на обратной стороне карты.
Подробный обзор проекта
Этот эффект создается путем объединения 3D-преобразований и переходов CSS. Структура HTML обычно состоит из элемента-контейнера и двух дочерних элементов: одного для лицевой и обратной стороны карточки.
Эффекты параллакса и переворачивания создаются путем применения стилей CSS к этим компонентам. здесь мы гарантируем, что карточки отзывчивы и адаптируются к разным размерам экрана, поэтому медиа-запросы CSS можно использовать для настройки стилей для различной ширины области просмотра.
HTML-структура
Начнем с создания HTML-структуры. Сначала создается контейнер с четырьмя столбцами, каждый из которых содержит карточку с лицевой и оборотной стороны. На лицевой стороне карточки содержится абзац и текст, а на оборотной стороне — более длинный текст.
Далее, тег div с оболочкой класса — это самый внешний контейнер, который охватывает все столбцы. Внутри этого тега div находится еще один тег div с классом cols, который содержит четыре столбца.
Каждый столбец создается с использованием тега div с классом col. Атрибут ontouchstart определяет функцию JavaScript, которая будет вызываться, когда пользователь касается карты, включая и выключая класс наведения.
<div class="wrapper">
<div class="cols">
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="background-image: url(https://images6.alphacoders.com/112/thumbbig-1125041.webp)">
<div class="inner">
<p>Yoru</p>
<span>Lorem ipsum</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
</div>
</div>
</div>
</div>
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="background-image: url(https://images8.alphacoders.com/109/thumbbig-1093220.webp)">
<div class="inner">
<p>Viper</p>
<span>Lorem ipsum</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
</div>
</div>
</div>
</div>
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="background-image: url(https://images7.alphacoders.com/112/thumbbig-1123608.webp)">
<div class="inner">
<p>Sova</p>
<span>Lorem ipsum</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
</div>
</div>
</div>
</div>
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="background-image: url(https://images7.alphacoders.com/109/thumbbig-1091959.webp)">
<div class="inner">
<p>Omen</p>
<span>Lorem ipsum</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
</div>
</div>
</div>
</div>
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="background-image: url(https://images2.alphacoders.com/120/thumbbig-1204924.webp)">
<div class="inner">
<p>Neon</p>
<span>Lorem ipsum</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
</div>
</div>
</div>
</div>
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="background-image: url(https://images8.alphacoders.com/110/thumbbig-1101846.webp)">
<div class="inner">
<p>Diligord</p>
<span>Lorem ipsum</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
</div>
</div>
</div>
</div>
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="background-image: url(https://oyster.ignimgs.com/mediawiki/apis.ign.com/valorant/9/91/KillJoy_Wallpapers_blue1.jpg?width=1024)">
<div class="inner">
<p>Killjoy</p>
<span>Lorem ipsum</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
</div>
</div>
</div>
</div>
<div class="col" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="background-image: url(https://images7.alphacoders.com/110/thumbbig-1101269.webp)">
<div class="inner">
<p>Jett</p>
<span>Lorem ipsum</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
</div>
</div>
</div>
</div>
</div>
</div>
Лицевая сторона карточки создается с использованием тега div с классом front, у которого есть свойство фонового изображения, которому в настоящее время присвоен пустой URL-адрес. Вы можете поместить в него любое изображение, на форму открытки это не повлияет.
Обратная сторона карточки создается с использованием тега div с обратной стороной класса. Внутри тега div с обратной стороной класса находится еще один тег div с внутренним классом. Внутренний элемент div содержит один элемент абзаца (p) с текстом Lorem Ipsum. В нем можно что-то описать, а можно и о ком-то написать.
Когда пользователь наводит курсор на лицевую часть карточки, класс наведения переключается в родительском элементе div col с помощью функции JavaScript ontouchstart, указанной для каждого элемента col. Это приведет к тому, что карта перевернется, обнажая обратную сторону карты с более длинным описанием.
Стилизация с помощью CSS
До сих пор мы сделали только структуру этих карточек, теперь идет самая важная работа. пришло время создать эти карточки с помощью CSS.
Прежде всего мы начнем с разработки класса-оболочки. .wrapper устанавливает ширину и максимальную ширину компонента и центрирует его по горизонтали с помощью свойства поля. ширина контейнера равна 90% ширины его родительского элемента, а также устанавливает верхнее и нижнее поля равными 0.
Далее идет .cols — это селектор классов, который применяется к группе элементов, которые будут отображаться в макете flexbox. в этом режиме отображения элемента используется гибкий контейнер, так что его дочерние элементы можно упорядочить с помощью свойств flexbox.
@import url('https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Foundation&display=swap');
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body{
background-image: linear-gradient( 109.6deg, rgba(116,18,203,1) 11.2%, rgba(230,46,131,1) 91.2% );
background-repeat: no-repeat;
background-size: auto;
background-size: 100% 500rem;
}
.wrapper{
width: 90%;
margin: 0 auto;
max-width: 80rem;
}
.cols{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.col{
width: calc(25% - 2rem);
margin: 1rem;
cursor: pointer;
}
.container{
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.front,
.back{
background-size: cover;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
border-radius: 10px;
background-position: center;
-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-align: center;
min-height: 280px;
height: auto;
border-radius: 10px;
color: #fff;
font-size: 1.5rem;
}
.back{
background: #cedce7;
background: -webkit-linear-gradient(45deg, #cedce7 0%,#596a72 100%);
background: -o-linear-gradient(45deg, #cedce7 0%,#596a72 100%);
background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
}
}
.front:after{
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
content: '';
display: block;
opacity: 0.5;
background-color: #000;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 10px;
}
.container:hover .front,
.container:hover .back{
-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.back{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.inner{
-webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
transform: translateY(-50%) translateZ(60px) scale(0.94);
top: 50%;
position: absolute;
left: 0;
width: 100%;
padding: 2rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 1px solid transparent;
-webkit-perspective: inherit;
perspective: inherit;
z-index: 2;
}
.container .back{
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.container .front{
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.container:hover .back{
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.container:hover .front{
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.front .inner p{
font-size: 2.9rem;
margin-bottom: 2rem;
position: relative;
font-family: 'Edu NSW ACT Foundation', cursive;
}
.front .inner p:after{
content: '';
width: 4rem;
height: 2px;
position: absolute;
background: #C6D4DF;
display: block;
left: 0;
right: 0;
margin: 0 auto;
bottom: -.75rem;
}
.front .inner span{
color: rgba(255,255,255,0.7);
font-family: 'Montserrat';
font-weight: 300;
}
@media screen and (max-width: 64rem){
.col{
width: calc(33.333333% - 2rem);
}
}
@media screen and (max-width: 48rem){
.col{
width: calc(50% - 2rem);
}
}
@media screen and (max-width: 32rem){
.col{
width: 100%;
margin: 0 0 2rem 0;
}
}
Наконец, .col — это селектор класса, который применяется к каждому из дочерних элементов внутри контейнера .cols. ширина Устанавливает ширину каждого столбца равной 25% ширины контейнера .cols минус 2rem. Функция Calc() используется для вычитания 2rem из расчета ширины.
А .front и .back определяют переднюю и обратную сторону карты соответственно. Они устанавливают фон, радиус границы, высоту и размер шрифта карты. Они также используют переходы для анимации свойства преобразования при наведении на карту.
.front:after создает полупрозрачное наложение на лицевую сторону карты. и .inner стилизует содержимое внутри карточки, устанавливая его положение и отступы.
.container .back и .container .front используют преобразования для поворота задней и передней граней на 180 градусов вокруг оси Y, делая их невидимыми, когда они не должны отображаться.
.front .inner p стилизует текстовое содержимое карточки, устанавливая размер шрифта, поле нижнего края и семейство шрифтов элемента абзаца.
0 Комментарии