Category: CSS 3

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

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

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

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

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

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

От автора: эффект матового стекла, более известный как Glassmorphism, уже давно стал популярной функцией пользовательского интерфейса. Mac OS известна своим эффектом матового стекла, под Windows 10 он также реализован, например, на таких сайтах, как Github. Сегодня мы рассмотрим два способа получить эффект матового стекла с помощью чистого CSS. Метод первый Начнем с создания div: [crayon-61c01a51c86a4369245164/] […]

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

От автора: редизайн приложения никогда не бывает рутинным и простым. Через две недели после того, как меня приняли на работу в Polytomic, я начал реализовывать первый редизайн приложения с момента основания компании. Выбор технологии и способы ее реализации оставались за мной. Кодовая база нашего фронтенда — это одностраничное приложение на базе Create React App (CRA), […]

От автора: в наши дни очень важно сделать сайт адаптивным, чтобы он правильно отображался на всех устройствах. К сожалению, несмотря на все усилия, вы все равно можете получить неработающие макеты. Иногда макеты нарушаются из-за того, что некоторые слова слишком длинные, чтобы уместиться в контейнере. Переполнение контента может произойти, когда вы имеете дело с пользовательским контентом, […]

От автора: вы знаете о медиа-функции CSS prefers-reduced-motion? В двух словах, prefers-reduced-motion это параметр, который сообщает нам, установил ли пользователь системы удаление или минимизацию анимации и переходов. Вот пример использования: [crayon-61b05990c7705831548000/] Выполнение функции уменьшения анимации не обязательно означает полное ее удаление. Анимация может быть уменьшена или ускорена, в зависимости от того, что будет комфортно для […]

От автора: в этой статье мы рассмотрим, как работают object-fit и background-size, когда мы можем их использовать и почему, а также некоторые практические примеры использования и рекомендации. Мы не всегда можем загрузить изображения разного размера в элемент HTML. Если мы используем ширину и высоту, которые не пропорциональны соотношению сторон изображения, изображение может быть сжато или […]

От автора: предположим, у нас есть элемент с position:fixed. Если у него есть прокрутка, вы заметите, что когда вы достигнете нижней границы элемента, браузер продолжит прокрутку основного элемента. Это нежелательный и сбивающий с толку эффект. К счастью, мы можем исправить это с помощью CSS. В этой статье мы рассмотрим свойство CSS overscroll-behavior, какую проблему оно […]

От автора: за 20 лет опыта веб-разработки я создал для себя стандартный подход CSS, которым я хотел бы поделиться в этой статье. В этом примере показан мой структурный подход, а не дизайн. Таким образом, статья не является визуальным шаблоном и не имеет дизайна. В общем, я использую rem как единицу измерения для всех размеров, кроме […]

От автора: при разработке программного обеспечения важно согласовать инструкции, технологии и методологии. Эти соглашения должны быть результатом обсуждений, проверки концепций, знаний, а иногда и голосований. К участию следует приглашать всю команду, потому что разработка программного обеспечения — это командная работа. В visuellverstehen мы разделены на несколько команд. Некоторые команды согласились использовать Блок-элемент-модификатор (BEM), а другие […]

От автора: в CSS каждое свойство должно иметь какое-то значение. Иногда это путь, иногда цвет, иногда строка, а иногда единица измерения. Сегодня мы говорим о единицах CSS для измерения длины, ширины и высоты элемента. Есть много CSS единиц, которые могут быть использованы для измерения, например: px, em, rem, vh, vw и т.д. Мы можем разделить […]

От автора: некоторое время назад я изучал домашнюю страницу facebook.com, чтобы узнать и разобраться, как она построена. Мне всегда любопытно посмотреть, как люди пишут CSS. Я заметил очень и очень интересное значение border-radius для карточного компонента в основной ленте. И поделился следующим твитом об этом открытии. Затем, я получил такой ответ от Мириам Сюзанн: всегда […]

От автора: понимание размеров в CSS необходимо разработчикам, которым нужна гибкость для правильного представления содержимого веб-страницы. В CSS мы определяем размер элемента, используя значения длины (px, em), процентов и ключевых слов. Хотя типы значений длины и процентного значения часто используются для макетов веб-страниц, они не всегда идеально подходят. Иногда мы используем ключевые слова, такие как […]

От автора: Flexbox и Grid — это две модели макета CSS, которые можно использовать для создания сложных макетов веб-приложений с помощью всего лишь пары правил CSS. Это руководство поможет вам понять различия между моделями макетов CSS Flexbox и Grid и порекомендует, когда использовать одну вместо другой. Мы начнем с изучения того, как работает модель макета […]

От автора: да, еще один пост о загрузчиках CSS, но на этот раз вы создадите загрузчик! В этой статье я поделюсь с вами несколькими приемами, которые я использую при создании своих загрузчиков. Существует множество техник создания точек загрузки. Я остановлюсь на своем любимом — radial-gradient и фоновой анимации. Что ж, еще один скучный урок, в […]

От автора: с годами CSS-фреймворки стали невероятно распространенными в веб-дизайне: эстетика Google Material Design постепенно проявляется в Сети, а библиотека плагинов и тем Bootstrap становится популярной по умолчанию. Хорошая новость в том, что времена, когда страницы выглядели так: … давно прошли, отчасти благодаря фреймворкам CSS. Но, как и многие другие люди, вы можете спросить, что […]

От автора: каждый раз, когда я работаю над компонентом, которому требуется абсолютное позиционирование, я спрашиваю себя: действительно ли это необходимо? Я заметил несколько вариантов использования, в которых нет необходимости в position:absolute. Мне показалось это интересным, и захотел, задокументировать варианты использования, с которыми я обычно сталкивался, работая над проектами. В этой статье я рассмотрю несколько вариантов […]

От автора: полагаю, многим из вас знакомы псевдоэлементы, которые можно получить и стилизовать с помощью before и after в CSS. Часто их используют для оформления списков, элементов меню на списках, цитат и т.д. В этом уроке будет показан еще один интересный вариант использования псевдоэлементов, который можно применить для «битых» изображений. Читайте нас в Telegram, VK, […]

От автора: несколько дней назад я увидел твит Мириам Сюзанн о поддержке единиц измерения запросов CSS. Первоначально это было предложено Уной Кравец на Github. Я не мог не поэкспериментировать с ними и посмотреть, как мы можем получить еще больше преимуществ от контейнерных запросов CSS. Я постараюсь объяснить, как работает каждая из единиц, и где мы […]

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

От автора: одним из элементов форм, которые стилизовать достаточно проблематично, являются чекбоксы. В этом уроке вы познакомитесь с замечательной библиотекой MoreToggles.css, которая поможет решить данную проблему. Библиотека использует только CSS и …

От автора: изучение CSS иногда может быть тяжелым. Вам нужно выучить множество концепций. Изучить CSS несложно, но вам потребуется много практики, чтобы научиться в нем хорошо разбираться. Учиться на практике — лучший способ улучшить свои навыки, независимо от того, какую технологию вы хотите изучить. Вот почему в этой статье я хотел поделиться с вами списком […]

От автора: в последнее время я заметил некую проблему при использовании пользовательских свойств, которая сбивает людей с толку, включая и меня, поэтому я постараюсь описать ее. Добавим в CSS пару пользовательских свойств: [crayon-6142d94f0c8b8929451202/] Давайте сразу воспользуемся ими, чтобы сделать фоновый градиент: [crayon-6142d94f0c8be524188634/] Теперь предположим, что на странице есть пара div: [crayon-6142d94f0c8c0723283757/] Позвольте мне стилизовать их: […]