7 простых, но интересных ховер эффектов для кнопок в вашу коллекцию 👍

Код и демо: codepen.io/alvarotrigo/pen/YzVdgXY

🔠🔠🔠 Обводка текста с эффектом неонового свечения с помощью CSS

h1 {
  text-shadow: 10px 10px 30px #2101ec, 
              -10px -10px 30px #8a31e9;
  -webkit-text-stroke: 2px #fc65ff;
  -webkit-text-fill-color: transparent;

  font-size: 4em;
  font-weight: bold;
}

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

🤔Рано или поздно, каждый разработчик задумывается об этом

🎮 Забавная игрушка на JavaScript, в которой нужно попасть зайцем в морковку, чтобы её разбить

Прыжок осуществляется нажатием на левую кнопку мыши. Реализована при помощи библиотеки Three.js 👍

Код и демо: codepen.io/Yakudoo/pen/poqazQo

👨‍💻 Создаем фон в клеточку с помощью CSS

Для реализации данного фона нам потребуется CSS свойство background-image с двумя градиентами: один для горизонтальных линий, второй для вертикальных, а также background-size для того, чтобы задать размер каждой ячейки.

HTML разметка

<div class="background"></div>

CSS стили

.background {
  width: 577px;
  height: 194px;

  /* Горизонтальные и вертикальные линии */
  background-image: linear-gradient(rgba(255,255, 255, 0.2) 2px, transparent 1px), linear-gradient(90deg, rgba(255,255, 255, 0.2) 1px, transparent 1px); 
  
  /* Размер ячейки */
  background-size: 32px 32px; 
}

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

🍔 8 интересных анимаций для меню-гамбургер на CSS

Код и демо: codepen.io/ainalem/pen/LJYRxz

⌛ Лоадер с эффектом пульсации на CSS

HTML-разметка

<div class="main">
    <div class="circle"></div> 
    <div class="circle"></div> 
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div> 
</div>

CSS-стили

body {
    background-color: #242834;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
} 
.main {
    display: flex;
    width: 200px;
    justify-content: space-between; 
    align-items: center;
} 
.circle {
    width: 20px;
    height: 20px; 
    background: linear-gradient(#7864f4, #3072d3); 
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.circle:before {
    content: "";
    width: 20px;
    height: 20px;
    background: linear-gradient(#7864f4, #3072d3); 
    border-radius: 50%;
    opacity: 0.7;
    animation: loading 2s;
    animation-iteration-count: infinite;
}
@keyframes loading {
    100% {
        transform: scale(3); 
        opacity: 0;
    }
}
.circle:nth-child(2):before { 
    animation-delay: 0.3s;
} 
.circle:nth-child(3):before { 
    animation-delay: 0.6s;
}
.circle:nth-child(4):before { 
    animation-delay: 0.9s;
}
.circle:nth-child(5):before { 
    animation-delay: 1.2s;
}

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

Пожалуй, это самая простая форма заполнения номера телефона 👩‍💻

P. S сарказм 😉

📱 Интересный эффект при наведение на пункты меню с помощью CSS

Код и демо: codepen.io/yexx/pen/bNdyVmL

Градиентная рамка с закругленными краями c помощью CSS

.box {
  border: 10px solid transparent;
  background: linear-gradient(
              #2a2c34, 
              #2a2c34) padding-box, 
              linear-gradient(45deg, 
              #FF52E5,
              #F6D242) border-box;
  border-radius: 14px;
}

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

⌛ Интересная реализация лоадера с помощью SVG и CSS-анимации

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

Простой, но весьма интересный hover-эффект для текста

HTML разметка

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

CSS стили

h1 {
  color: #fff;
  font-size: 2.5em;
  padding: 0.5rem 1rem;
  position: relative;
}
h1::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: #f29559;
  z-index: -1;
}
h1:hover::before {
  animation: fill 1s forwards;
}
@keyframes fill {
  0% {
    width: 0%;
  }
  50% {
    width: 100%;
    height: 2px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #f29559;
  }
}

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

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

4️⃣ анимирование с помощью CSS иконки: "Вырезать", "Скопировать", "Поделиться" и "Удалить"

Код и демо: codepen.io/hexagoncircle/pen/JGNxjm

Выравнивание чисел с помощью CSS свойства font-variant-numeric

Данное свойство позволяет управлять начертаниями цифр, дробей и порядковых числительных

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

Коллекция: 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