Category: CSS 3

18
Янв
2022

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

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

11
Янв
2022

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

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

10
Янв
2022

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

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

31
Дек
2021

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

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

24
Дек
2021

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

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

22
Дек
2021

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

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

20
Дек
2021

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

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

17
Дек
2021

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

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

13
Дек
2021

Прощайте CSS-модули, привет TailwindCSS

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

10
Дек
2021

Полное руководство по word-wrap, overflow-wrap и word-break в CSS

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

08
Дек
2021

Использование переменных CSS для сведения к минимуму анимации

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

02
Дек
2021

Подробное рассмотрение object-fit и background-size в CSS

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

22
Ноя
2021

Предотвращение цепной прокрутки с помощью overscroll-behavior

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

18
Ноя
2021

Как я организую свой CSS для сайтов без фреймворка

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

16
Ноя
2021

Распространенные ошибки при написании CSS с помощью БЭМ

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

10
Ноя
2021

Руководство по единицам измерения CSS

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

09
Ноя
2021

Условный border-radius в CSS

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

29
Окт
2021

min-content, max-content и fit-content в CSS

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

28
Окт
2021

Иконки сервиса IcoMoon

От автора: в этом уроке вы познакомитесь с отличным сервисом IcoMoon, который предлагает огромное количество шрифтовых иконок. Думаю, все вы в своих проектах использовали иконочные шрифты, например, наиболее известный – Font Awesome. Сервис IcoMoon пр…

26
Окт
2021

Макет CSS Flexbox против макета CSS Grid

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

25
Окт
2021

Создайте свой загрузчик CSS только с одним div

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

12
Окт
2021

В добрый путь, Tailwind CSS

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

11
Окт
2021

Понимание gap в CSS

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

07
Окт
2021

Меньше абсолютного позиционирования с современным CSS

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

07
Окт
2021

Псевдоэлементы before и after в CSS

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

06
Окт
2021

Единицы измерения контейнерных запросов CSS

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

30
Сен
2021

Функция CSS attr и tooltip без JS

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

24
Сен
2021

Библиотека MoreToggles для Checkbox

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

20
Сен
2021

7 полезных советов по CSS для улучшения ваших навыков

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

16
Сен
2021

Несколько нюансов использования пользовательских свойств

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