🖥 Красивая анимация для слайдера с помощь CSS и JavaScript

Код и демо: codepen.io/Nidal95/pen/WbvNarw

🖥 Красивый параллакс эффект при прокрутке страницы вниз

Код и демо: codepen.io/osmosupply/pen/NWQevrB

Карточка с интересным эффектом на CSS

При наведение на текст появляется красивое теневое обрамление, а поверхность карты переливается голографическим градиентом.

HTML-разметка

<div class="holographic-container">
    <div class="holographic-card">
        <h2>HOLOGRAM</h2>
    </div>
</div>

CSS-стили

.holographic-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #000;
}
.holographic-card {
  width: 300px;
  height: 200px;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  transition: all 0.5s ease;
}
.holographic-card h2 {
  color: #0ff;
  font-size: 2rem;
  position: relative;
  z-index: 2;
}
.holographic-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    0deg, 
    transparent, 
    transparent 30%, 
    rgba(0,255,255,0.3)
  );
  transform: rotate(-45deg);
  transition: all 0.5s ease;
  opacity: 0;
}
.holographic-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(0,255,255,0.5);
}
.holographic-card:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}

👍- если было полезно | ➡️ WebTaverna

Маскирование в CSS c помощью свойства mask ☀️

Данное CSS свойство устанавливает изображение, которое используется как слой маски для элемента ⤵️

img {
  mask: url("./graph.png");
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: center;
} 

🔜 mask: url() - задаём png изображение слоя-маски;
🔜 mask-repeat - определяем порядок повторений;
🔜 mask-size - определяем размеры изображения-маски;
🔜 mask-position - устанавливаем начальную позицию относительно слоя;

Также это можно записать в одну строку ⤵️

img {
  mask: url("./graph.png") center/cover no-repeat;
}

👍- если было полезно | ➡️ WebTaverna

☹️ Весьма оригинальная CSS анимация для загрузчика

Код и демо: codepen.io/jkantner/pen/VwooLx

🖥 Пример создания адаптивной сетки с помощь Flexbox CSS

HTML - разметка

<div class="container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
</div>

CSS - стили

.container {
    font-family: 'Segoe UI', Tahoma;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}
.flex-item {
    background: #F4BD50;
    font-size: 1.5rem;
    display: flex;
    height: 3.75rem;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    flex-basis: 6.25rem;
}
.flex-item:nth-child(even) {
    background: #c7a4ff;
}

👍- если было полезно | ➡️ WebTaverna

😎 Пожалуй, это лучшее объяснения, как работает z-index в CSS

z-index — CSS свойство, которое определяет порядок наложения элементов в трёхмерном пространстве на веб-странице

👍- если было полезно | ➡️ WebTaverna

🔈 Интересная реализация контроллеров регулировки громкости и яркости

Код и демо: codepen.io/jkantner/pen/JoPXzJJ

Анимация в URL с помощью JavaScript и Emoji 👨‍💻

const myEmojis = ['😃', '🤨', '😡']

function urlAnimate () {
    
    window.location.hash = myEmojis
        [Math.floor((Date.now()/100)%myEmojis.length)]

    setTimeout(urlAnimate, 1000)
}

urlAnimate()

👍- если было полезно | ➡️ WebTaverna

✔️ Неоновый Toggle Switch с помощью CSS

Код и демо: codepen.io/jkantner/pen/MWzqMrp

💓 Анимация в виде "Шкалы сердцебиения" с помощью SVG и CSS

Отлично подойдет для оформления каких-либо элементов на сайтах медицинской тематики

HTML-разметка

<div class="loading">
    <svg width="16px" height="12px">
        <polyline id="back" points="1 6 4 6 6 11 10 1 12 6 15 6"></polyline>
        <polyline id="front" points="1 6 4 6 6 11 10 1 12 6 15 6"></polyline>
    </svg>
</div>

CSS-стили

.loading {
  transform: scale(10);
}
.loading svg polyline {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.loading svg polyline#back {
  stroke: #ff4d5033;
}
.loading svg polyline#front {
  stroke: #ff4d4f;
  stroke-dasharray: 12, 36;
  stroke-dashoffset: 48;
  animation: dash 1s linear infinite;
}
@keyframes dash {
  62.5% {
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
  }
}

👍- если было полезно | ➡️ WebTaverna

🎨 Красивый эффект для слайдера с изображениями

Код и демо: codepen.io/leonam-silva-de-souza/pen/YzmdJOd

Анимированный текст с градиентом на 🔠🔠🔠

HTML разметка

<h1>t.me/WebTaverna</h1>

CSS стили

h1 {
  background: linear-gradient(90deg, 
              #d988da, #dcde8a, #d988da);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}
@keyframes animate {
  0% { background-position: -500%; }
  100% { background-position: 500%; }
}

👍- если было полезно | ➡️ WebTaverna