5 интересных инструментов для работы с CSS

Перевод статьи 5 New CSS Techniques to Master in 2020

 

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

 

Так какие методы и инструменты сегодня популярны? Познакомьтесь с рядом из них и попробуйте с их помощью сделать ваш следующий проект лучше.

Сделайте таблицы CSS гриды адаптивными

 

https://digitalhorizon.vc/en/

 

Если всё остальное в верстке проекта является адаптивным, убедитесь, что гриды — не исключение. Есть несколько способов создать гибкую сетку, которая всегда визуализирует так, как вы хотите, независимо от размера устройства — используйте CSS Grid 🙂

 

Самое приятное, что адаптивная CSS — сетка работает со столбцами равных или неравных размеров. Вы можете использовать различные брейкпоинты, высоты и места размещения элементов. (Это очень крутая технология с большим функционалом, которая дает вам возможность делать верстку более кастомизируемой)

 

Начните с единицы фракции (fr), гибкой единицы, которая делит пропуски в соответствии с вашими правилами. Каждое объявление fr- это столбец; затем вы можете добавить пробелы, и у вас получится сетка.

 

https://codepen.io/zellwk/pen/qoEYaL

 

Узнайте больше: Smashing Magazine имеет отличное руководство. Там есть множество примеров, которые помогут лучше понять и эффективнее использовать адаптивные гриды.

Используйте различные шрифты

 

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

 

В новом логотипе для «Доктора Кто» на BBC, который выше, использует специально созданный переменный шрифт.

Чтобы использовать переменные шрифты, необходимо выбрать тот, который поддерживает эту функцию, а также браузер, поддерживающий font-variation-settings. (поддерживается большинством современных браузеров)

 

https://www.axis-praxis.org/demo/5/resize-textbox-gimlet

 

Узнайте больше: Axis-Praxis— это игровая площадка с переменными шрифтами. На ней вы можете играть, тестировать комбинации и даже находить шрифты для проектов.

Создавайте текстовые анимации

 

https://www.senseslab.com/

 

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

 

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

 

Узнайте больше: Animista— это инструмент, который находится в бета-версии , но позволяет вам экспериментировать с большим количеством различных стилей текстовой анимации.

 

https://codemyui.com/split-in-half-text-animation/

 

И даже больше: Code My UI имеет хорошую коллекцию готовых примеров для создания различных текстовых анимаций, например, как фрагмент разделенного текста, приведенный выше.

Реализуйте обработку процесса прокрутки

 

https://destinations.rei.com/

 

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

 

CSS Scroll Snap — это хорошее решение. Вот как это описывает Google:

 

Функция CSS Scroll Snap позволяет веб-разработчикам создавать хорошо контролируемые возможности прокрутки, обозначая позиции привязки прокрутки. Разбитые на страницы статьи и графические карусели — два широко используемых примера.

 

Проще говоря, это означает, что вы можете управлять точками прокрутки, как по вертикали, так и по горизонтали (в основном это просто шаблон рабочего стола). Таким образом пользователи видят именно то, что вы хотите.

 

https://developers.google.com/web/updates/2018/07/css-scroll-snap

 

Узнайте больше: вы можете найти почти все, что вас может заинтересовать, от разработчиков Google, включая несколько фрагментов кода для быстрого старта.

Тестовая поддержка браузера с помощью CSS

 

CSS может даже помочь вам определить, поддерживают ли определенные браузеры новые функции CSS.

 

Правило Feature Queries @supports позволяет определить значение на основе возможностей браузера. Проблема в том, что это не работает ни для чего старше Internet Explorer 11, но в наши дни у этого браузера не так уж много пользователей.

 

Узнайте больше: вы можете изучить фрагменты кода и разобраться с синтаксисом, а также получить примеры из Mozilla.

CSS Grid ресурсы

 

CSS Grid Layout — сейчас это одна из самых обсуждаемых вещей, когда речь заходит о CSS. Если вы не в курсе, то самое время начать учиться.

«CSS Grid — это мощный инструмент, который позволяет создавать двухмерные макеты в сети», — так описывает его Jonathan Suh в своем руководстве по упакованным ресурсам.

Вот пять отличных ресурсов CSS Grid:

Заключение

 

Играть с CSS и изучать его новые фишки может быть очень весело — если это не заставляет вас рвать на себе волосы. Мы надеемся, что эти идеи дадут вам достаточно вдохновения. Удачи вам!

Запишитесь на курс по безопасной разработке

И получите уверенный старт в карьере востребованного специалиста 😉

Старт

Длительность

4.5 месяца

Услуги раздела

Понравилась статья?

Следи за обновлениями в наших соц. сетях

Или подпишись на рассылку и получай полезную информацию на почту каждую неделю

Получить консультацию
!
!

Спасибо,
менеджер свяжеться с вами в ближайшее время

Спасибо,
за регистрацию на вебинар

Заказать обратный звонок

!
Заполните это поле
!
Заполните это поле