Берлога программиста | Веб и не только

Custom Cursor Кастомный курсор, реализованный с помощью CSS и Anime.js. #курсор #css #animejs

Animated Tab Bar Анимированная панель вкладок, которая реализована с помощью HTML, CSS и JavaScript. Animated tab bar implemented with HTML, CSS and JavaScript. #frontend #tabbar #html #css #javascript

React Slider w/ Hover Effect Слайдер, созданный с помощью React. При наведении на слайды изображение "примагничивается" к курсору. Подобный эффект реализован с помощью React Transition Group. Slider created with React. When you hover over the slides, the image is "magnetised" to the cursor. A similar effect is implemented using the React Transition Group. #frontend #Slider #React #css #javascript

Tabbar Панель вкладок с жидкой анимацией переключения между пунктами, реализованная с помощью GSAP. #панельвкладок #анимация #GSAP

Liquid UI Elements Жидкие радио-кнопки, переключатели и чекбоксы. Анимация выполнена с помощью GSAP. #радиокнопки #чекбокс #переключатель #gsap

Fancy Border Radius CSS Необычная анимация изменяющейся формы, выполненная на чистом CSS. Fancy shape-shifting animation done in pure CSS. #frontend #css

Welcome - CSS Animation Очень интересная CSS-анимация приветствия. #css #анимация

Magnetic button animation Анимация примагничивающихся кнопок при наведении, реализована с помощью CSS и JavaScript. #кнопка #css #javascript

Neumorphic form Форма в стиле неоморфизма на чистом CSS. A neomorphic form with pure CSS. #frontend #css #Neumorphic #form

Hopdot Loader Плавный и приятный прелоадер в виде перекатывающихся точек, реализованный с помощью GSAP. #прелоадеры #gsap

Sale label Несколько примеров реализации движущейся этикетки распродажи на чистом CSS. Here are some examples moving sale labels, CSS only. #frontend #css #label

Like Overflow Реализован на React и анимирован с помощью библиотеки GSAP. Implemented in React and animated using the GSAP library. #frontend #react #GSAP

Rating Выставление рейтинга в виде звезд, анимация реализована с помощью библиотеки GSAP. #рейтинг #gsap

Cyberpunk 2077 Buttons Кнопки Cyberpunk 2077 на чистом CSS. Glitch - эффекты автор реализовал с помощью CSS свойства clip-path. #кнопка #css

2021 Карточка с плавным 3D-наклоном при наведении, созданная с помощью библиотеки Tilt.js. Эта библиотека в сжатом виде весит всего 1,71 КБ, поддерживает легкий эффект параллакса с частотой 60+ кадров в секунду. A smooth 3D hover card created with the Tilt.js library. This compressed library weighs only 1.71KB and supports light parallax effect at 60+ frames per second. #frontend #tiltjs #javascript #3D

TOASTS Пример реализации всплывающих уведомлений: информационное, предупреждающее уведомления и уведомление об успехе. Реализовано с помощью CSS и JavaScript. #уведомления #css #javascript

Accessible Custom Toggle Switch Отличная демонстрация того, как разметить и стилизовать семантический checkbox, чтобы он выглядел и вёл себя как toggle switch. A great demonstration of how to mark up and style a semantic checkbox to make it look and behave like a toggle switch. #frontend #toggle #switch #checkbox

Glass Card w/ SVG + GSAP Карта в стиле стекломорфизм. Для оптимальной производительности не используется фильтр размытия SVG; только размытый JPG, который маскируется формой карты. Card in the style of glassmorphism. For optimal performance, no SVG blur filter is used; just a blurry JPG that is masked by the shape of the map. #frontend #glass #svg #GSAP

Animated Fill and Strikethrough Checkboxes Автор реализовал анимацию выполнения checkbox с помощью CSS и JavaScript. #чекбокс #анимация #css #javascript

Glassmorphism Автор демонстрирует, как создать эффект стекломорфизма с помощью чистого CSS. The author demonstrates how to create a glassmorphism effect using CSS only. #frontend #css #Glassmorphism