☹️ Весьма оригинальная 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

Небольшая шпаргалка по Grid CSS

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

Ну чё пора?! 👨‍💻

А вы как относитесь к кодингу по ночам?

👍 — обожаю ночной кодинг
🤨 — сомнительно, но иногда можно
🫡 — спасибо, но нет... я лучше посплю

🔔 Переключатель уведомлений на CSS

Код и демо: codepen.io/josetxu/pen/XWQXrmZ

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

HTML разметка ⤵️

<div class="layout">
    <header>Header</header>
    <nav>Sidebar</nav>
    <main>Main</main>
    <article class="widget">Widget</article>
    <article class="statistics">Statistics</article>
    <footer>Footer</footer>
</div>

CSS стили ⤵️

.layout {
  display: grid;
  gap: 4px;
  grid-template-rows: 40px 40px auto 60px 60px 40px;
  grid-template-columns: 1fr;
  grid-template-areas: 'header' 'sidebar' 'main' 'widget' 'statistics' 'footer';
  height: 100vh;
}
@media (min-width: 480px) {
  .layout {
    display: grid;
    grid-template-rows: 40px auto 80px 40px;
    grid-template-columns: 160px auto auto;
    grid-template-areas: 'header header header' 'sidebar main main' 'sidebar widget statistics' 'footer footer footer';
  }
}
header {
  grid-area: header;
  background: #c08bfd;
}
footer {
  grid-area: footer;
  background: #c08bfd;
}
nav {
  grid-area: sidebar;
  background: #f6c356;
}
main {
  grid-area: main;
  background: #b2ee94;
}
.widget {
  grid-area: widget;
  background: #ff8983;
  width: 100%;
}
.statistics {
  grid-area: statistics;
  background: #99c2fe;
  width: 100%;
}

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

✔️ Анимированное добавление и удаление карточек с помощью CSS и JavaScript

Код и демо: codepen.io/bramus/pen/zxOOzYX