Найдено по тегу «CSS»

 

Иконка Рубрики
1 неделя назад

Новые стандарты CSS 2025: nesting, container queries и scoped-стили

CSS в 2025 году переживает крупнейшее обновление со времён появления Flexbox и CSS Grid. Язык стал гораздо мощнее, гибче и ближе к компонентной разработке.
Frontend 97
3 месяца назад

Что должен знать фронтенд-разработчик: база для успешного старта

Junior‑позиции больше не про «сверстать лендинг». От джуна ждут уверенной базы по веб‑платформе, умения читать документацию, пользоваться инструментами разработчика и показывать это на практике — в резюме, пет‑проектах и на собеседовании.
Frontend 593
3 месяца назад

Курс по Tailwind CSS: Container query #8

Раньше адаптивность вёрстки строилась только на медиазапросах (@media) и брейкпоинтах (sm:, md:, lg:). Но у этого подхода есть ограничение: стили меняются в зависимости от ширины экрана, а не от ширины самого блока.
Frontend 318
3 месяца назад

Курс по Tailwind CSS: Grid-сетки #7

В прошлой статье мы разобрали flexbox. Он отлично подходит для выравнивания и простых макетов: меню, хедеры, блоки в строку. Но если нужно выстроить настоящую сетку карточек или галерею — удобнее использовать Grid.
Frontend 533
3 месяца назад

Курс по Tailwind CSS: Flexbox #6

Flexbox — мощный инструмент для построения макетов. Он упрощает управление расположением элементов по горизонтали и вертикали. В Tailwind всё это сводится к простым утилитам, которые легко комбинировать и читать прямо в разметке.
Frontend 563
3 месяца назад

Курс по Tailwind CSS: Цвета и шрифты #4

В прошлой статье мы разобрали базовые утилиты. Теперь углубимся в работу с цветами и шрифтами. В Tailwind CSS v4 эти возможности стали ещё удобнее: библиотека поддерживает современную цветовую модель OKLCH, P3-палитры, а также предоставляет новый способ расширять тему с помощью @theme.
Frontend 657
3 месяца назад

Курс по Tailwind CSS: Первые шаги с утилитами #3

В прошлой статье мы настроили окружение и убедились, что Tailwind работает. Теперь подробнее разберём самые часто используемые утилиты: отступы, цвета, текст и адаптивность.
Frontend 696
3 месяца назад

Курс по Tailwind CSS: Установка #2

Tailwind CSS — это современный CSS-фреймворк, который позволяет быстро и удобно стилизовать сайты, не тратя время на написание «с нуля» длинных стилей.
Frontend 685
3 месяца назад

Курс по Tailwind CSS: Введение #1

Tailwind CSS — это utility-first фреймворк: вы собираете интерфейс из маленьких утилит прямо в разметке, не переключаясь между HTML и длинными кастомными стилями.
Frontend 614
1 год назад

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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