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

Neomorphic Form Ещё одна форма в стиле популярного неоморфизма. Реализована на чистом CSS. Использованы иконки Ionicons, которые придают форме ещё больше стильности. Another form in the style of popular neomorphism. Implemented in pure CSS. Ionicons icons have been used to give the form even more style. #neomorphic #form #css #ionicon

Mini Music Player - VueJS Стильный мини-плеер, реализованный на VueJS. Stylish mini-player implemented in VueJS. #music #player #vue #vuejs

Paper plane button Кнопка, анимированная в улетающий бумажный самолётик при успешной отправке данных. Анимация реализована с помощью GSAP. A button animated into a flying paper airplane when the data is successfully sent. Animation is implemented using GSAP. #paper #plane #button #GSAP #animation

Neuomorphic Checkboxes Неоморфные кнопки, реализованные с помощью checkbox на чистом CSS. Neuomorphic buttons implemented with pure CSS checkbox. #neuomorphic #checkbox #frontend

Feedback Reactions Живые реакции для обратной связи. Лица построены с помощью SVG-элементов. Основная часть анимации реализована с помощью CSS. JavaScript применяется для добавления и удаления класса .active при клике на реакцию. Live reactions for feedback. The faces are built using SVG elements. Most of the animation is done using CSS. JavaScript is used to add and remove the .active class on click on react. #feedback #reaction #css #javascript #frontend

Holiday Feature Folding Cards Необычная реализация карточек в виде открыток. При наведении раскрывается скрытая часть карточек. Реализовано на чистом CSS. Unusual implementation of cards in the form of postcards. On hover, the hidden part of the cards is revealed. Implemented in pure CSS. #card #folding #css #frontend

Yet another slider Интересная анимация перелистывания изображений в слайдере, которая реализована с помощью библиотеки GSAP. Interesting animation of images flipping in the slider, which is implemented using the GSAP library. #slider #GSAP #frontend

Card Hover Interactions Адаптивные карточки с оригинальным взаимодействием, реализованные на чистом CSS. При наведении на тёмном фоне появляется описание и кнопка, изображение немного смещается вверх. Responsive cards with original interactions, implemented in pure CSS. When you hover over a dark background, a description and a button appear, the image shifts up a little. #card #hover #css #frontend

Liquid loader Современный "жидкий" прелоадер, сделан из SVG-элементов. Анимация реализована на чистом CSS. Modern liquid preloader made of SVG elements. The animation is done in pure CSS. #loader #preloader #css #frontend

3D carousel 3D-карусель, реализованный с помощью JavaScript. 3D carousel implemented with JavaScript. #frontend #3d #carousel #javascript

Placeholders Пример реализации позиционирования подписей к инпутам формы при фокусе. Реализовано на чистом CSS. An example of the implementation of positioning captions to form inputs with focus. Implemented in pure CSS. #frontend #placeholder #css

Clipped Image Reveal on Hover Появление изображения при наведении курсора на текст. При этом изображение следует за курсором. Реализовано с помощью JavaScript. The appearance of an image when you hover over the text. In this case, the image follows the cursor. Implemented with JavaScript. #frontend #hover #css #javascript

CSS leaning card effect CSS-эффект наклонных карт, от которых падает тень под определенным углом, что создаёт объем в окружающем пространстве. A CSS effect of oblique maps that cast shadows at a specific angle to create volume in the surrounding space. #frontend #card #leaning #css

Link hover animation Анимация SVG при наведения на ссылку, реализованное на чистом CSS. SVG hover animation implemented in pure CSS. #frontend #link #hover #animation #css

Profile Card Hover Effect Очень простая, но довольно интересная реализация отображения информации профиля в виде карточек с увеличением фотографии при наведении. Реализовано на чистом CSS. A very simple, but quite interesting implementation of displaying profile information in the form of cards with a photo enlargement on hover. Implemented in pure CSS. #frontend #card #hover #css

"Toss" Add to Cart Animation Анимация добавления товара в корзину, реализованная с помощью jQuery. jQuery animation for adding a product to cart. #frontend #addtocart #animation #jquery

Navigation Навигация, реализованная с помощью HTML, CSS и JavaScript. Применен иконочный шрифт Font Awesome. Анимация реализована с помощью GSAP. Navigation implemented with HTML, CSS and JavaScript. The icon font Font Awesome is used. Animation is implemented using GSAP. #frontend #Navigation #JavaScript #FontAwesome #GSAP

Shopping UI Карточки товаров с описанием + карточка добавленных товаров в корзину, реализованные с помощью Vue и axios. Анимация реализована с помощью GSAP. Product cards with descriptions + a card of added products to the cart, implemented using Vue and axios. Animation is implemented using GSAP. #frontend #shopping #ui #Vue #vuejs #GSAP #axios

Pricing Элегантная реализация карточки прайса на чистом CSS. При выборе прайса динамически меняется картинка, а также цвет текста и кнопки. Применены Bootstrap и Unicons. An elegant implementation of a pure CSS price card. When you select a price, the picture changes dynamically, as well as the color of the text and buttons. Bootstrap and Unicons applied. #frontend #pricing #css #Bootstrap #Unicons

Confirm confetti button При клике на эти красивые кнопки вылетает конфетти. Кнопки реализованы с помощью GSAP и Physics2DPlugin. When you click on these beautiful buttons, confetti will fly out. The buttons are implemented using GSAP and Physics2DPlugin. #frontend #confetti #button #GSAP #Physics2DPlugin #JavaScript