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

Код и демо: codepen.io/yudizsolutions/pen/wvZEeNE

🧑‍💻 А к вам кто должен прийти? 🔥

🎅 - Дед Мороз
😢 - Дед Лайн

Подборка UI компонентов стилизованных под мыльные пузыри 🛁

Код и демо: codepen.io/DeyJordan/pen/poQvgaz

Новый более удобный синтаксис медиа запросов в CSS

Media Queries Range - небольшое, но приятное изменение, позволяющее использовать более понятный синтаксис в медиазапросах

🖥 Доступны следующие операторы сравнения:

< сравнивает меньше ли одно значение другого;

> сравнивает больше ли одно значение другого;

= сравнивает равно ли одно значение другому;

<= сравнивает меньше или равно одно значение другому;

>= сравнивает больше или равно одно значение другому.

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

📱 Пиксельная анимация для радио-кнопок

Код и демо: codepen.io/jdillon/pen/MYwjeYN

🖥 Эффект зума с поворотом при наведении на изображение с помощью CSS

Идея очень простая 😏
🔜 Контейнер имеет фиксированный размер и overflow со значением hidden, чтобы изображение обрезалось и не выходило за его границы;
🔜 При наведении курсора изображение масштабируется внутри контейнера с помощью transform: scale(1.2) и делает небольшой поворот благодаря rotate(10deg).

HTML разметка

<div class="container">
    <img src="image.jpg" alt="Изображение">
</div>

CSS стили

.container {
  width: 640px;
  height: 360px;
  overflow: hidden;
}
.container img {
  object-fit: cover;
  transition: transform 0.8s ease;
}
.container:hover img {
  transform: scale(1.2) rotate(10deg);
}

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

🙂 Эффект пикселизации для карточек с помощью CSS, SVG и JavaScript

<pixel-canvas> Web Component - это очередная интересная работа с CodePen, в который автор реализовал "Пиксельный эффект" в качестве фона для карточек. При этом у каждой из четырех карточек эффект отличается цветом, величиной пикселей и скоростью анимации.

Пиксельный эффект (или эффект пикселизации) — представляет собой разбиение картинки на квадраты (пиксели).

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

⌛ Небольшая коллекция интересных анимаций загрузки на CSS

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

Определяем пустой HTML элемент с помощью CSS

Псевдокласс :empty используется для выбора пустых элементов, иными словами, которые не содержат дочерних элементов, текста или пробелов.

Это бывает очень полезно, когда нет возможности управлять элементом, но точно знаешь, что иногда он может быть пустым. Псевдокласс :empty позволяет убрать лишние отступы или рамки, которые могут быть у пустого элемента.

К примеру <p></p> является пустым элементом, а с пробелом <p> </p> - уже нет.

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

🖥 Интересная анимация для навигации на CSS

Код и демо: codepen.io/simeydotme/pen/LYLxJqV