CSS (Cascading Style Sheets) ― это язык стилей, который используется для оформления веб-страниц. Несмотря на то, что большинство приемов CSS документированы и хорошо известны, существуют также недокументированные приемы, которые могут быть полезны для создания уникального дизайна и функциональности.
1. ⁚⁚marker
Псевдоэлемент ⁚⁚marker позволяет стилизовать маркеры списка. Обычно маркеры списка предопределены и трудно изменяемы. Однако с использованием ⁚⁚marker вы можете задавать свои собственные стили, такие как цвет, размер и форма маркера.
ul li⁚⁚marker {
color⁚ red;
font-size⁚ 20px;
}
2. ⁚not
Псевдокласс ⁚not позволяет выбрать элементы, которые не соответствуют заданному селектору. Например, если вы хотите применить стили к всем элементам, кроме определенного класса или идентификатора, вы можете использовать ⁚not.
p⁚not(.highlight) {
color⁚ blue;
}
3. caret-color
Свойство caret-color позволяет изменять цвет курсора в текстовых полях. По умолчанию цвет курсора совпадает с цветом текста. Однако, с помощью свойства caret-color вы можете задать свой отдельный цвет для курсора.
input[type="text"] {
caret-color⁚ red;
}
4. ⁚⁚selection
Псевдоэлемент ⁚⁚selection позволяет стилизовать выделенный текст на странице, когда пользователь выделяет его с помощью мыши. Вы можете изменить цвет текста, фона и другие свойства для выделенного текста.
⁚⁚selection {
color⁚ white;
background-color⁚ blue;
}
5. backdrop-filter
Свойство backdrop-filter позволяет добавлять фильтры к заднему фону элемента, что создает эффекты, такие как размытие, насыщенность и т.д. К этому свойству можно применять стандартные CSS фильтры, такие как blur или grayscale.
div {
background-color⁚ rgba(0, 0, 0, 0.5);
backdrop-filter⁚ blur(10px);
}
Это только несколько примеров недокументированных приемов CSS, которые могут быть полезны для ваших проектов. Используйте их с осторожностью и проверьте их совместимость с различными браузерами.
Меня зовут Дмитрий Григоров. Я работаю фронтменом в команде RBO PRO Райффайзенбанка. Я объясню и покажу вам, как творчески применять эти возможности CSS. В этой статье мы рассмотрим следующие темы
- Фоны и рамки
- Формы, и
- Визуальные эффекты.
Фоны и рамки
В первой теме «Фоны и рамки» объясняется, что такое CSS3 currentColour, как создавать прозрачные рамки, множественные рамки и что такое гибкое позиционирование фона. Вторая тема, «Формы», показывает, как создавать различные типы прямоугольников с помощью css. В разделе «Визуальные эффекты» мы рассмотрим примеры применения различных цветовых тонов. В теме «Взаимодействие с пользователем» вы также узнаете, как проводить интерактивное сравнение изображений.
Как вы думаете, какого цвета будет коробка «Hello world»?
Голубой, верно? Да, правильно. Почему
Потому что в CSS есть хорошая переменная currentColour, которая получает свое значение цвета из свойства color, поэтому цвет будет тот же #38A. Также, если вы не передадите цвет в border, outline, text-shadow или box-shadow, то по умолчанию вы получите тот же цвет, который описан в свойстве color.
На диаграмме ниже видно, что currentColour может передаваться явно, а может и не передаваться.
Переменная currentColor предоставляет очень полезный код и придерживается принципа DRY (не повторять одно и то же). Кроме того, внешний вид элемента будет отличаться, если изменить только свойство color блока, содержащего приведенный выше код, как показано на следующем рисунке.
Полупрозрачные рамы
Если бы кто-то спросил вас раньше, как создать полупрозрачную рамку, вы бы ответили: «Это легко, нужно просто создать рамку». Создайте два блока div, родительский и дочерний. На родительском элементе установите padding 10px и background-colour:. rgba(255, 255 , 255, 255, 0.5) (полупрозрачный), который будет цветом прозрачной границы». Но это можно сделать и более простым способом.
Что произойдет, если передать полупрозрачную рамку в рамку? Вы не получите ничего хорошего. Почему; в CSS есть нечто под названием background-clip, о существовании которого многие забывают. Параметр background-clip отвечает за распределение фона и имеет три опции: border-box (по умолчанию), content-box и padding-box.
По умолчанию используется border-b-box. Это означает, что фон находится ниже границы и прозрачность, установленная на границе, не видна, потому что фон находится ниже границы. Вы также можете передать content-box в background-clip. Это означает, что фон растягивается ниже содержимого. Однако здесь мы передаем padding-box, чтобы получить такую прозрачную рамку.
Множественные рамки
Существует два способа создания нескольких рамок — с помощью Border и Outline. Border и Outline хороши, но с их помощью можно создать только две рамки.
Однако если вам нужно более трех или четырех кадров, мы рекомендуем использовать Shadow.
У всех нас есть опыт работы с функцией затенения коробки. Многие знают, что установка для кадровой тени нулевого вертикального смещения (v-offset), нулевого горизонтального смещения (h-offset), нулевого размытия и четвертого параметра, называемого радиусом распространения (increase shadow), увеличит Рама. Поэтому вы можете создать столько кадров, сколько захотите, разделяя их запятыми.
Гибкое размещение фона
Следующая тема — гибкое размещение фона. Многие из нас сталкиваются с проблемой, как расположить изображение на заднем плане. Вы можете использовать background-position для их позиционирования. Хотелось бы отметить, что такие ключевые слова, как right, top, bottom и left в CSS были обновлены. Здесь написание справа 10px и снизу 20px для изображения означает, что оно должно иметь отступ 10px справа и 20px снизу.
Аналогично, если написать background-position: right 10 px top 20 px, то отступ составит right 10 px , top 20 px .
Гибкое позиционирование можно использовать для размещения различных изображений на заднем плане. Не повторяйтесь, используйте ключевые слова, чтобы разнести их по разным углам. Он полностью поддерживается, воспользуйтесь этим.
Полосатые фоны.
Давайте поговорим о создании фонов. Обычно для создания неровного фона используют различные изображения, созданные с помощью визуального процессора. В качестве альтернативы вы можете попросить дизайнера нарисовать и вставить изображения, и все будет выглядеть хорошо.
Однако простые полосатые фоны можно создать, используя только CSS.
Мы все знаем, как выглядит типичный наклон: это уклон.
Но что произойдет, если мы наложим ограничения на этот градиент?
Затем мы видим один цвет вдоль края.
Но что произойдет, если мы уменьшим градиент до одной точки?
Видны только две полосы движения. Эти две полосы составляют основу полосатого фона. Затем установите размер фона на 30px. Поскольку градиент разделен 50/50, одна полоса имеет размер 15px, а другая — 15px. Поэтому имеется полосатый фон.
Чтобы сделать одну полосу больше, а другую меньше, установите желтый цвет на 30%, а синий — на 0%. Что означает ноль? Конечно, 30% берется из желтого цвета. Но может ли кто-нибудь сказать мне, что означает ноль? По сути, это оставшееся расстояние от размера фона. Таким образом, 30% от 30px — это примерно 9px, которые заполняются желтым цветом, а остальное — синим.
Чтобы нарисовать более одного цвета на фоне, необходимо справиться с такими ситуациями, как повторение промежуточных цветов. Скажем, для желтого цвета: 33% фона заполнено желтым цветом, а остальное — синим. Затем я говорю для синего цвета: нет, заполните 66%, а остальное — желто-зеленым. Для фона можно использовать три цвета.
Для создания вертикальных полос сделайте то же самое, но только измените размер фона, а в линейном градиенте — ключевое слово справа. Или же введите 90° вместо ключевого слова, и все будет правильно.
Сочетание горизонтальных и вертикальных полос позволяет получить такой сетчатый фон.
Имеется квадратный фон-размер, и вы передаете градиент фонового изображения через запятую, чтобы получить фон сетки.
Фоны с диагональными полосами немного сложнее. Здесь мы используем итеративный линейный градиент вместо обычного линейного градиента. Обратите внимание, что фон имеет размер 30px, а размер фона — квадрат 42px x 42px. Почему 42px?
Что, если вы испытываете что-то другое? Например, 30px вместо 42px.
Почему 42px. Вам поможет базовая школьная математика.
Мы знаем, что фон — это квадрат и что квадрат состоит из двух равнобедренных треугольников. Далее выполните некоторые математические преобразования, но помните, что фон расширяется до 30px.
Если вы удалите 30 типов, у вас останется примерно 42. Завершите. Есть такой фон, с диагональными полосами.
lea.verou.me/css3patterns
Леа Вероу, автор книги «Секреты CSS» и сотрудник Всемирного консорциума W3C, имеет целую коллекцию фонов, реализованных с помощью градиентов.
Пример реализован Леа Веру. Пример Беннетта Фили.
Данные.
Затем я начинаю этот вопрос с прямоугольников.
Все мы знаем, как выглядит прямоугольник: это прямоугольник прямоугольной формы. Прямоугольник — это прежде всего нестандартный прямоугольник, и его углы не обязательно должны быть правильными. Чтобы создать косой угол, можно использовать ложный классис до. Определите относительное положение класса кнопки. Абсолютная позиция предыдущего псевдоклассиса. Определите фоновый ложный classis для фона и используйте skewx для преобразования, чтобы получить такой диагональный угол.
Создание таблицы происходит так же, как и раньше. Но здесь мы вращаемся через точку обзора. И у нас есть эти трапеции.
Для создания изображений бриллиантов можно использовать различные методы. Один из них также использует преобразования. Таким образом, у нас есть родительский div, а изображение вложено в него.
Мы поворачиваем родительский div на 45 градусов, чтобы получить ромб, но изображение наклоняется. Мы хотим вернуться в нормальное состояние, поэтому повернем изображение на -45 градусов. В итоге мы получаем шестиугольник. Почему; потому что у нас здесь два прямоугольника, и мы срезаем углы. Чтобы создать бриллиант, отрегулируйте масштаб (1,42) и увеличьте масштаб, чтобы получить бриллиант.
Вы также можете использовать Clip Path для создания изображения в форме ромба. Можно ввести различные названия, например, круг, многоугольник. В этом случае используется полигон. Я прохожу через центр обеих сторон квадрата к полигону, а hover E возвращает точки к углам квадрата, поэтому происходит такое движение. Это очень хорошая собственность.
Он поддерживает мультфильмы, но, к сожалению, плохо поддерживается браузерами. Только Chrome и Firefox поддерживают его.
Как срезать углы? Запомните тему фоновой полосы. Это то же самое, что и наклон. В основном, он делит историю на четыре части Есть четыре градиента, разбросанные под разными углами с гибким креплением и окрашенные в прозрачный синий цвет. Затем они срезали наши углы.
Чтобы сделать срезанные углы внутри, мы используем здесь радиальные градиенты. Единственное, что у нас есть, это разместить круги под разными углами, с ключевыми словами, как в круге слева вверху. Снова расположите четыре детали по ключевым словам и сделайте углы таким образом.
Как создать простые круговые диаграммы только с помощью CSS. Обычно для создания круговых диаграмм используются фреймы, такие как D3.JS. Однако вы можете использовать CSS для создания простых круговых диаграмм.
Имеется квадрат и нарисован круг.
Заполните половину коричневого круга.
Затем создайте псевдо-лаз. Покрасьте его на уже имеющемся блоке в тот же зеленый цвет.
На самом деле, просто перемещая этот псевдогриб, вы уже имеете своего рода круговую диаграмму, но только половину, потому что остальные места зеленые.
В данном разделе описывается этот интересный подход. Если вы пройдете через отрицательную задержку анимации в блоке и приостановите воспроизведение анимации, вы увидите, что состояние элемента меняется. Также, если анимация удаляется через четыре (4) секунды, а в стиле описано -2 секунды, половина состояния теряется, и круг становится наполовину цветным.
Визуальные эффекты
Цветовое покрытие может быть выполнено несколькими способами; приведем два примера: первый — наложение цвета с помощью фильтра; второй — использование фильтра для наложения цвета. С помощью фильтров можно наложить множество оттенков, но добиться определенного оттенка для многих может быть проблематично. В этот момент появляется режим смешивания фона.
А теперь более адаптивный способ: это режим наложения фона. Он более адаптивен, поскольку позволяет не только наслаивать нужные цвета, но и смешивать их, и это свойство работает отлично. Кроме того, вы можете использовать его для создания различных цветовых эффектов.
