Коллекция: 12 интересных CSS-анимаций для иконок "меню-гамбургер" 🍔

Код и демо: codepen.io/RRoberts/pen/ZBYaJr

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

🖥 Простая анимация появления карточек на CSS

HTML - разметка

<div class="wrapper">
    <div class="card" style="--delay: 0ms"></div>
    <div class="card" style="--delay: 300ms"></div>
    <div class="card" style="--delay: 600ms"></div>
</div>

CSS - стили

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.card {
  width: 200px;
  height: 200px;
  background-color: #f2d492;
  margin: 10px;
  animation: fadeIn 1s ease forwards;
  animation-delay: var(--delay);
  opacity: 0;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

😭 Эффект "Водного Искажения" для изображения на JavaScript

Код и демо: codepen.io/ksenia-k/pen/RwXVMMY

Отличие em от rem : 📌 Наглядная шпаргалка по относительным величинам CSS

Em и rem в CSS — это относительные единицы измерения, которые зависят от размера шрифта.

🔜 Em относится к размеру шрифта родительского элемента.
🔜 Rem относится к размеру шрифта корневого элемента.

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

😂 Слайдер настроения для вашего сайта

Emoji Slider - весьма интересная идея, которая поможет вам оценить степень эмоционального состояния посетителей вашего сайта.

Реализовано с помощь HTML(PUG), CSS(SCSS) и JavaScript

Код и демо: codepen.io/thebabydino/pen/vwJeJN

🏄‍♂️ Анимация текста с эффектом волны и отражения на CSS

HTML разметка

<div class="wave">
    <span style="--i:1">W</span>
    <span style="--i:2">e</span>
    <span style="--i:3">b</span>
    <span style="--i:4">T</span>
    <span style="--i:5">a</span>
    <span style="--i:6">v</span>
    <span style="--i:7">e</span>
    <span style="--i:8">r</span>
    <span style="--i:9">n</span>
    <span style="--i:10">a</span>
</div>

CSS стили

.wave {
  position: relative;
  -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0, 0, 0, .2));
}
.wave span {
  position: relative;
  display: inline-block;
  color: #fff;
  font-size: 6em;
  animation: animate 2s ease-in-out infinite;
  animation-delay: calc(.1s*var(--i));
}
@keyframes animate {
  0% {
      transform: translateY(0px);
  }
  20% {
      transform: translateY(-20px);
  }
  40%,
  100% {
      transform: translateY(0px);
  }
}

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

🎉 7 красивых эффектов конфетти для сайта

Реализовано на HTML, CSS и JavaScript

Код и демо: codepen.io/XZdev/pen/vYEMOgx

Когда удаленщика пытаются уговорить прийти в офис 😒

Остров, на котором живут Java программисты 👨‍💻

🌛 Оригинальный переключатель тёмной и светлой темы для сайта

Код и демо: codepen.io/jh3y/pen/OJeRrKm

Проверяем, правильно ли заполнено поле ввода с цифрами? 🔍

Решить эту задачу нам помогут псевдоклассы в CSS :in-range и :out-of-range, которые используются для стилизации полей ввода, поддерживающих атрибуты min и max

🔜 :in-range - введённое значение попадает в диапазон от min до max;
🔜 :out-of-range - не попадает в диапазон от min до max.

Пример ⤵️

<input type="number" min="1" max="3">

input:in-range {
  background-color: #17a992;
  border: 5px solid #006776;
}
input:out-of-range {
  background-color: #f4a898;
  border: 5px solid #e62a5a;
}

Атрибуты min и max могут иметь поля ввода с типами date, month, week, time, datetime-local, number и range, в которых эти атрибуты задают диапазон допустимых значений, которые пользователь может вводить в поле.

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

🤚 Don't touch the code - забавный эффект рассыпающегося кода на отдельные символы при клике на него

Данный эффект можно применить не только коду, но и любому другому тексту

Код и демо: codepen.io/jh3y/pen/mdNrrKX

🪞 Зеркальное отражение текста с помощью CSS

HTML разметка ⤵️

<h1 data-text="WebTaverna">WebTaverna</h1>

CSS стили ⤵️

h1 {
  position: relative;
  color: #fff;
  font-size: 5em;
  font-weight: 800;
}
h1:before {
  content: attr(data-text);
  position: absolute;
  transform-origin: bottom;
  transform: rotateX(180deg);
  line-height: 1em;
  background: linear-gradient(0deg, #ffffff88 0, rgba(255, 255, 255, 0) 80%);
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0);
  opacity: 0.5;
}

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

💳 Генератор CSS фильтров для вашего сайта

Делимся готовым кодом генератора CSS фильтров, который вы можете использовать в своем проекте

Код и демо: codepen.io/alexandrevacassin/pen/ExzWNyZ