Фрагменты Кода
Найдите идеальный компонент для вашего следующего проекта.
Аккордеон на чистом CSS (FAQ)
Доступный компонент аккордеона (FAQ), реализованный только с использованием HTML-элементов details/summary и CSS, без применения JavaScript.
Аккордеон FAQ
Реализовано только с использованием элементов HTML5/сводки и CSS, JavaScript не требуется. Доступный аккордеон для часто задаваемых вопросов с плавной анимацией открытия и закрытия.
Аккордеон изображений
Аккордеон, который отображает не только текст, но и красивое фоновое изображение при открытии панели.
перекрывающиеся группы аватаров
Пользовательский интерфейс аватара с несколькими значками пользователей, расположенными друг над другом, и значком, показывающим, сколько человек осталось.
Анимированный градиентный фон
Красивый градиентный фон с плавным изменением цветов, реализованный исключительно на CSS.
Анимированный Mesh-градиент
Это фоновый компонент с динамической градацией сетки, в котором цвета плавно меняются и смешиваются, реализованный с использованием только CSS.
Фон Aurora
Фантастический фоновый эффект, напоминающий северное сияние, с множеством анимированных овальных пятен и фильтров. Реализовано с помощью чистого CSS.
Фон с частицами
Фоновый эффект, генерирующий плавающие частицы с помощью CSS-анимации.
Анимированный фон в горошек
Это фоновый компонент, который использует радиальный градиент CSS для рисования чистого узора в горошек с анимацией.
Pulsing Status Badge
Значок с волнистой анимацией (Пульс), подчеркивающий, что вы находитесь в сети или ведете прямую трансляцию.
Кнопка в стиле киберпанк
Футуристический компонент кнопки с неоновыми эффектами и анимацией сбоев, который отлично смотрится в темной теме.
Кнопка с градиентной рамкой
Этот компонент кнопки имеет красивую вращающуюся градиентную рамку за счет сочетания CSS `-webkit-mask-composite` и анимированного градиента.
Кнопка с жидкой заливкой
Кнопка, которая волнообразно наполняется жидкостью снизу при наведении курсора.
Магнитная кнопка
Интерактивный магнитный компонент кнопки, который плавно следует за курсором мыши, как будто он притягивается магнитом.
Кнопка Неоморфизм
Пользовательский интерфейс кнопки в стиле неоморфизма (Neumorphism), обладающий объемной и мягкой текстурой, реализованный исключительно на CSS.
Кнопка с эффектом мерцания
Красивый компонент кнопки, который излучает полосу света (эффект мерцания) при наведении курсора мыши и периодически.
3D-карточка с переворотом
Интерактивный компонент карты, который переворачивается в 3D-пространстве при наведении курсора мыши.
Карточка профиля с эффектом стекла
Элегантная полупрозрачная карточка профиля пользователя, в которой используется эффект матового стекла (стекломорфизм).
Карточка Глассморфизм
Современный и красивый UI-компонент карточки в стиле глассморфизма, использующий прозрачность и эффект матового стекла.
Карточка с неоновым свечением
Это интерактивный компонент пользовательского интерфейса карты, в котором при наведении курсора край карты загорается как неоновый свет, а прожектор перемещается в зависимости от положения мыши.
Анимированная карточка тарифа
Современный компонент ценовой карты, который выделяется при наведении курсора и имеет анимированный раздел цен.
Карточка со счетчиком статистики
Это компонент карты статистики, который идеально подходит для информационных панелей и целевых страниц, поскольку числа анимируются и отсчитываются от нуля при прокрутке страницы.
бесконечная карусель с шатером
Компонент, который позволяет логотипам и карточкам прокручиваться по горизонтали без перерыва.
мега-макет нижнего колонтитула
Большой нижний колонтитул со ссылками в несколько столбцов, подпиской на рассылку новостей и значками социальных сетей.
Анимированная строка поиска
Минималистичная панель поиска, которая плавно расширяется при нажатии на значок.
Кастомный тумблер
Пример реализации красиво анимированного кастомного тумблера, заменяющего стандартный чекбокс.
Область загрузки файлов
Современная область загрузки файлов с поддержкой перетаскивания.
Инпут с плавающим лейблом
Современное поле ввода с заполнителем, который при фокусировке плавно появляется в виде метки.
Многошаговая форма
Пользовательский интерфейс, который переключается между несколькими этапами (с индикатором прогресса), часто используется на экранах регистрации и т. д.
Поле ввода OTP
Интуитивно понятный компонент ввода 6-значного OTP, который автоматически фокусируется при вводе одного символа и возвращается к предыдущему полю с помощью Backspace. Также поддерживает вставку.
Индикатор надежности пароля
Пользовательский интерфейс, который визуально отображает надежность введенного пароля.
Сетка Bento
Асимметричная, современная сетка коробок для бенто, популярная для ознакомления с функциями и информационных панелей.
Раскладка Masonry
Красивый нерегулярный макет сетки в стиле Pinterest с использованием столбцов CSS
Адаптивная галерея на CSS Grid
Способ реализации адаптивной галереи изображений с использованием auto-fit и minmax, без использования медиазапросов.
Сайдбар с шапкой
Базовый макет современного веб-приложения с фиксированной боковой панелью слева и заголовком вверху. Идеально подходит для экранов управления и продуктов SaaS.
Чистый CSS спиннер загрузки
Современный и элегантный спиннер загрузки, созданный с помощью CSS свойств conic-gradient и mask без использования изображений или JavaScript.
Лоадер в виде волны из точек
Компонент загрузчика анимации на чистом CSS, не требующий JavaScript, с 5 волнистыми точками.
Текстовый лоадер с глитч-эффектом
Текстовый экран загрузки с эффектом глюка в стиле киберпанка.
Прогресс-бар
Это компонент-загрузчик, который реализует три типа анимации индикатора выполнения: градацию, полосу и пульс, используя чистый CSS.
Пульсирующий лоадер
Спиннер загрузки с градацией и кольцевой анимацией, распространяющейся как рябь.
Скелетон экрана
Скелетный пользовательский интерфейс с богатой мерцающей анимацией, отображаемой при загрузке контента.
Модальное окно в стиле глассморфизм
Красивый модальный диалог в виде стекла с размытым фоном.
Хлебные крошки
Современная и красивая навигационная цепочка в форме стрелок.
Плавающий Dock
Навигация по плавающей доке в стиле macOS, где значки расширяются при наведении курсора.
Анимация гамбургер-меню
Реализация красивой и интерактивной анимации гамбургер-меню, которое плавно превращается в значок «X» при клике.
Сворачиваемое боковое меню
Это навигация на боковой панели, которую можно использовать на информационных панелях и т. д., и которую можно свернуть до состояния только значков.
Фиксированная панель навигации
Прикрепленный компонент панели навигации, который замораживается с эффектом стеклянного морфизма и меняется на компактный стиль при прокрутке.
Секция с карточками фич
Раздел ознакомительных карточек функций для SaaS/лендинговых страниц. Компонент пользовательского интерфейса карты с градационной рамкой, которая мягко светится при наведении курсора.
Hero-секция с видеофоном
Это главный раздел, в котором на заднем плане размещается зацикленное видео, чтобы придать ему визуальный эффект.
Разделенная Hero-секция
Жирная типографика и визуальные эффекты разделены на левую и правую части, при этом главный раздел выдвигается при загрузке.
Адаптивная таблица ценников на Tailwind CSS
Современный и адаптивный UI-сниппет секции таблиц с ценами, идеально подходящий для SaaS платформ. Реализовано только с использованием Tailwind CSS.
Слайдер отзывов
Раздел слайдера для отображения карусели отзывов пользователей.
Вертикальный таймлайн
Вертикальная временная шкала, представляющая этапы и историю проекта.
Табы с анимированным подчеркиванием
Навигация по вкладкам с индикаторами подчеркивания, которые плавно следуют за активными вкладками.
Toast-уведомление об успехе
Всплывающее всплывающее уведомление, информирующее пользователя об успешной операции.
Анимированный магнитный тултип
Сложная плавно появляющаяся анимированная всплывающая подсказка, плавно повторяющая движение курсора над элементом.
Контекстное меню
Пользовательское контекстное меню с богатым дизайном, вызываемое правой кнопкой мыши.
Тултип на чистом CSS
Легкий и плавный тултип (всплывающая подсказка) при наведении, реализованный только на CSS, без использования JavaScript.
Popover-меню
Всплывающее меню, которое открывается при нажатии (или фокусе) и отображает список действий, а не при наведении курсора.