От автора: как веб-разработчик, написание кода CSS является одной из основных задач, которые вы выполняете ежедневно. CSS — это замечательный язык таблиц стилей, который позволяет нам стилизовать веб-страницы и делать их интерактивными на всех пользовательских устройствах. Просто представьте веб-страницу без кода CSS. С этим удивительным языком таблиц стилей мы можем многое сделать.
Стандартизация стилей фокуса с помощью пользовательских свойств CSS
От автора: уделите две минуты своего времени и рассмотрите текущий проект в браузере. Используя клавишу Tab, вы можете перемещаться между интерактивными элементами, включая кнопки, ссылки и элементы формы.
От автора: анимированные загрузчики страниц помогают пользователям быть терпеливыми с инструментом или веб-сайтом. Они дают пользователям понимание, что система работает, сообщают им, сколько времени потребуется для загрузки страницы, и удерживают внимание пользователей, предоставляя им что-то интересное, на что они могут посмотреть.
От автора: бесконечная прокрутка изображений по-разному применяется в приложениях и на веб-сайтах, которыми мы пользуемся ежедневно. Например, мы часто видим на веб-сайтах движущийся фон, как показано в примере ниже.
От автора: Язык CSS — простой, мощный и декларативный. Мы можем легко достичь сложных вещей, таких, например, как темный/светлый режим. Однако существует множество заблуждений и неправильного его использования. Они могут превратить разметку CSS в сложный нечитаемый и немасштабируемый код.
От автора: в этой статье я просто резюмирую свой порядок изучения CSS. Надеюсь, это поможет вам улучшить понимание CSS.
От автора: полоса прокрутки — один из наиболее игнорируемых компонентов пользовательского интерфейса, которые не используются на многих веб-сайтах для повышения удобства работы пользователей. По умолчанию во всем HTML, когда содержимое веб-сайта превышает высоту области просмотра, справа автоматически появляется полоса прокрутки, точно такая же, как та, которую вы видите сейчас, когда читаете эту статью.
От автора: в данном уроке будет показана реализация красивой ленты (ribbon) на CSS. Чаще всего подобные ленты можно видеть, к примеру, на карточках товара, но также ее можно использовать при желании и для других элементов сайта. В уроке вы найдете реализацию такой ленты на CSS без использования дополнительных изображений.
Динамическое управление цветами с помощью относительных цветов CSS
От автора: относительные цвета CSS обеспечивают динамическую манипуляцию цветами, которую я всегда хотел получить в обычном CSS, с того времени как цветовые функции Sass впервые появились на сцене ( darken(), lighten() и т. д.).
От автора: в наши дни, услышав «липкий футер», я думаю, что большинство людей имеют в виду position:sticky, когда footer фиксируется на экране в контексте прокрутки какого-либо родительского элемента.