CSS

Если вы хоть раз задавали в CSS медиазапрос вроде: ...а потом ломали голову, почему он не работает, несмотря на то что "у пользователя экран 1366×768", — вы не одиноки. Эта ошибка чрезвычайно распространена, и связано это с неправильным пониманием того, как работает viewport в браузере. В этой статье объясню, почему так происходит и как избежать подобных ошибок в будущем. Первое, что стоит понять: медиазапросы опираются не на физическое разрешение экрана, а на ширину viewport’а в CSS-пикселях. Например,...

Когда я только начинал работать с адаптивной версткой, я, как и многие, пихал все стили в один огромный файл style.css, а медиа-запросы раскидывал где-то в конце. Но со временем я понял, что это неудобно, неоптимально и усложняет поддержку. Однажды я решил попробовать разделить CSS на отдельные файлы для разных разрешений — и это полностью изменило мой подход к верстке! 🔥 Раньше мой style.css выглядел как свалка: Проблемы: Решение: Я разбил стили на отдельные файлы: Теперь: ✅ Каждый файл отвечает за свой диапазон...

В процессе вёрстки важно понимать, как макет из Figma (или другого редактора) соотносится с тем, что ты видишь в браузере. Особенно, если ты работаешь на ноутбуке с небольшим экраном и невысоким разрешением — например, 1366×768. Если тебе казалось, что достаточно выставить масштаб 100% в Figma и браузере, и всё будет пиксель-в-пиксель, — эта статья тебя удивит. Дизайнеры чаще всего делают макеты под разрешение 1920×1080 и выше. А теперь вопрос: если у твоего экрана всего 1366×768 физических пикселей,...

Анимации в веб-дизайне уже давно перестали быть простой модой — это мощный инструмент, который улучшает пользовательский опыт и придает сайтам дополнительную динамику. В этой статье мы рассмотрим семь продвинутых приемов, которые помогут вам вывести ваши CSS-анимации на новый уровень. Функция steps() позволяет разделить анимацию на фиксированное количество шагов. Это идеально подходит для создания эффектов, похожих на кадры из фильма или анимации кадров. В этом примере анимация создаёт эффект печатной машинки...

Вы уже мастер в CSS, но сможете ли сказать, что знаете все подводные камни и секреты? Давайте разберем 10 малоизвестных и полезных CSS-фишек, которые могут сделать вашу верстку еще умнее и красивее. Больше не нужно использовать комбинации padding-хитростей для соотношения сторон. Добавьте aspect-ratio вместе с шириной и наблюдайте магию: Можно задавать значения по умолчанию в CSS-переменных: Если --button-color не задан, то используется запасной --main-color. Создавайте анимируемые CSS-переменные...

Когда вы открываете сайт, первым делом вас встречает его внешний вид: цветовые сочетания, шрифты, анимации, расположение элементов — все это заслуга CSS (Cascading Style Sheets). В этой статье мы погрузимся в магию CSS, раскроем его секреты и покажем, как он превращает скучные веб-страницы в произведения искусства. CSS отвечает за внешний вид и оформление веб-страниц. Если HTML — это скелет сайта, то CSS — его одежда, макияж и аксессуары. Без CSS сайты были бы лишь наборами текста и изображений, расположенных в хаотичном порядке...