Category: CSS 3

11
Июн
2021

CSS следующего поколения: @container

От автора: Chrome экспериментирует со свойством @container в рамках спецификации уровня ограничения 3 рабочей группы CSS, над которой работают Мириам Сюзанн из Oddbird и группа инженеров по веб-платформе. @container дает нам возможность стилизовать элементы в зависимости от размера их родительского контейнера. @containerAPI не является стабильным, и подлежит изменениям синтаксиса. Если вы попробуете его самостоятельно, вы […]

09
Июн
2021

Расширенная анимация CSS с использованием cubic-bezier()

От автора: имея дело со сложной анимацией CSS, есть тенденция создавать экспансивные @keyframes с большим количеством объявлений. Однако есть пара приемов, о которых я хочу поговорить, они могут помочь упростить задачу, оставаясь при этом ванильным CSS. Несколько анимаций Функции времени Первый более широко используется и знаком многим, а второй менее распространен. Для этого могут быть […]

08
Июн
2021

Введение в контейнерные запросы CSS

От автора: прототип долгожданных контейнерных запросов CSS добавлен в Chrome Canary и доступен для экспериментов. Давайте рассмотрим, какую проблему они решают, узнаем, как работают, и посмотрим, как они дополняют существующие функции CSS. В настоящее время контейнерные запросы можно использовать в Chrome Canary, выполнив поиск и включив их в chrome://flags. (Потребуется перезагрузка браузера). Просмотр результатов поиска […]

25
Май
2021

Fit-content и fit-content()

От автора: сегодня мы рассмотрим fit-content и fit-content(), которые являются специальными значениями для width и grid. Это … сложно — не как концепция, а в практическом применении. Минимальное и максимальное содержание Прежде чем приступить к рассмотрению fit-content, мы должны кратко рассмотреть два особых значения для width: min-content и max-content. Они нужны вам для понимания fit-content. […]

17
Май
2021

Скажите привет контейнерным запросам CSS

От автора: сегодня я более взволнован новой функциональностью CSS, чем когда либо за последние шесть лет, которые я провел в качестве фронтенд-разработчика. Прототип контейнерных запросов теперь доступен в Chrome Canary. Я помню, как видел много шуток о поддержке контейнерных запросов CSS, но, наконец, они есть. В этой статье я расскажу, зачем нам нужны контейнерные запросы, […]

17
Май
2021

Скажите привет контейнерным запросам CSS

От автора: сегодня я более взволнован новой функциональностью CSS, чем когда либо за последние шесть лет, которые я провел в качестве фронтенд-разработчика. Прототип контейнерных запросов теперь доступен в Chrome Canary. Я помню, как видел много шуток о поддержке контейнерных запросов CSS, но, наконец, они есть. В этой статье я расскажу, зачем нам нужны контейнерные запросы, […]

14
Май
2021

Начало работы с пользовательскими свойствами CSS

От автора: пользовательские свойства в CSS исключительно полезны не только для разметки CSS, но и для абстрагирования сложности и интерактивности на более мелкие, более простые в управлении части. Это краткое руководство поможет вам быстрее понять, как они работают и как их использовать. К примеру, у вас есть такой CSS: [crayon-609e116f37305024372929/] Здесь много повторений, но как […]

13
Май
2021

Руководство по новым современным селекторам псевдоклассов CSS

От автора: проект редактора рабочей группы CSS для селекторов уровня 4 включает несколько селекторов псевдо-классов, которые уже включены в большинство современных браузеров. В этом руководстве будут рассмотрены те из них, которые в настоящее время лучше всего поддерживаются, а также приведены примеры, демонстрирующие, как вы можете начать их использовать! Селекторы псевдокласса — это те селекторы, которые […]

05
Май
2021

Контейнерные запросы

От автора: после многих лет поисков и обсуждений мы, наконец, получаем контейнерные запросы и они изменят дизайн пользовательского интерфейса, как это сделали медиа-запросы. Наконец-то это случилось: контейнерные запросы действительно в деле! После того, как нам годами говорили, что это невозможно, в прошлом году произошло наконец движение в нужном направлении. В этом году легенда CSS Miriam […]

05
Май
2021

Контейнерные запросы

От автора: после многих лет поисков и обсуждений мы, наконец, получаем контейнерные запросы и они изменят дизайн пользовательского интерфейса, как это сделали медиа-запросы. Наконец-то это случилось: контейнерные запросы действительно в деле! После того, как нам годами говорили, что это невозможно, в прошлом году произошло наконец движение в нужном направлении. В этом году легенда CSS Miriam […]

26
Апр
2021

Три важных вещи, которые вы должны знать о CSS

От автора: еще в 2019 году я поделился тем, как селектор CSS :is() упростит процесс написания CSS. Чего я не знал тогда и узнал совсем недавно, так это трех важных фактов о CSS: is(). Вот эти три факта: Селекторный список Специфика :is() заключается в том, что это более высоко специфичный аргумент. :is() не работает с […]

21
Апр
2021

Как я поступаю с размером шрифта

От автора: у меня непростые отношения со шрифтами. Важно не только то, какой шрифт использовать, но и то, как подобрать их размер для любого заданного размера экрана. Для меня это важно потому, что часто замечаю, как увеличиваю текст с помощью действий ⌘ + или просто переключаюсь в режим чтения Safari для лучшего чтения. Я часто […]

20
Апр
2021

Обработка текста поверх изображений в CSS

От автора: вы можете встретить компонент пользовательского интерфейса, у которого есть текст над изображением. В некоторых случаях текст будет трудно прочитать в зависимости от используемого изображения. Есть несколько различных решений, таких как добавление наложения градиента или тонированного фонового изображения, тени текста и других. В этой статье я исследую различные подходы и решения проблемы обработки текста, […]

19
Апр
2021

Знаете ли вы о CSS селекторе: has?

От автора: возможно, материал этой статьи пока может Вам и не пригодится, но я думаю, что селектор CSS :has будет иметь большое влияние на то, как мы будем писать CSS в будущем. Фактически, если он когда-либо появится в браузерах, это разрушит ментальную модель базовой работы CSS, потому что это будет первый пример родительского селектора в […]

15
Апр
2021

Анимация подчеркивания

От автора: недавно я переделал личный веб-сайт и добавил несколько интересных трюков с CSS. В следующих нескольких постах я поделюсь некоторыми из них. Первый — это подчеркивание. В Интернете довольно часто можно увидеть анимированные эффекты подчеркивания с использованием псевдо-элементов и / или границ. Попробуйте навести курсор на примеры в демонстрации ниже. Они отлично подходят для […]

14
Апр
2021

Официальное вложение CSS – последний кусочек головоломки

От автора: еще в 2013 году я написал одну из первых книг о Sass «Sass and Compass для дизайнеров». Хотя я считаю, что это лучшая техническая книга, написанная мною, она была гораздо менее популярна, чем другие мои книги, но это была именно та книга, которую мне хотелось написать. В то время, как разработчик CSS, я […]

07
Апр
2021

Ключевые слова CSS Initial, Inherit и Unset

От автора: в CSS есть ключевые слова для различных значений по умолчанию. В этой статье я буду рассматривать три из них: initial, inherit и относительно новое unset. Есть большая вероятность того, что, хотя большинство веб-разработчиков сталкивались с ними, многие из них, даже самые опытные, не до конца их понимают. Долгое время я знал об этих […]

06
Апр
2021

Новые возможности CSS в 2021 году

От автора: CSS развивается с каждым годом. Сейчас прекрасное время для веб-разработчика, но может быть непросто оставаться в курсе последних функций. У CSS нет определенных версий, как у JavaScript. Итак, как узнать, какие есть последние функции? Консорциум World Wide Web (W3C) ежегодно создает снепшот, содержащий все текущие спецификации в одном документе. К сожалению, в нем […]

02
Апр
2021

Адаптивные изображения: разные методы и тактики

От автора: создание адаптивного изображения — это не ракетостроение. Я уверен, что вы уже много их создавали, используя CSS. Однако гибкий размер — это только один из факторов, когда речь идет об адаптивных изображениях. Иногда, в зависимости от типа устройства, нам нужно настроить качество изображения и даже тип изображения для лучшего взаимодействия с пользователем. Сегодня […]

31
Мар
2021

Детально разбираемся с тенями в веб-дизайне

От автора: поговорим о тенях в веб-дизайне. Тени добавляют текстуру, перспективу и подчеркивают размеры объектов. В веб-дизайне использование света и тени может добавить физического реализма и может использоваться для создания насыщенных тактильных интерфейсов. Взгляните на рисунок ниже. Он о велосипедных турах по Исландии. Обратите внимание на приукрашенную тень велосипедиста и на то, как она создает […]

29
Мар
2021

Стилизация символов CSS с помощью Background-Clip

От автора: для создания смешанных стилей символа или текста можно использовать плагин, помогающий стилизовать текст. Несмотря на то, что концепция хороша, реализация оставляет желать лучшего, поскольку скрипты, которые будут использоваться, являются сплошным мусором, а применяемая техника — это грубое принуждение, и CSS на самом деле может делать это сам с помощью linear-gradient и background-clip!. Проблемы […]

18
Мар
2021

Отладка CSS Grid как профи

От автора: теперь вы можете использовать Chrome DevTools для визуальной проверки CSS-сеток и их отладки. CSS Grid — это модуль, который позволяет более эффективно разрабатывать сложные адаптивные веб-дизайны, сохраняя при этом согласованность между браузерами. Для разработчика CSS Grid — это инструмент, который помогает справляться с такими вещами, как повторное использование кода, бесконечные размеры экрана, скорость […]

17
Мар
2021

30 лучших практик CSS для начинающих

От автора: CSS — это язык, которым в какой-то момент пользуются почти каждый разработчик. Хотя это язык, который мы иногда принимаем как должное, он очень мощный и имеет множество нюансов, которые могут помочь (или навредить) нашему дизайну. Вот 30 лучших практик CSS, которые помогут вам написать надежный CSS и избежать некоторых дорогостоящих ошибок. 1. Сделайте […]

09
Мар
2021

Как создать уменьшающийся при прокрутке Header без JavaScript

От автора: представьте себе красивый и высокий header веб-сайта с большим количеством отступов сверху и снизу от содержимого. Когда вы прокручиваете вниз, он сжимается, уменьшая часть заполнения рабочей области, освобождая экран для другого контента. Обычно вам придется использовать некоторый JavaScript, чтобы добавить подобный эффект сжатия, но с момента появления position: sticky есть способ сделать это, […]

19
Фев
2021

Пора попрощаться с пиксельными единицами измерения

От автора: если вы проектируете или разрабатываете веб-сайты, не используйте px. Абсолютные единицы (px, in, mm, cm, pt, и pc) не подходят как для доступности и адаптивного дизайна, так и при использовании таблиц для разметки. Из всех доступных абсолютных единиц, пиксели (px) являются единственными упорно не желающими уходить. Мы коллективно (и справедливо!) отказались от всех […]

11
Фев
2021

Действительно ли Tailwind CSS того стоит?

От автора: я никогда не стремлюсь специально критиковать какие-либо технологии. Я считаю, что у каждой технологии есть свой допустимый вариант использования. Но как разработчику необходимо проанализировать технологию, а также ее плюсы и минусы, прежде чем принимать ее как есть. Одна из новейших технологий, которой в наши дни уделяется много внимания, — это Tailwind CSS. Когда […]

10
Фев
2021

CSS Clamp(): адаптивная комбинация, которую мы все ждали

От автора: сегодня такое прекрасное время для написания CSS. Бывали у вас такие моменты, когда вы что-то кодируете и думаете про себя: «Я хочу, чтобы этот [текст, изображение, поле, вставьте элемент по вашему выбору здесь] увеличивался или уменьшался в зависимости от размера области просмотра … но только до определенного момента?». Если вы еще не испытали […]

03
Фев
2021

Изучение нового CSS Houdini Painting API

От автора: в статье будут рассмотрены низкоуровневые API, которые подключаются к процессу стилей и макета движка рендеринга вашего браузера. Примечание. Исходный код демонстрации, обсуждаемой во второй половине этой статьи, можно найти на GitLab. Как я уже упоминал в своей недавней статье об анимации холста внутри компонентов React, мне нравится HTML-холст. Поэтому я был очень взволнован, […]

01
Фев
2021

Индивидуальные свойства преобразования CSS в Safari Technology Preview

От автора: в блоге WebKit подробно описано, как использовать отдельные свойства transform CSS в последней версии Safari Technology Preview. Это приводит браузер в соответствие со спецификацией CSS Transforms Module Level 2, которая выделяет функции translate(), rotate() и scale() из transform в отдельные свойства: translate, scale и rotate. Итак, вместо того, чтобы связывать эти три функции […]

25
Янв
2021

Прикрепленные элементы сетки в CSS

От автора: если вы когда-либо пытались поместить липкий элемент в макет сетки и наблюдали, как элемент прокручивается вместе с остальным содержимым, вы, возможно, замечали, что position: sticky с CSS Grid не работает. Не стоит волноваться! Вполне возможно совместить эти два макета для работы вместе. Все, что вам, вероятно, понадобится, это еще одна строка CSS. Проблема […]