Статьи по тегу «CSS»

 

Иконка Рубрики
5 месяцев назад

Создаем гибкие выпадающие списки с помощью Virtual Select

Веб-разработчики сталкиваются с необходимостью предоставления пользователям удобных и отзывчивых элементов управления. Один из таких элементов — выпадающий список выбора (select box).
Frontend 229
5 месяцев назад

Горизонтальная галерея-аккордеон на CSS

Это галерея-аккордеон, реализованная с помощью чистого CSS, которая создает адаптивный горизонтальный макет аккордеона, раскрывающий изображения в полном размере при простом наведении курсора.
Frontend 368
10 месяцев назад

Как сделать видео на фон с помощью CSS

В эпоху цифрового дизайна, фоновое видео на веб-странице становится не просто трендом, но и эффективным инструментом для привлечения внимания посетителя. Отлично подобранное и качественно интегрированное видео способно усилить визуальное воздействие, добавить динамики и глубины в общее впечатление от сайта.
Frontend 334
12 месяцев назад

Граница с градиентным фоном в CSS

Добавление градиентных границ к элементам веб-страницы — это прекрасный способ сделать дизайн более креативным и привлекательным. CSS предоставляет возможность легко реализовать такие границы, используя градиенты.
Frontend 459
1 год назад

Создание видеофона с использованием HTML и CSS

В современном веб-дизайне уделяется все больше внимания интерактивности и визуальным эффектам, и одним из способов сделать вашу страницу более привлекательной является добавление видео фона.
Frontend 583
1 год назад

Переворачивающиеся карточки в CSS | Flip Card

«Flip card» — это визуальный эффект веб-карточки, которая переворачивается при наведении или клике, показывая лицевую и обратную стороны с помощью CSS-анимации.
Frontend 2 297
1 год назад

Анимация блика на кнопке в CSS

Анимация блика на кнопке — это прекрасный способ придать вашим веб-сайтам интересный и привлекательный вид. В этой статье мы рассмотрим, как создать такую анимацию с использованием CSS.
Frontend 3 514
1 год назад

Эффект матового стекла в CSS | Glass Effect

Эффект матового стекла в CSS — стильный дизайнерский трюк, который придает веб-страницам современный и привлекательный внешний вид, создавая иллюзию матовой поверхности с небольшой прозрачностью.
Frontend 1 695
1 год назад

Как оформить элемент input file

Стилизация элемента <input type=»file»> — это способ сделать загрузку файлов на вашем веб-сайте более привлекательной и интуитивно понятной для пользователей. Вместо стандартного внешнего вида кнопки «Обзор» можно создать настраиваемую кнопку, которая лучше впишется в дизайн вашего сайта.
Frontend 1 409
2 года назад

Продвинутая CSS-анимация с примерами

CSS-анимация — это мощный инструмент для создания привлекательного и динамичного UI на сайте. Она позволяет дизайнерам воплощать в жизнь динамичный дизайн и делать веб-сайты более интерактивными и визуально привлекательными.
Frontend 2 787
2 года назад

Основы CSS-анимации: Transitions, Keyframes и функции синхронизации

CSS-анимация стала неотъемлемой частью веб-разработки, позволяя разработчикам создавать динамичный и привлекательный пользовательский интерфейс. В этой статье мы рассмотрим основы CSS-анимации, включая переходы, ключевые кадры и функции синхронизации.
Frontend 1 523
2 года назад

Лучшие плагины VS Code для HTML и CSS

HTML и CSS являются важными технологиями для создания веб-сайтов и веб-приложений. Visual Studio Code (VS Code) — это мощный редактор кода, поддерживающий HTML и CSS, и существует множество подключаемых модулей и расширений, позволяющих улучшить процесс разработки HTML/CSS.
Софт 8 363
2 года назад

UI-компоненты. Кнопка с градиентом на CSS

Создадим красивую кнопку с градиентом на CSS и со значком Font Awesome. В этом примере код HTML создает кнопку с именем класса gradient-btn и включает значок Font Awesome внутри кнопки.
Frontend 971
2 года назад

UI-компоненты. Кнопка с иконкой на CSS

Создадим 5 красивых кнопок со значками на CSS, используя значки Font Awesome. В этом примере код HTML создает 5 кнопок с разными именами классов и включает значки Font Awesome внутри кнопок.
Frontend 1 808
2 года назад

UI-компоненты. Анимированные кнопки на CSS

Создадим 5 красивых анимированных кнопок на CSS3. В этом примере код HTML создает 5 кнопок с разными именами классов. Код CSS стилизует и анимирует кнопки с помощью псевдокласса :hover, который запускает анимацию, когда пользователь наводит курсор на кнопку.
Frontend 870
2 года назад

UI-компоненты. Подсказка при наведении

Подсказка при наведении (ее еще называют тултип) показывает блок с текстом при наведении на элемент. Тултип показывает справочную информацию о содержимом элемента.
Frontend 861
2 года назад

UI-компоненты. Ползунок диапазона

Ползунок диапазона позволяет выбрать между минимальным и максимальным значением. Данный элемент повышает интерактивность на сайте. Браузерные ползунки зачастую не подходят, поэтому мы сделаем свой кастомный ползунок.
Frontend 1 184
2 года назад

UI-компоненты. Кастомные радиокнопки на CSS

Радиокнопки используются для выбора одного из множества значений. Если текст радиокнопки короткий, то уместно использовать переключатель. Такой вариант мы реализуем в этой статье с использованием чистого CSS.
Frontend 669
2 года назад

UI-компоненты. Кастомные чекбоксы на CSS

Чекбокс используется для выбора двух состояний у одного параметра. Он может использоваться для выбора элементов списка, например, для выбора нескольких документов, или для активации уведомлений и выбора конкретных ситуаций, в которых их следует отправлять.
Frontend 1 144
2 года назад

UI-компоненты. Переключатель на CSS

Переключатель (его еще называют тумблер) помогает выбрать два состояния. Например, включение или отключение темной темы на сайте. Чисто функционально переключатель — это тот же самый чекбокс.
Frontend 1 339