Цветовой круг на CSS
На css-tricks.com опубликовали интересный способ получить цветовой круг с помощью Css: css-tricks.com/conical-gradients-css.
В уроке код для SASS, я попробовала сделать это простым CSS и используя меньшее количество элементов:
Размытие в исходном примере сделано с помощью -webkit-filter: blur(1.7em); , следовательно, будет работать только в браузерах на основе Webkit. Но можно воспользоваться svg-фильтрами и получить размытие и в других браузерах:
Показать комментарии
Сайдбар
Статьи
- Математические функции в CSS
- Адаптивное видео с помощью встроенных математических функций CSS
- Недоступность в картинках
- Единицы размеров в CSS
- Генератор цветовых тем
- Jekyll → Gatsby
- Вариативные шрифты
- Размеры в SVG
- Адаптивный Pixel Perfect
- Логотип не отвечает или временно недоступен
- SVG-паттерны
- Мыльные пузыри на SVG
- SVG-градиенты
- Весёлая консолька
- SVG-маски
- Умная прокрутка со Scroll Snap Points
- CSS-анимации для ротации изображений
- Анимированные SVG-маски
- Странности обводки в SVG
- SVG-прелоадеры
- Анимируем градиенты ещё раз
- Background-blend-mode
- Возможности оформления SVG
- CSS и SVG маски
- Nth-child и nth-of-type
- SVG-иконки
- SVG: заливка и обводка
- SVG-path
- SVG: группировка и переиспользование элементов
- SVG-фигуры и трансформации
- SVG
- СSS-градиенты и 3D
- Рисовалка анимированных теней
- Свежие CSS-паттерны
- CSS-паттерны
- Радиальные градиенты
- Линейные градиенты
- Крестики-нолики на CSS
- Border-image
- Электронные часы на CSS и JS.
- Сколько весят селекторы?
- Символы юникода
- Свойство content
- Анимируем CSS-градиенты
- Текстовые эффекты
- Древовидный список на CSS
- Css-селекторы, часть 2
- Css-селекторы
- Контекст наложения
- Два способа «прошить» элемент по краю
- Box-sizing
- Цвета в CSS
- Фон под строчками: добавляем поля
- Box-shadow
- Css-фигуры: лепесток
- Transform
- Css Animation
- 3D-куб
- Border-radius
- First letter
- Эти глаза напротив
- CSS-фигуры
- Стрелки с помощью свойства border
- Flexbox
Страницы
- SVG: полезные ссылки
- CSS-селекторы одной таблицей
- Таблица именованных цветов
- Функции Transform
- Свойства Transform
- Свойства Animation одной таблицей
- Разный синтаксис Flexbox
- Свойства Flexbox одной таблицей
Проекты
Пользовательские маркеры с помощью CSS::marker
Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Адам Аргайл
Ориол Бруфау
Благодаря Igalia, спонсируемой Bloomberg, мы наконец можем отказаться от наших приемов по стилизации списков. Видеть!
Благодаря CSS ::marker мы можем изменить содержимое и некоторые стили маркеров и чисел.
Совместимость с браузером
::marker поддерживается в Firefox для настольных компьютеров и Android, Safari для настольных компьютеров и Safari для iOS (но только свойства color и font-* , см. ошибку 204163 ), а также в настольных браузерах на базе Chromium и браузерах Android.
Псевдоэлементы
Рассмотрим следующий важный неупорядоченный список HTML:
- Lorem ipsum dolor sit amet consectetur adipisicing elit
- Dolores quaerat illo totam porro
- Quidem aliquid perferendis voluptates
- Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit consequatur alias facilis rem
- Fuga
В результате получается следующий неудивительный рендеринг:
Сегодня мы рады поговорить о псевдоэлементе ::marker , который дает возможность стилизовать элемент маркера, который браузеры создают для вас.
Ключевой термин: Псевдоэлемент представляет собой элемент документа, отличный от тех, которые существуют в дереве документа. Например, вы можете выбрать первую строку абзаца, используя псевдоэлемент p::first-line , даже если нет HTML-элемента, оборачивающего эту строку текста.
Создание маркера
Поле маркера псевдоэлемента ::marker автоматически генерируется внутри каждого элемента элемента списка, предшествующего фактическому содержимому и псевдоэлементу ::before .
li::before
- Lorem
- Lorem ipsum dolor sit amet consectetur adipisicing elit
- Dolores quaerat illo totam porro
- Ipsum
- Quidem aliquid perferendis voluptates
Стилизация маркера
До появления ::marker списки можно было стилизовать с помощью list-style-type и list-style-image , чтобы изменить символ элемента списка с помощью одной строки CSS:
Это удобно, но нам нужно больше. А как насчет изменения цвета, размера, интервала и т. д. Вот тут-то и приходит на помощь ::marker . Он позволяет индивидуально и глобально настраивать эти псевдоэлементы из CSS:
li::marker < color: hotpink; >li:first-child::marker
Внимание: если в приведенном выше списке нет розовых маркеров, значит ::marker не поддерживается вашим браузером.
Свойство list-style-type предоставляет очень ограниченные возможности стилизации. Псевдоэлемент ::marker означает, что вы можете выбрать сам маркер и применить стили непосредственно к нему. Это позволяет обеспечить гораздо больший контроль.
Тем не менее, вы не можете использовать все свойства CSS в ::marker . Список разрешенных и запрещенных свойств четко указан в спецификации. Если вы попробуете что-то интересное с этим псевдоэлементом, и это не сработает, приведенный ниже список поможет вам понять, что можно и что нельзя сделать с помощью CSS:
Разрешенные свойства CSS ::marker
- animation-*
- transition-*
- color
- direction
- font-*
- content
- unicode-bidi
- white-space
Изменение содержимого ::marker выполняется с помощью content , а не с помощью list-style-type . В следующем примере первый элемент стилизован с использованием list-style-type , а второй — с помощью ::marker . Свойства в первом случае применяются ко всему элементу списка, а не только к маркеру, а это означает, что текст анимируется так же, как и маркер. При использовании ::marker мы можем ориентироваться только на поле маркера, а не на текст.
Также обратите внимание, что свойство Disallowed background не имеет никакого эффекта.