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

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

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

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

Диклеймер: в статье не ничего про браузеры и поддержку, только теория. Статья представляет собой неполный перевод спецификации c некоторыми дополнениями. Глоссарий Факт 1: цвет — это не характеристика излучения, это характеристика реакции человеческого глаза на излучение. То есть два излучения с разным спектром могут иметь один цвет с нашей точки зрения. Факт 2: далеко не все цвета, которые видит среднестатистический ...

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

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

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

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

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