Верстка \ CSS 3

Стандартизация стилей фокуса с помощью пользовательских свойств CSS

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

Продолжить чтение

Верстка \ CSS 3

Как в CSS создать анимированные загрузчики страниц

От автора: анимированные загрузчики страниц помогают пользователям быть терпеливыми с инструментом или веб-сайтом. Они дают пользователям понимание, что система работает, сообщают им, сколько времени потребуется для загрузки страницы, и удерживают внимание пользователей, предоставляя им что-то интересное, на что они могут посмотреть.

Продолжить чтение

Верстка \ CSS 3

Создание бесконечного цикла фонового изображения в CSS

От автора: бесконечная прокрутка изображений по-разному применяется в приложениях и на веб-сайтах, которыми мы пользуемся ежедневно. Например, мы часто видим на веб-сайтах движущийся фон, как показано в примере ниже.

Продолжить чтение

Верстка \ CSS 3

5 главных ошибок в CSS

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

Продолжить чтение

Верстка \ CSS 3

Сделайте свой сайт особенным с пользовательским скроллбаром

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

Продолжить чтение

Верстка \ CSS 3

Красивая лента (ribbon) на CSS

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

Продолжить чтение

Верстка \ CSS 3

Динамическое управление цветами с помощью относительных цветов CSS

От автора: относительные цвета CSS обеспечивают динамическую манипуляцию цветами, которую я всегда хотел получить в обычном CSS, с того времени как цветовые функции Sass впервые появились на сцене ( darken(), lighten() и т. д.).

Продолжить чтение

Верстка \ CSS 3

Использование position:sticky в CSS

От автора: вы когда-нибудь сталкивались со случаем, когда position:sticky не работает должным образом с дочерним элементом контейнера? Несколько дней назад я помогал другу решить именно эту проблему и хочу наконец написать об этом.

Продолжить чтение