Category: CSS 3

15
Сен
2022

Как работают CSS псевдоклассы :is, :where и :has

От автора: CSS селекторы позволяют выбирать элементы по типу, атрибутам и положению внутри HTML-документа. В этом уроке разберем три новые опции — :is(), :where() и :has(). Селекторы в стилях применяются повсеместно. Пример ниже находит все параграфы и меняет жирность шрифта на bold: [crayon-6322ba351fad2597390204/] Для поиска DOM узлов селекторы можно использовать и в JavaScript: document.querySelector() возвращает […]

07
Июл
2022

Красивый эффект при наведении на блок

От автора: посетителям гораздо интереснее и комфортнее на веб-страницах, если контент страницы реагирует на действия посетителя. Самыми элементарными и простыми действиями посетителя могут быть наведение курсора мыши на блоки и клик по блоку или кнопке. В данном уроке рассмотрен интересный эффект наведения на блоки, что позволит вовлечь посетителя дальше взаимодействовать со страницей. Читайте нас в […]

04
Июл
2022

Эффект наведения на кнопку

От автора: важным элементом веб-страницы, особенно лендинга является CTA (call to action) – призыв к действию. CTA часто сразу пишут на кнопках «Оформить заказ», «Перезвоните мне», «Заказать расчет стоимости» и т.д. И чем лучше сделана кнопка, чем красивее эффект по наведению на такую кнопку, тем выше вероятность, что ее нажмут посетители сайта. В данном уроке […]

06
Июн
2022

Автоматическое изменение размера столбцов в CSS Grid: auto-fill против auto-fit

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

27
Май
2022

Соотношение сторон это круто

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

27
Май
2022

Соотношение сторон это круто

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

17
Май
2022

4 новые удивительные CSS функции в 2022

От автора: CSS разительно изменился за последние годы. Но для меня взрывным годом для CSS стал 2021. В этот год вышло много новых функций. Среди новых функций можно назвать контейнерные запросы, родительские селекторы, правила управления каскадированием, CSS Grid и т.д. Все главные производители браузеров в восторге от всех этих функций. Это очень помогает нашим разработчикам. […]

17
Май
2022

4 новые удивительные CSS функции в 2022

От автора: CSS разительно изменился за последние годы. Но для меня взрывным годом для CSS стал 2021. В этот год вышло много новых функций. Среди новых функций можно назвать контейнерные запросы, родительские селекторы, правила управления каскадированием, CSS Grid и т.д. Все главные производители браузеров в восторге от всех этих функций. Это очень помогает нашим разработчикам. […]

16
Май
2022

Динамический разделитель строк через Flexbox

От автора: при работе с UI мне нужно было добавить разделитель между двумя секциями. Вот так, как показано на изображении ниже в статье. На экранах поменьше разделитель должен становиться горизонтальным: Давайте рассмотрим HTML. [crayon-6281ed853cd22516874048/] У нас есть секция с двумя дочерними элементами, между которых нам необходим разделитель. Для этого я воспользуюсь flexbox. [crayon-6281ed853cd29822032679/] Элементы должны […]

13
Май
2022

CSS Grid с автозаполнением и максимальным количеством столбцов минимального размера

От автора: мы реализовали новую классную технику автозаполнения в CSS Grid в ядре Drupal 10. Думаю, ей можно поделиться с миром. Требования: Пользователь определяет максимальное число колонок. Это будет «естественное» состояние нашей автозаполняемой сетки Если ячейка сетки становится уже заданной пользователем ширины, сетка перестраивается и уменьшает количество колонок Ячейки сетки всегда должны растягиваться на всю […]

12
Май
2022

6 креативных идей CSS hover эффекта для ссылок

От автора: CSS hover эффекты для ссылок могут придать изюминку обычной веб-странице. Бывало ли у вас, что вы не можете придумать красивый hover эффект? Я покажу вам 6 CSS эффектов для вашего следующего проекта. Мы говорим про :hover. Однако бывают случаи (не всегда), когда лучше добавить также :focus, так как не всегда для взаимодействия используется […]

08
Апр
2022

5 эффектов наведения ссылок на CSS

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

04
Апр
2022

4 способа прижать футер к низу страницы

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

09
Мар
2022

Как использовать CSS ::before и ::after для анимаций и переходов

От автора: Вы когда-нибудь сталкивались с красиво анимированным компонентом на веб-сайте и думали про себя: «Вау! Как красиво — я бы хотел, чтобы я мог так сделать», но быстро отказывались от этой мысли, потому что предполагали, что это либо выше ваших навыков, либо достижимо только с использованием какой-то библиотеки анимации? Вы будете удивлены, узнав, что […]

07
Фев
2022

9 потрясающих инструментов CSS

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

07
Фев
2022

9 потрясающих инструментов CSS

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

31
Янв
2022

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

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

28
Янв
2022

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

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

27
Янв
2022

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

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

27
Янв
2022

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

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

26
Янв
2022

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

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

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), […]