От автора: Язык CSS — простой, мощный и декларативный. Мы можем легко достичь сложных вещей, таких, например, как темный/светлый режим. Однако существует множество заблуждений и неправильного его использования. Они могут превратить разметку CSS в сложный нечитаемый и немасштабируемый код.
От автора: в этой статье я просто резюмирую свой порядок изучения CSS. Надеюсь, это поможет вам улучшить понимание CSS.
От автора: полоса прокрутки — один из наиболее игнорируемых компонентов пользовательского интерфейса, которые не используются на многих веб-сайтах для повышения удобства работы пользователей. По умолчанию во всем HTML, когда содержимое веб-сайта превышает высоту области просмотра, справа автоматически появляется полоса прокрутки, точно такая же, как та, которую вы видите сейчас, когда читаете эту статью.
От автора: в данном уроке будет показана реализация красивой ленты (ribbon) на CSS. Чаще всего подобные ленты можно видеть, к примеру, на карточках товара, но также ее можно использовать при желании и для других элементов сайта. В уроке вы найдете реализацию такой ленты на CSS без использования дополнительных изображений.
Динамическое управление цветами с помощью относительных цветов CSS
От автора: относительные цвета CSS обеспечивают динамическую манипуляцию цветами, которую я всегда хотел получить в обычном CSS, с того времени как цветовые функции Sass впервые появились на сцене ( darken(), lighten() и т. д.).
От автора: мой друг шутил: HTML уже адаптивен. Это делают дизайнеры. Это странное мнение, но в целом правильное. Если вы напишете ванильный HTML с правильной семантической разметкой, он, по крайней мере, ПРИГОДЕН для UІ. Возможно, это некрасиво, возможно, имеет не самый желанный вид для пользователей, но допустимо.
От автора: в наши дни, услышав «липкий футер», я думаю, что большинство людей имеют в виду position:sticky, когда footer фиксируется на экране в контексте прокрутки какого-либо родительского элемента.
От автора: вы когда-нибудь сталкивались со случаем, когда position:sticky не работает должным образом с дочерним элементом контейнера? Несколько дней назад я помогал другу решить именно эту проблему и хочу наконец написать об этом.
От автора: эффект матового стекла, более известный как Glassmorphism, уже давно стал популярной функцией пользовательского интерфейса. Mac OS известна своим эффектом матового стекла, под Windows 10 он также реализован, например, на таких сайтах, как Github.
От автора: функции min(), max() и clamp(), которые теперь поддерживаются во всех современных браузерах, являются одними из инструментов, делающих создание веб-сайтов и приложений более динамичными и отзывчивыми.