✧ Как создание 3D эффект для текста используя HTML CSS и JavaScript

04.12.2024, 05:51
3 просмтотра
(0)
✧ Как создание 3D эффект для текста используя HTML CSS и JavaScript

В этом видео мы сделаем 3D эффект для текста используя HTML CSS и jаvascript. Вы можете посмотреть видео демонстрацию, попробовать сверстать самому по видео или скачать архив с готовым кодом по ссылке, указанной ниже.. Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.

В архиве находится:

  • Исходные файлы HTML, 
  • Исходные файлы CSS, 
  • Исходные файлы jаvascript, 
  • Иконки шрифтов, 
  • Файлы библиотеки и плагинов, 

Совместимые браузеры 

  • Firefox, 
  • Safari, 
  • Edge, 
  • Opera, 
  • Chrome, 
  • Yandex, 

HTML КОД:

<!DOCTYPE html>
<html lang="xxz">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D Text Effect - jаvascript</title>

    <!--css file-->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="text">3D Text Effect</div>

    <script src="app.js"></script>
  </body>
</html>

CSS КОД:

/* Google Fonts(Poppins) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #222;
  overflow: hidden;
}

.text {
  position: relative;
  color: #fff;
  font-size: 200px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  line-height: 220px;
  -webkit-transform: rotate(-28deg) skew(25deg);
      -ms-transform: rotate(-28deg) skew(25deg);
          transform: rotate(-28deg) skew(25deg);
}

.text::before {
  position: absolute;
  content: "3D Text Effect";
  color: rgba(255, 255, 255, 0.3);
  text-shadow: none;
  left: -30px;
  top: 30px;
  -webkit-filter: blur(8px);
          filter: blur(8px);
  z-index: -1;
}

jаvascript КОД:

let text = document.querySelector(".text");

let shadow = "";

for (let i = 0; i < 30; i++) {
  shadow += (shadow ? "," : "") +
            -i * 1 + "px " + 
             i * 1 + "px 0 #d9d9d9";
}

text.style.textShadow = shadow;
Добавить комментарий
Кликните на изображение чтобы обновить код, если он неразборчив
x