Умные CSS-решения для распространенных задач пользовательского интерфейса

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

Более насыщенные, реалистичные тени с помощью CSS

Тени помогают передать смысл и добавить дополнительную ценность пользовательскому интерфейсу. Однако многие тени, которые мы видим в Интернете в наши дни, не используют весь свой потенциал. Давайте изменим это!

Всестороннее глубокое погружение во все тени происходит от Роба О'Лири. В его статье о хитростях CSS исследуется, как свет влияет на тени и как определить источник света — основу для создания аутентичных эффектов теней. После того, как эта база установлена, вы узнаете, как использовать тени для создания глубины, поднятия элементов и их вставки, как накладывать тени на слои и, конечно же, какое свойство CSS использовать для того или иного варианта использования. Роб также рассматривает влияние теней на доступность и производительность, а также способы их анимации.

Еще одна фантастическая статья на эту тему принадлежит Джошу В. Комо. Чтобы положить конец этим «нечетким серым прямоугольникам, которые на самом деле не очень похожи на тени», как Джош описывает текущее состояние большинства теней в Интернете, он показывает, как превратить типичные тени в красивые, реалистичные. . Маленькая деталь, которая делает любой пользовательский интерфейс более тактильным.

Эффект вырезания из бумаги CSS

Если вы когда-нибудь хотели создать эффект вырезки из бумаги для заголовка, вам, возможно, пришлось немало потрудиться. Возможно, вам нужно настроить два отдельных div , которые затем будут накладываться друг на друга. Расстояние, конечно, должно быть определено в относительных единицах, что может быть немного сложно сделать правильно на экранах.

CSS Paper Cut-Out Effect от Stephanie Eckles решает проблему навсегда с помощью пользовательских свойств CSS, CSS Grid, CSS-преобразований и старой доброй CSS-функции attr() . Стефани использует data -атрибут h1 вместе с span внутри него. attr() получает значение атрибута data , которое затем используется для свойства content в псевдоэлементе :after . Затем блики, тени и цвета можно настроить с помощью пользовательских свойств CSS. Многоразовый и простой в обслуживании!

А если вас интересует больше волшебства от Стефани и других замечательных людей, любящих CSS, взгляните на StyleStage, где современный CSS получает заслуженное внимание.

Кроме того, взгляните на статью Ахмада Шадида «Размышляя об эффекте вырезания», в которой рассматриваются все мельчайшие детали решения, когда SVG может иметь больше смысла, и как реализовать его в реальном сценарии. В статье также представлено множество примеров кода, с которых можно начать!

Миникарта для Интернета

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

Что, если мы сделаем это немного более контекстуальным ? Возможно, на странице есть несколько изображений и видео или цитаты и отдельные разделы — не было бы интересно выделить их по-другому, а также позволить читателям закрепить позицию на странице и вернуться назад, если это необходимо? Что ж, Рауно Фрайберг тоже так думал.

Миникарта Rauno для Интернета (в настоящее время работает только в Firefox) упрощает создание представления миникарты всей страницы, а также позволяет читателям закреплять разделы страницы и перемещаться между ними. Для этого Rauno использует экспериментальное свойство CSS element() для отображения живого изображения из произвольного элемента HTML (в настоящее время это доступно только в Firefox).

Условный радиус границы в CSS

При разработке карт вы можете захотеть, чтобы border-radius имел достаточно большое значение, когда есть достаточно места для его отображения вместе с другими картами. Тем не менее , когда на карте нет места и, возможно, полей — как это может быть на небольших экранах — вы можете уменьшить border-radius до 0 . Как бы вы этого добились?

Ахмад Шадид достаточно подробно рассмотрел эту проблему в своей статье «Условный радиус границы в CSS». Идея, первоначально предложенная Хейдоном Пикерингом и Наманом Гоэлом, состоит в том, чтобы использовать достаточно большое число, чтобы вызвать то или иное состояние. На меньших экранах, если разница между 100vw и 100% равна 0 , то и радиус тоже будет равен 0 ; но если разница больше, будет использоваться большее значение. Вы также можете взглянуть на CodePen.

Зернистые градиенты CSS

Что, если вы хотите добавить немного шума , чтобы придать изображению немного текстуры? Конечно, вы можете экспортировать изображения в формате PNG, WebP или AVIF, но в идеале мы хотели бы добавить «шум» поверх SVG, чтобы мы всегда могли включать и выключать шум, если захотим.

В своей статье CSS-Tricks о зернистых градиентах Джимми Чион объясняет, как мы можем генерировать цветной шум, чтобы добавить текстуру к градиенту, используя лишь CSS и SVG. Как объясняет Джимми, идея состоит в том, чтобы использовать фильтр SVG для создания шума, а затем применить этот шум в качестве фона. Затем мы накладываем его под градиент, улучшаем яркость и контрастность, и — вуаля — у вас есть градиент, который постепенно исчезает.

Проблема решена! Вы также можете исследовать игровую площадку Grainy Gradient, которую создал Джимми.

Многострочный фоновый градиент

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

Да, как показывает Матиас Отт. Решение Матиаса немного хакерское, но оно приводит к желаемому результату благодаря псевдоэлементу, который добавляется поверх текста. Интересная идея для воплощения.

Фокус поля формы без контуров

Кто сказал, что формы должны быть скучными? Хаким Эль Хаттаб создал демонстрацию, которая доказывает, что даже такая простая вещь, как форма с запросом имени, электронной почты и пароля, является поводом для нестандартного мышления и удовлетворения искры удовольствия.

Чтобы достичь этого, Хаким сочетает фокус формы и проверку в тонкой, но удивительной анимации, которая обходится без каких-либо контуров фокуса на самих полях. Вместо этого точка отмечает поле, которое находится в фокусе. Когда фокус переключается на другое поле, запускается анимация, и точка переходит к новому активному полю, рисуя связь между ними. Проверка поля формы также легко интегрирована, точка расширяется и показывает галочку. Если вы хотите глубже погрузиться в код, Хаким также опубликовал демонстрацию на Codepen. Вдохновляющий!

Переход CSS-градиентов

Если вы когда-нибудь пробовали переходить градиенты в CSS, вы, вероятно, заметили, что на самом деле это не работает. Вместо постепенного перехода от одного градиента к другому изменение происходит мгновенно, резко, без плавного перехода между ними.

Однако, как обнаружил Кит Дж. Грант, мы можем добиться перехода с помощью умного обходного пути . Для этого мы используем псевдоэлемент и трансформацию непрозрачности. Сначала мы применяем к элементу один градиент, затем позиционируем его псевдоэлемент для заполнения элемента, а затем применяем к нему второй градиент. И мы «переходим» между двумя градиентами, изменяя непрозрачность псевдоэлемента. Вы можете проверить полный рабочий пример на CodePen.

Улучшение производительности изображения с помощью image-set()

Вы уже слышали о image-set() ? Вы можете думать об этом как о фоне CSS, эквивалентном атрибуту HTML srcset для тегов img . Браузеры на основе Chromium и Safari поддерживают его уже несколько лет, Firefox последовал за ним совсем недавно. Олли Уильямс рассматривает, что мы можем и чего не можем сделать с этим сегодня.

Как описывает Олли, одним из вариантов использования image-set() является предоставление нескольких разрешений фонового изображения и предоставление браузеру возможности решать, какое изображение будет показано пользователю — версия с высоким разрешением для пользователей на модных устройствах и версия с высоким разрешением. изображение с более низким разрешением для тех, кто использует медленное соединение или экраны с более низкой плотностью пикселей, например.

К сожалению, еще один очень многообещающий вариант использования все еще не поддерживается браузерами: идея использовать новые форматы изображений, такие как AVIF, WebP или HEIF, с добавлением запасного варианта для старых браузеров. Если вы хотите добиться чего-то подобного уже сегодня и вам не нужен background-image , <picture> element может быть альтернативой, которую стоит рассмотреть, как предполагает Олли. Отличное чтение, которое поможет вам улучшить производительность изображения.

Эффект всплывающего окна Clip-Path

С clip-path: path() , поддерживаемым основными браузерами, пришло время проявить творческий подход. Микаэль Айналем демонстрирует прекрасный вариант использования довольно новой функции: маслянисто-гладкий всплывающий эффект.

Микаэль использует clip-path: path() , чтобы отделить фотографию человека от фона в форме круга. Когда вы наводите на него курсор, кажется, что человек поднимается изнутри круга, создавая классное трехмерное впечатление. Идеально подходит для страниц «О нас».

Причудливая 3D-кнопка

Детали имеют значение. Разработка красивой кнопки не кажется сложной задачей: немного отступов здесь и там, необычный цвет, доступный текст и несколько состояний кнопки. Ну, Джош Комо проделал весь путь, чтобы разработать действительно причудливую 3D-кнопку, которую вы, возможно, захотите нажать более одного раза.

Идея проста: мы создаем два слоя и сначала немного смещаем слой переднего плана. При наведении сдвигаем передний слой вниз. Затем мы корректируем контур фокуса с помощью outline-offset или используем :focus:not(:focus-visible) , чтобы скрыть контур, когда кнопка находится в фокусе, а пользователь использует указатель.

Затем мы смещаем кнопку на несколько пикселей вверх, когда она наводится, немного анимируем преобразование, корректируем кривую Безье для анимации и добавляем немного размытия для более мягкой и естественной тени. И вуаля — у нас есть причудливая 3D-кнопка, которая доступна, работает на мобильных устройствах и на настольных компьютерах , и на нее приятно нажимать и нажимать. Конечно, вы можете найти полный фрагмент кода в блоге Джоша.

CSS-диаграммы

Возможно, вам нужно разработать столбчатую диаграмму или столбчатую диаграмму, или даже столбчатую диаграмму с несколькими наборами данных или столбцы с накоплением. С чего вообще начать? Возможно, с Charts.css, структурой визуализации данных CSS , которая использует служебные классы CSS для оформления HTML-элементов в виде диаграмм.

Этот фреймворк, созданный Ланой Гордиевски и Рами Юшуваевым, поддерживает множество типов диаграмм, не имеет зависимостей и очень легкий. Он также включает подробную документацию по своим компонентам и встроенным типам диаграмм, а исходный код доступен на GitHub (под лицензией MIT). А если вам нужны более творческие подходы, Прити также объясняет, как создавать CSS-диаграммы с интересными формами на CSS-Tricks.

Новый сброс CSS

Что вы используете для нормализации стилей в разных браузерах ? В последнее время появились новые подходы к уменьшению размера глобального сброса CSS, и, возможно, они также будут хорошими кандидатами для ваших проектов.

С помощью своего современного сброса CSS Энди Белл сократил сброс CSS до минимума, добавив правила изменения размера блока, удалив поля по умолчанию, установив значения по умолчанию для основного корня и тела по умолчанию. Наряду с этим Энди удаляет все анимации, переходы и плавную прокрутку для людей, которые предпочитают их не видеть, и по умолчанию добавил современные свойства, такие как scroll-behavior и text-decoration-skip-ink .

Новый сброс CSS от Элада Шехтера использует несколько более агрессивный подход. Elad удаляет все стили по умолчанию, которые мы получаем для определенных элементов HTML, за исключением display property . Оба подхода заслуживают внимания!

Стабильные полосы прокрутки с помощью CSS

О, старая добрая раскладка меняется! Как объясняет Брамус Ван Дамм, одна из немного более неясных причин изменения макета связана с различными типами полос прокрутки в Интернете. В то время как наложенные полосы прокрутки в iOS/macOS размещаются над содержимым (и не отображаются по умолчанию), другие полосы прокрутки размещаются в «желобе полосы прокрутки», то есть в пространстве между внутренним краем границы и внешним краем заполнения.

Когда содержимое блока становится слишком большим, браузер по умолчанию отображает полосу прокрутки. В последнем случае это приведет к смещению макета. К счастью, вскоре эта проблема может исчезнуть навсегда. Встречайте новое блестящее свойство scrollbar-gutter : установив для него значение stable , мы можем сделать так, чтобы браузер всегда отображал желоб полосы прокрутки, даже если поле не переполняется.

И чтобы все было симметрично, мы можем использовать scrollbar-gutter: stable both-edges . Эта функция пока недоступна, но очень скоро появится в Chromium, и мы надеемся, что скоро появятся и другие механизмы рендеринга.

Удивительные вещи, которые CSS может анимировать

Когда вы думаете об анимации свойств CSS, какие из них приходят вам на ум? Уилл Бойд посмотрел на вопрос с другой точки зрения и решил исследовать свойства, которые не сразу приходят на ум, те, которые обычно не связаны с анимацией, но оказываются анимируемыми.

В своем посте «Удивительные вещи, которые можно анимировать с помощью CSS» Уилл подробно рассказывает об этих неожиданно анимируемых свойствах и, конечно же, о отличных вещах, которые можно сделать, анимируя их. z-index , например, можно использовать для многоуровневой анимации, а opacity помогает вам затухать модальное окно только с помощью CSS. Отличное напоминание о том, насколько мощным является CSS.

Образовательные ресурсы

Обучение никогда не прекращается, верно? Ниже мы собрали несколько полезных — и веселых! — ресурсы, идеально подходящие для того, чтобы вывести свои навыки CSS на новый уровень . А если вы уже являетесь профессионалом в области CSS, у вас также есть задачи проверить свои знания. Наслаждаться!

CSS Vocab и шпаргалки

Возможно, вы были там раньше. Просто когда вы работаете в сжатые сроки , вам нужно что-то быстро найти. Что касается CSS, вы никогда не ошибетесь с CSS Tricks Almanac, и вы также можете найти словарь CSS, собранный Вилле В. Ванниненом из Финляндии.

Изучайте Flexbox в увлекательной игровой форме

Что общего между лягушками, зомби и башнями ? Ну, они ваши лучшие друзья при изучении Flexbox. Потому что, давайте будем честными: Flexbox очень мощен, когда вы его понимаете, но добраться до него может быть довольно сложно. Итак, давайте сделаем обучение немного веселее.

В игре Flexbox Froggy вы помогаете маленькой лягушке и ее друзьям найти свои кувшинки , как вы уже догадались, написав CSS. Игра состоит из 24 уровней, которые проведут вас от самых основ позиционирования Flexbox до более сложных задач.

Если зомби вас больше не интересуют, Flexbox Zombies для вас. Каждый раздел игры раскрывает часть сюжета, представляет новую концепцию Flexbox и представляет так называемые «испытания на выживание зомби» , которые помогут вам укрепить свои новые навыки.

И последнее, но не менее важное: вы также можете взглянуть на Flexbox Defense. Вдохновленная играми в жанре Tower Defense, ваша задача состоит в том, чтобы не дать приближающимся врагам обойти вашу оборону — конечно же, размещая свои башни с помощью CSS. Все три игры запускаются прямо в вашем браузере. Удачного флексбоксинга!

CSS Grid, CSS селекторы и другие соревнования

Хотите поднять свои навыки CSS на новый уровень? Эти три маленькие игры помогут вам сделать это — в буквальном смысле. В Grid Garden вы станете счастливым обладателем морковного сада . Вас ждут 28 уровней, в которых вам нужно хорошо заботиться о своем урожае с помощью сетки CSS.

Если вы чувствуете, что ваши навыки работы с селекторами CSS нуждаются в доработке, CSS Diner для вас. Тарелки, яблоки, соленые огурцы — в каждом из 32 испытаний вам нужно будет использовать разные селекторы CSS для выбора определенных предметов на столе.

И если вы готовы к соревнованиям, обязательно ознакомьтесь с CSSBattle. В игре в гольф с CSS вы будете использовать свои навыки CSS для визуального воспроизведения целей с наименьшим возможным кодом, чтобы добраться до вершины таблицы лидеров. Каждая из задач посвящена определенной теме, такой как visibility , display , transition или z-index .

Подведение итогов

Сталкивались ли вы недавно с ресурсами или методами CSS, которые изменили ваш подход к решению конкретной задачи? Дайте нам знать в комментариях ниже! Мы хотели бы услышать об этом.