Статьи

Простая адаптивная типографика при помощи clamp() - Используем возможности SASS

  alexei 27/10/2022 - 09:21
Простая адаптивная типографика при помощи clamp() - Используем возможности SASS
Адаптивная типографика становится все более популярной, тем более что CSS функция clamp() теперь доступна в каждом браузере. Но, если честно, для достижения нужного результата все еще требуется провести много вычислений. Поэтому вместо того, чтобы добавлять полную функцию clamp() непосредственно в код, мы можем облегчить нашу работу с помощью Sass.

Функции CSS, за которые мы благодарны, и функции CSS, которые нам нужны

  alexei 10/10/2022 - 10:08
Функции CSS, за которые мы благодарны, и функции CSS, которые нам нужны
Мы собрали в одном месте некоторые из замечательных новых функций CSS, за которые мы благодарны. Также, у нас возникли определенные пожелания, которые на наш взгляд не мешало бы добавить в спецификации CSS

Руководство по медиа-запросам определения типа устройства ввода

  alexei 21/09/2022 - 08:34
Руководство по медиа-запросам определения типа устройства ввода
В этой статье мы поговорим о том, как адаптировать наши сайты в зависимости от типа устройства: есть ли у него указатель или нет, и насколько он точен. Чтобы адаптировать наш сайт к возможностям этих устройств, мы поговорим о том, как правильно использовать специальные медиа-запросы hover, pointer, any-hover и any-pointer

Малоизвестные и редко используемые функции CSS в 2022 году

  alexei 16/06/2022 - 09:25
Малоизвестные и редко используемые функции CSS в 2022 году
CSS постоянно развивается, и некоторые интересные и полезные свойства либо остаются совершенно незамеченными, либо по тем или иным причинам остаются в стороне от публичных дискуссий. В этой статье мы рассмотрим часть таких CSS свойств и селекторов

Современная отзывчивая типографика при помощи CSS clamp

  alexei 08/05/2022 - 10:10
Современная отзывчивая типографика при помощи CSS clamp
В этой статье мы рассмотрим принципы отзывчивой типографики, примеры использования, лучшие практики, способы их реализации при помощи CSS функции clamp и как рассчитать правильные параметры. Мы также узнаем, как решить некоторые проблемы с принципами доступности и рассмотрим одну важную проблему, которую пока нельзя исправить, но о которой знать все же нужно

Создание слайдера который выглядит одинаково во всех браузерах

  alexei 16/02/2022 - 09:14
Создание слайдера который выглядит одинаково во всех браузерах
Каждый браузер отображает элемент слайдера по-разному. В этой статье мы рассмотрим причудливость слайдера или диапазонного элемента ввода и продемонстрируем, как оформить его таким образом, чтобы он выглядел одинаково во всех основных браузерах

Не боритесь с CSS каскадом. Контролируйте его!

  alexei 31/01/2022 - 09:54
Не боритесь с CSS каскадом. Контролируйте его!
Поскольку наши стили часто берутся из самых разных источников - и их может быть сложно структурировать и поддерживать, - каскад CSS может быть источником разочарования и причиной того, что мы получаем больше кода CSS, чем необходимо. И здесь мы рассмотрим способы, как с этим справиться

Руководство по современным цветам CSS - RGB, HSL, HWB, LAB и LCH

  alexei 06/01/2022 - 09:52
Руководство по современным цветам CSS - RGB, HSL, HWB, LAB и LCH
Знаете ли вы, что выбранная вами цветовая палитра может влиять на количество потребляемой вашим сайтом энергии? И выбор определенных цветов может увеличить время автономной работы мобильных устройств. В этой статье даются советы по не очень очевидным вещам, о которых следует помнить, работая с цветами в CSS

Подробное руководство по темному режиму на сайте

  alexei 05/12/2021 - 09:09
Подробное руководство по темному режиму на сайте
Темный режим в последнее время приобрел большую популярность. Так, например, компания Apple добавила темный режим в свои операционные системы iOS и macOS. Windows и Google сделали то же самое. Давайте же взглянем на темный режим в контексте веб-сайтов

Как использовать object-fit и background-size в CSS

  alexei 06/11/2021 - 09:01
Как использовать object-fit и background-size в CSS
Мы не всегда можем предоставить для HTML элемента изображение нужного размера. Если же мы используем контейнер с шириной и высотой, которые не пропорциональны соотношению сторон изображения, то изображение будет либо сжато, либо растянуто. Это выглядит нехорошо, однако решить эту проблему

Галерея изображений с увеличением по клику

  alexei 19/10/2021 - 09:23
Галерея изображений с увеличением по клику
Одним из вариантов использования CSS-сетки является отображение галереи изображений, но галерея сама по себе не так уж и впечатляет. Но мы могли бы, например, добавить эффект, когда при нажатии мышкой на изображение галереи, оно будет увеличиваться, не влияя на всю сетку. Это уже будет интереснее

Теперь можно обойтись и без псевдоэлементов

  alexei 04/10/2021 - 09:27
Теперь можно обойтись и без псевдоэлементов
В течение многих лет псевдоэлементы добросовестно помогали разработчикам реализовывать креативные проекты. Хотя они все еще занимают важное место, однако теперь, благодаря новым свойствам CSS, в некоторых сценариях мы можем отказаться от псевдоэлементов

Создание гибких компонентов веб-страницы - Решения для разработчика

  alexei 20/09/2021 - 09:04
Создание гибких компонентов веб-страницы - Решения для разработчика
В этой статье мы возьмем относительно простой дизайн текстово-мультимедийного компонента и рассмотрим процесс принятия решения о том, как лучше всего перевести его в код, учитывая потребности как пользователей, так и авторов контента

Руководство по новым поддерживаемым, современным CSS селекторам псевдоклассов

  alexei 06/09/2021 - 09:06
Руководство по новым поддерживаемым, современным CSS селекторам псевдоклассов
В редакторском проекте Рабочей группы CSS по селекторам уровня 4 есть несколько селекторов псевдоклассов, которые уже имеют определенную поддержку в большинстве современных браузеров. В этом руководстве рассказывается о селекторах, которые в настоящее время имеют наилучшую поддержку