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

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

Градиентные рамки в CSS

От автора: допустим, вам нужна градиентная рамка CSS вокруг элемента. Я представляю себе это так: для этого не существует простого очевидного CSS API; я просто создам элемент-оболочку с linear-gradient фоном, а затем внутренний элемент перекроет большую часть этого фона, за исключением тонкой линии вокруг него. Возможно, так: Если вам не нравится идея элемента-оболочки, вы можете использовать псевдо-элемент, если отрицательное значение ...

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

Свойство visibility — это не только видимость

От автора: недавно я столкнулся с проблемой, когда текст, содержащийся в созданной мною button, отсутствовал в дереве доступности и, следовательно, не был доступен для программ чтения с экрана. После некоторой отладки я понял, причина в том, что я визуально анимировал текст, изменяя прозрачность и, что более важно, свойство HTML visibility. Я знаю, что это был недосмотр, и ранее я писал ...

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

Как начать работать с переменными шрифтами в CSS: основы использования

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

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

Все о переменных среды CSS

От автора: когда в iPhone X появилась печально известный выступ, то были введены и новые значения safe-area-inset, о которых вы, возможно, слышали, они позволили браузерам определять область экрана, покрытую выступом, и соответствующим образом перемещать содержимое. Недавно эти значения были формализованы как часть новой спецификации CSS переменные среды. Эта спецификация все еще находится в стадии черновика редактора, что означает, что, хотя ...

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

Просто используйте стили CSS :focus, черт побери

От автора: недавно вышло несколько статей и рекомендаций о том, как использовать :focus-visible для отображения стилей CSS focus, когда кто-то использует клавиатуру, но игнорировать их, когда пользователь взаимодействует с помощью мыши. Лучшее, что я видел до сих пор, пост Леи Веру: Я собираюсь начать общее добавление следующего правила ко всем таблицам стилей: :focus:not(:focus-visible) { outline: none } Это избавляет от ...

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

Обзор CSS Resets в 2018 году

От автора: сегодня речь пойдет о CSS Resets 2018. Все браузеры поставляются с набором стилей по умолчанию, которые применяются к каждой веб-странице в так называемой «таблице стилей агента пользователя». Большинство из этих таблиц стилей имеют открытый исходный код, поэтому вы можете просмотреть их. Таблица стилей Chromium UA — Google Chrome & Opera Таблица стилей Mozilla UA — Firefox Таблица стилей ...

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

Введение в CSS Shapes

От автора: CSS Shapes позволяют нам создавать интересные и уникальные макеты, определяя геометрические фигуры, изображения и градиенты, вокруг которых может обтекать текстовое содержимое. Узнайте в этом введении, как их использовать. До появления CSS Shapes было почти невозможно разработать макет в стиле журнала со свободно распределенным текстом. Напротив, макеты веб-дизайна традиционно формировались с помощью сеток, прямоугольников и прямых линий. CSS Shapes ...

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

Текущее состояние дел со стилизацией полосы прокрутки CSS

От автора: если вам нужна стилизация полосы прокрутки CSS прямо сейчас, одним из вариантов является использование набора свойств с префиксом ::webkit. К сожалению, это не очень помогает в Firefox или Edge, или родственной экосистеме браузеров. Но если этого достаточно для того, что вам нужно, вы можете сделать это довольно стильно: На CodePen есть множество примеров. Также неплохо абстрагироваться с помощью ...

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

Еще раз, порядок свойств CSS

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

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

Трюки с CSS writing-mode

От автора: свойство CSS writing mode устанавливает горизонтальное и вертикальное направление написание текста. Хотя оно предназначено для целей мультиязычности, но может быть использовано для дизайна. Основы Свойство CSS writing-mode устанавливает направление содержимого как по горизонтали, так и по вертикали. writing-mode: horizontal-tb; Допустимые значения: horizontal-tb — Контент размещается горизонтально слева направо, вертикально сверху вниз. Значение по умолчанию. vertical-rl — Контент размещается ...

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