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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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