Code Lab
Главная
Блог
Готовые решения
Курсы
Обратная связь
Найдено по тегу «CSS»
Рубрики
Обучение
206
Frontend
175
Обзоры
140
Мобильная разработка
68
Backend
41
Железо
30
Сервера
26
CMS
25
Софт
25
Общее
23
GameDev
17
Инструменты сборки
16
Новые стандарты CSS 2025: nesting, container queries и scoped-стили
CSS в 2025 году переживает крупнейшее обновление со времён появления Flexbox и CSS Grid. Язык стал гораздо мощнее, гибче и ближе к компонентной разработке.
Что должен знать фронтенд-разработчик: база для успешного старта
Junior‑позиции больше не про «сверстать лендинг». От джуна ждут уверенной базы по веб‑платформе, умения читать документацию, пользоваться инструментами разработчика и показывать это на практике — в резюме, пет‑проектах и на собеседовании.
Курс по Tailwind CSS: Container query #8
Раньше адаптивность вёрстки строилась только на медиазапросах (@media) и брейкпоинтах (sm:, md:, lg:). Но у этого подхода есть ограничение: стили меняются в зависимости от ширины экрана, а не от ширины самого блока.
Курс по Tailwind CSS: Grid-сетки #7
В прошлой статье мы разобрали flexbox. Он отлично подходит для выравнивания и простых макетов: меню, хедеры, блоки в строку. Но если нужно выстроить настоящую сетку карточек или галерею — удобнее использовать Grid.
Курс по Tailwind CSS: Flexbox #6
Flexbox — мощный инструмент для построения макетов. Он упрощает управление расположением элементов по горизонтали и вертикали. В Tailwind всё это сводится к простым утилитам, которые легко комбинировать и читать прямо в разметке.
Курс по Tailwind CSS: Цвета и шрифты #4
В прошлой статье мы разобрали базовые утилиты. Теперь углубимся в работу с цветами и шрифтами. В Tailwind CSS v4 эти возможности стали ещё удобнее: библиотека поддерживает современную цветовую модель OKLCH, P3-палитры, а также предоставляет новый способ расширять тему с помощью @theme.
Курс по Tailwind CSS: Первые шаги с утилитами #3
В прошлой статье мы настроили окружение и убедились, что Tailwind работает. Теперь подробнее разберём самые часто используемые утилиты: отступы, цвета, текст и адаптивность.
Курс по Tailwind CSS: Установка #2
Tailwind CSS — это современный CSS-фреймворк, который позволяет быстро и удобно стилизовать сайты, не тратя время на написание «с нуля» длинных стилей.
Курс по Tailwind CSS: Введение #1
Tailwind CSS — это utility-first фреймворк: вы собираете интерфейс из маленьких утилит прямо в разметке, не переключаясь между HTML и длинными кастомными стилями.
Создаем гибкие выпадающие списки с помощью Virtual Select
Веб-разработчики сталкиваются с необходимостью предоставления пользователям удобных и отзывчивых элементов управления. Один из таких элементов — выпадающий список выбора (select box).
Горизонтальная галерея-аккордеон на CSS
Это галерея-аккордеон, реализованная с помощью чистого CSS, которая создает адаптивный горизонтальный макет аккордеона, раскрывающий изображения в полном размере при простом наведении курсора.
Как сделать видео на фон с помощью CSS
В эпоху цифрового дизайна, фоновое видео на веб-странице становится не просто трендом, но и эффективным инструментом для привлечения внимания посетителя. Отлично подобранное и качественно интегрированное видео способно усилить визуальное воздействие, добавить динамики и глубины в общее впечатление от сайта.
Граница с градиентным фоном в CSS
Добавление градиентных границ к элементам веб-страницы — это прекрасный способ сделать дизайн более креативным и привлекательным. CSS предоставляет возможность легко реализовать такие границы, используя градиенты.
Создание видеофона с использованием HTML и CSS
В современном веб-дизайне уделяется все больше внимания интерактивности и визуальным эффектам, и одним из способов сделать вашу страницу более привлекательной является добавление видео фона.
Переворачивающиеся карточки в CSS | Flip Card
"Flip card" - это визуальный эффект веб-карточки, которая переворачивается при наведении или клике, показывая лицевую и обратную стороны с помощью CSS-анимации.
Анимация блика на кнопке в CSS
Анимация блика на кнопке - это прекрасный способ придать вашим веб-сайтам интересный и привлекательный вид. В этой статье мы рассмотрим, как создать такую анимацию с использованием CSS.
Эффект матового стекла в CSS | Glass Effect
Эффект матового стекла в CSS - стильный дизайнерский трюк, который придает веб-страницам современный и привлекательный внешний вид, создавая иллюзию матовой поверхности с небольшой прозрачностью.
Как оформить элемент input file
Стилизация элемента <input type="file"> - это способ сделать загрузку файлов на вашем веб-сайте более привлекательной и интуитивно понятной для пользователей. Вместо стандартного внешнего вида кнопки "Обзор" можно создать настраиваемую кнопку, которая лучше впишется в дизайн вашего сайта.
Продвинутая CSS-анимация с примерами
CSS-анимация - это мощный инструмент для создания привлекательного и динамичного UI на сайте. Она позволяет дизайнерам воплощать в жизнь динамичный дизайн и делать веб-сайты более интерактивными и визуально привлекательными.
Основы CSS-анимации: Transitions, Keyframes и функции синхронизации
CSS-анимация стала неотъемлемой частью веб-разработки, позволяя разработчикам создавать динамичный и привлекательный пользовательский интерфейс. В этой статье мы рассмотрим основы CSS-анимации, включая переходы, ключевые кадры и функции синхронизации.
Загрузить ещё
