Главная » Архив меток: CSS

Архив меток: CSS

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

CSS COLORS

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

Читать далее »