Главная » Архив меток: CSS (страница 3)

Архив меток: CSS

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

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

Читать далее »

Тёмная сторона CSS: выходим за рамки и взрываем звезды с border-image и градиентами

Как вы думаете, сколько CSS-градиентов нужно, чтобы нарисовать каждую из этих фигур? Один! ? Причем его даже не надо дублировать: достаточно указать один раз в одном-единственном свойстве. Таким примером в CodePen на днях поделился Темани Афиф, автор занятного и познавательного проекта css-challenges.com. Эта «магия» — заслуга свойства border-image. У нас уже есть статья о нем и его возможностях. Увы, громоздкий ...

Читать далее »

Концепции CSS — единое руководство

От автора: в этой статье я просто резюмирую свой порядок изучения CSS. Надеюсь, это поможет вам улучшить понимание CSS. 1. Приоритет селектора CSS Приоритет селектора CSS разделен на несколько категорий, каждая из которых имеет свою специфичность. Мы можем вычислить фактический приоритет, суммируя специфичность всех селекторов. Фактически, если вы используете правило !important, оно переопределит ВСЕ предыдущие правила стилизации для этого конкретного ...

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

Умная техника липкого футера (footer)

От автора: в наши дни, услышав «липкий футер», я думаю, что большинство людей имеют в виду position:sticky, когда footer фиксируется на экране в контексте прокрутки какого-либо родительского элемента. Я говорю не совсем об этом. Фиксированный футер был концепцией пользовательского интерфейса до того, как появились position:sticky, и он означает несколько иное. Идея состоит в том, что footer размещают в нижней части ...

Читать далее »

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

От автора: вы когда-нибудь сталкивались со случаем, когда position:sticky не работает должным образом с дочерним элементом контейнера? Несколько дней назад я помогал другу решить именно эту проблему и хочу наконец написать об этом. На самом деле эта проблема не в чем-то глючном или неправильном. Фактически, это эффект поведения CSS по умолчанию. Почему и как? Посмотрим на следующий пример. <div class="wrapper"> ...

Читать далее »

Эффект матового стекла в CSS

От автора: эффект матового стекла, более известный как Glassmorphism, уже давно стал популярной функцией пользовательского интерфейса. Mac OS известна своим эффектом матового стекла, под Windows 10 он также реализован, например, на таких сайтах, как Github. Сегодня мы рассмотрим два способа получить эффект матового стекла с помощью чистого CSS. Метод первый Начнем с создания div: <div class="wrapper"></div> Теперь мы удалим поля ...

Читать далее »

Функции сравнения CSS: min(), max() и clamp()

От автора: функции min(), max() и clamp(), которые теперь поддерживаются во всех современных браузерах, являются одними из инструментов, делающих создание веб-сайтов и приложений более динамичными и отзывчивыми. 1. Функция CSS min() Функция CSS min() позволяет вам установить наименьшее (самое отрицательное) значение из списка значений, разделенных запятыми. Она может принимать два параметра, а также — функцию min можно использовать внутри другой ...

Читать далее »