Java, UX, HTML, CSS, WEB-design

Узнайте, как создавать флип-карты с помощью CSS

Краткое описание по статье Узнайте, как создавать флип-карты с помощью CSS

Название: Узнайте, как создавать флип-карты с помощью CSS . Краткое описание: [ad_1] ⭐ В этом уроке вы узнаете, как создавать откр . Дата публикации: 23.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

В этом уроке вы узнаете, как создавать открытки для блога, которые переворачиваются при наведении, открывая отрывок из сообщения на обратной стороне открытки. Мы добьемся этого эффекта с помощью CSS. Конечный результат отзывчив, заставляя карту переворачиваться при нажатии на мобильные устройства. Этот GIF показывает, что вы сможете создать к концу этого урока.

Как создать флип-карты с помощью CSS — демонстрация

Для начала вам нужно иметь базовые знания HTML и CSS. Мы рассмотрим несколько дополнительных тем CSS, таких как perspective и transform к концу. Давайте погрузимся.

Настройка

Создайте пустой документ HTML и назовите его index.html. Добавьте основной скелет HTML. Если вы используете Visual Studio Code, все, что вам нужно сделать, это ввести «!» и нажмите Enter. Вы закончите с этим.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
  
</body>
</html>

Я использовал шрифт ‘Lato’ с плотностью шрифта 300 и 700. Поэтому добавьте следующую строку под тегом title, чтобы встроить этот шрифт с помощью шрифтов Google.

<link href="https://fonts.googleapis.com/css2?family=Lato:[email protected];700&display=swap" rel="stylesheet">

Создайте свою таблицу стилей и назовите ее style.css. Свяжите таблицу стилей с вашим HTML-документом под ссылкой Google Fonts CDN, используя

<link rel="stylesheet" href="style.css">

Я использовал эти три изображения для постов в блоге от Pexels — post1.jpg, post2.jpg и post3.jpg. Вы можете загрузить то же самое или включить свое собственное. Но не забудьте назвать их post1.jpg, post2.jpg и post3.jpg.

Одна флип-карта

После завершения настройки давайте сначала создадим одну карту, которая переворачивается — с передней и задней сторонами. Эффект переворота карты, показанный в приведенном выше GIF, происходит, когда элемент поворачивается на 180 градусов по оси Y. Чтобы создать 3D-эффект, нам нужно 3D-пространство для этого элемента, добавив perspective своему родителю. Посмотрите на разницу между эффектом 2D и эффектом 3D.

Как создать флип-карты с помощью CSS — 2D

2D-эффект

Как создать флип-карты с помощью CSS — 3D

3D-эффект

Вы видите, что карта фактически выходит из своего пространства, чтобы дать вам эффект глубины в 3D? Свойство CSS perspective помогает нам сделать это. Скажем, мы добавляем perspective:20px к родителю. Это дает глубину 20 пикселей для этого элемента. Это означает, что создается 3D-пространство, поэтому дочерние элементы можно перемещать ближе или дальше или поворачивать для создания 3D-эффекта. Сначала создадим разметку.

HTML

Нам нужен родитель div добавить perspective. А затем дочерний элемент, который содержит как переднюю, так и заднюю грани в абсолютном положении. Поэтому добавьте эту разметку в свой index.html внутри body тег.

<div class="post-wrap"> <!-- The parent element -->
   <div class="post"> <!-- Child element that flips -->
       <div class="post-front">
           Front face
       </div>
       <div class="post-back">
           Back face
       </div>
   </div>
</div>

CSS

В style.css, начните с некоторых общих стилей для всех элементов:

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

Добавьте следующие стили в html и body:

html, body {
   width: 100%;
   height: 100%;
}
body{
   background-color: #f7fafc;
   font-family: 'Lato',sans-serif;
   font-size: 1rem;
   color: #444444;
}

К элементу post-wrap добавьте width, height и perspective.

.post-wrap {
   width: 320px;
   height: 420px;
   perspective: 1000px;
}

Представьте себе это как коробку, в которой perspective это глубина этой коробки. Далее стилизуйте .post div занимать все пространство своего родителя.

.post {
   position: relative; /* Required to absolutely position the child faces */
   width: 100%;
   height: 100%;
}

Давайте добавим стили к двум граням.

.post-front, .post-back {
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: white;
}

Вы увидите, что оба они расположены друг над другом. (На самом деле вы не можете видеть их обоих. Видна только задняя сторона. При использовании инструмента инспектора браузера вы можете видеть, что они расположены друг над другом). Но нам нужно, чтобы задняя грань была обращена назад, а это значит, что ее нужно повернуть на 180 градусов по оси Y. Итак, добавьте это:

.post-back {
   transform: rotateY(180deg);
}

Это то, что вы сейчас увидите в своем браузере.

Как создать флип-карты с помощью CSS — первый пример

Итак, элемент повернулся назад, но текст все еще появляется — как будто это стекло. Мы не хотим, чтобы задняя часть элемента отображалась. Для этого мы используем backface-visibility: hidden;. В браузере Safari это работает с -webkit- префикс. Добавьте их сейчас:

.post-front, .post-back {
   /* Existing styles here */
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
}

Теперь вы можете видеть только лицевую сторону — именно так, как мы хотим. Далее нам нужно повернуть div поста при наведении курсора на родителя.

.post-wrap:hover .post {
   transform: rotateY(180deg);
}

Если вы сейчас проверите свой вывод, вы увидите, что карта вращается, но мы не видим никакой анимации или 3D-эффекта. Это потому, что мы не добавили самые важные свойства, необходимые для них — transition и transform-style характеристики.

.post {
   /* Existing styles here */
   transition: transform 1s;
   transform-style: preserve-3d;   
}

Идеально. У нас готова флип-карта. Пришло время добавить содержимое нашего блога в разметку.

HTML

Добавьте фоновое изображение, дату и заголовок на лицевой стороне.

<div class="post-front">
   <div class="post-img" style="background-image: url('post1.jpg');"></div>
   <div class="post-info">
       <span>June 25, 2020</span>
       <h2>Productivity: Expectations vs Reality</h2>
   </div>
</div>

Название, отрывок и кнопка «Подробнее» на задней стороне.

<div class="post-back">
   <div class="post-except">
       <h2>Productivity: Expectations vs Reality</h2>
       <p>
           Et hinc magna voluptatum usu, cum veniam graece et. Ius ea scripserit temporibus, pri cu harum tacimates neglegentur. At adipisci incorrupte nam. Cu qui sumo appareat constituto, possit phaedrum inciderint ex usu, quis ignota cotidieque nam ea. Cum deserunt periculis ocurreret.
       </p>
   </div>
   <a href="#">Read More</a>
</div>

Давайте стилизуем эту единственную карту.

CSS

Добавьте закругленные углы и тень.

.post-front, .post-back {
   /* Existing styles here */
   border-radius: 10px;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

Стили лица.

.post-img {
   background-size: cover;
   background-position: center;
   height: 300px;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
}
.post-info {
   padding: 20px 30px 30px;
}
.post-info span {
   font-size: 0.8rem;
   color: #808080;
}
.post-info h2{
   font-weight: bold;
   font-size: 1.2rem;
   padding-top: 5px;
}

Задние стили лица.

.post-back {
   background-color: #ffffff;
   padding: 30px;
   display: flex;
   flex-direction: column;
   justify-content: space-between; /* To push the read more button to bottom */
   align-items: flex-start; /* To position the read more button at the left */
}
.post-back h2{
   font-weight: bold;
   font-size: 1.2rem;
   padding-top: 5px;
}
.post-back p {
   margin-top: 10px;
   line-height: 1.6;
}
.post-back a{
   text-decoration: none;
   color: #ffffff;
   background-color: #5678ba;
   padding: 10px 14px;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   font-size: 0.8em;
   font-weight: bold;
   border-radius: 5px;
}

Это делает это. Мы усовершенствовали нашу единственную карту. Добавьте еще две карточки в разметку, оберните все карточки внутри flex-контейнера и добавьте стили, чтобы центрировать их. Ниже приведена разметка и CSS для того же.

HTML

<div class="container">
   <div class="post-wrap"> <!-- The parent element -->
       <div class="post"> <!-- Child element that flips -->
           <div class="post-front">
               <div class="post-img" style="background-image: url('post1.jpg');"></div>
               <div class="post-info">
                   <span>June 25, 2020</span>
                   <h2>Productivity: Expectations vs Reality</h2>
               </div>
           </div>
           <div class="post-back">
               <div class="post-except">
                   <h2>Productivity: Expectations vs Reality</h2>
                   <p>
                       Et hinc magna voluptatum usu, cum veniam graece et. Ius ea scripserit temporibus, pri cu harum tacimates neglegentur. At adipisci incorrupte nam. Cu qui sumo appareat constituto, possit phaedrum inciderint ex usu, quis ignota cotidieque nam ea. Cum deserunt periculis ocurreret.
                   </p>
               </div>
               <a href="#">Read More</a>
           </div>
       </div>
   </div>
   <div class="post-wrap">
       <div class="post">
           <div class="post-front">
               <div class="post-img" style="background-image: url('post2.jpg');"></div>
               <div class="post-info">
                   <span>May 19, 2020</span>
                   <h2>Will Artificial Intelligence Rule the World?</h2>
               </div>
           </div>
           <div class="post-back">
               <div class="post-excerpt">
                   <h2>Will Artificial Intelligence Rule the World?</h2>
                   <p>
                       Habemus principes eos id, eu sonet patrioque nam. Eu his mazim insolens, et vim saperet laboramus. Enim gubergren temporibus vix ei. Dicunt iuvaret sadipscing te nam, legere assueverit sed in, at everti labores.
                   </p>
                   <p>
                       Dico facilis dissentias mea cu. Nam assum eripuit an.
                   </p>
               </div>
               <a href="#">Read More</a>
           </div>
       </div>
   </div>
   <div class="post-wrap">
       <div class="post">
           <div class="post-front">
               <div class="post-img" style="background-image: url('post3.jpg');"></div>
               <div class="post-info">
                   <span>July 11, 2020</span>
                   <h2>This Week's Top Stories in Web Design</h2>
               </div>
           </div>
           <div class="post-back">
               <div class="post-except">
                   <h2>This Week's Top Stories in Web Design</h2>
                   <p>
                       Scaevola definitiones eum et. Assum postulant periculis per ei. Doming scribentur sea an. Eum verear docendi tincidunt in.
                   </p>
                   <p>
                       Ne duo posse deserunt, at eam euismod torquatos, est velit essent in. Et diam meliore cotidieque vim. Dicit ignota repudiandae ei pri.
                   </p>
               </div>
               <a href="#">Read More</a>
           </div>
       </div>
   </div>
</div>

CSS

.container {
   max-width: 1200px;
   margin: auto;
   padding: 60px;
   display: flex;
   justify-content: center;
   flex-wrap: wrap; /* Required to position the posts one below the other on smaller devices */
}
.post-wrap {
   /* Existing styles here */
   flex: 1;
   margin: 0 15px 30px;
}

Теперь единственная ожидающая часть — сделать это отзывчивым. Просто измените фиксированную ширину .post-wrap к min-width и max-width вместо.

.post-wrap {
   /* Existing styles here */
   min-width: 300px;
   max-width: 380px;
}

И мы сделали это! Измените размер окна браузера, чтобы увидеть, как посты позиционируются на разных размерах экрана.

Как создать флип-карты с помощью CSS — готовый пример

В этом уроке мы использовали эффект флип-карты для постов в блоге. Вы можете проявить творческий подход и использовать это для отображения профилей команды, элементов портфолио или чего-либо еще. На случай, если вы не получили ожидаемого результата, вот вам полный исходный код.

СКАЧАТЬ ИСХОДНЫЙ КОД

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.

[ad_2]
Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — Узнайте, как создавать флип-карты с помощью CSS

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»