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

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

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

От автора: в последнее время я заметил некую проблему при использовании пользовательских свойств, которая сбивает людей с толку, включая и меня, поэтому я постараюсь описать ее. Добавим в CSS пару пользовательских свойств: html { --color-1: red; --color-2: blue; } Давайте сразу воспользуемся ими, чтобы сделать фоновый градиент: html { --color-1: red; --color-2: blue; --bg: linear-gradient(to right, var(--color-1), var(--color-2)); } Теперь ...

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

Практическое использование функций CSS: calc, clamp, min, max

От автора: в настоящее время в CSS есть четыре хорошо поддерживаемых математических функции. Я обнаружил, что каждая из них чрезвычайно полезена в повседневной работе. Эти функции могут использоваться, возможно, неожиданными способами, например, в градиентах и цветовых функциях, а также в сочетании с пользовательскими свойствами CSS. Мы изучим синтаксис каждой из них, рассмотрим основные демонстрации их функций а также практические варианты ...

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

Инструменты CSS Grid в DevTools

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

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

Вложенность CSS, специфика и вы

От автора: вложенность CSS скоро появится в браузерах. С помощью вложенности, с которой вы, возможно, знакомы по Sass или Less, вы можете значительно сократить количество повторяющихся селекторов. Но вы также можете загнать себя в угол, если не будете осторожны. Это обзор того, как вы уже можете использовать ее сегодня, подводных камней и того, как их избежать. Как выглядит вложенность CSS? ...

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

В чем разница между значениями выравнивания start, flex-start и self-start?

От автора: в этом посте вы узнаете разницу между значениями выравнивания start, flex-start и self-start в flexbox. При выравнивании элементов по началу и концу строки в flexbox есть несколько значений на выбор. В этом посте я собираюсь объяснить разницу между некоторыми значениями, которые, как кажется, делают очень похожие вещи: flex-start и flex-end start и end self-start и self-end Значения start, ...

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

Использование CSS-форм для элементов управления и навигации

От автора: прямо горизонтально или вертикально — это общеизвестный порядок пользовательских элементов управления на экране. Как список пунктов меню. Но что, если мы изменим его на макет с изгибами, кривыми и уклонами? Мы можем осуществить это с помощью всего нескольких строк кода. В эпоху современного минималистичного дизайна изогнутые макеты для пользовательских элементов управления придают веб-дизайну нужную изюминку. И кодировать их ...

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

6 причин использовать Tailwind вместо традиционного CSS

От автора: в статье вы найдете шесть причин того, почему Tailwind лучше традиционного CSS и стоит ли его использовать в проектах. 1. Небольшой размер пакета = невероятная производительность В режиме разработки размер вывода Tailwind довольно велик. Это сделано намеренно: на этом этапе создается каждый возможный класс, поэтому вам не нужно ждать завершения процесса сборки, когда вы хотите что-то использовать. Однако, ...

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

Дилемма наименования переменных размера шрифта

От автора: как правило, проект имеет набор заранее определенных размеров шрифта, обычно в виде переменных, названных таким образом, чтобы добиться некоторого подобия порядка и согласованности. Любой проект значительного размера может использовать что-то подобное. Всегда есть заголовки, абзацы, списки и т. д. Вы можете явно устанавливать размеры шрифта (например font-size: 18px). Сырой CSS как бы. Я действительно встречаю это время от ...

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

Позиционирование перекрывающего содержимого с помощью CSS-сетки

От автора: недавно я экспериментировал с CSS-сеткой и свойствами выравнивания для создания макетов компонентов, содержащих несколько перекрывающихся элементов. Эти макеты могут быть оформлены с использованием абсолютного позиционирования и сочетания значений смещения (top, right, bottom, left), отрицательными полями и преобразованиями. Но с помощью CSS Grid, позиционирование наложеных элементов могут быть построены с использованием более логичных, удобочитаемых свойств и значений. Ниже приведены ...

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

Определение устройств с возможностью наведения указателя мыши

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

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