Эта статья относится к одной из техник рисования CSS, серии статей:
- Используйте тригонометрические функции для рисования кривой графики и отображения анимации в CSS.
- CSS Whimsy — Создание искусства с помощью CSS
Познакомит с некоторыми аспектами использования CSS вbackground,mix-blend-mode,maskИ некоторые связанные свойства, чтобы сделать несколько сложных и крутых фонов.
В этой статье вы узнаете о некоторых наиболее эффективных способах использования фона CSS и научитесь по-разному использовать некоторые свойства, связанные с фоном, для создания более сложных фоновых узоров. В процессе вы лучше разберетесь в различных методах градиента и глубже поймете различные градиенты.
В то же время с помощью мощного CSS-Doodle вы научитесь использовать набор правил для быстрого создания большого количества различных случайных шаблонов, почувствуете силу CSS и погрузитесь в красоту CSS.
Основы фона
Мы все знаем, что в CSSbackgroundочень мощный.
Прежде всего, давайте рассмотрим основы.В нашей повседневной жизни мы должны использовать следующие четыре:
- сплошной цвет фона
background: #000:
- Линейный градиент
background: linear-gradient(#fff, #000):
- радиальный градиент
background: radial-gradient(#fff, #000):
- угловой градиент
background: conic-gradient(#fff, #000):
Расширенный фон
Конечно. Освоив базовые градиенты, переходим к более сложным фоновым рисункам. Впервые я научился использовать градиенты для получения различных фоновых рисунков в книге «CSS Secret». Потом это постоянные поиски и пробы, подведенный некоторый опыт.
Прежде чем пытаться использовать градиенты для создания более сложных фонов, вот несколько важных советов:
- Градиенты — это больше, чем просто один
linear-gradientили синглradial-gradient,дляbackgroundЧто касается этого, он поддерживает суперпозицию нескольких градиентов, что очень важно; - Гибкое использование
repeating-linear-gradeint(repeating-radial-gradeint), это может сократить объем кода -
transparentПрозрачность повсюду - пытаться
mix-blend-modeа такжеmask, душа создания сложных узоров - Используя случайные переменные, он может превратить идею в бесчисленное количество красивых узоров.
Затем начните комбо-тур.
Используйте смешанный режим
mix-blend-mode , режим наложения. Чаще всего встречается в фотошопе, это одна из самых мощных функций в PS. В CSS мы можем использовать режимы наложения для смешивания нескольких слоев для получения нового эффекта.
Для некоторых основных способов использования режима наложения вы можете обратиться к этим моим статьям:
Тогда давайте попробуем первый шаблон, сначала кратко испытайтеmix-blend-modeэффект.
Мы используемrepeating-linear-gradientПовторите линейный градиент, чтобы сделать две фоновые полосы под противоположными углами. Обычно, без режимов наложения, наложите два узора друг на друга и посмотрите, что получится.
Ну что получается, это призрак :sweat_smile: . Очевидно, что из-за того, что узоры непрозрачны, после наложения друг на друга можно увидеть только одно из изображений из-за послойного отношения.
Что ж, исходя из этого, мы даемПиквыкройка, добавитьmix-blend-mode: multiply, еще раз и посмотреть, что произойдет на этот раз.
Видно, что после добавления режима наложения два фоновых изображения накладываются друг на друга с помощью определенного алгоритма, демонстрируя очень красивый эффект узора, который является именно тем эффектом, который нам нужен.
CodePen Demo - Repeating-linear-gradient background & mix-blend-mode
попробуй разныеmix-blend-mode
Тогда почему используется вышеmix-blend-mode: multiplyШерстяная ткань? Можно ли использовать другие режимы наложения?
конечно может. Вот только пример,mix-blend-mode: multiplyСредства в ПСумножить режим наложения, одна из групп режимов затемнения, принадлежащих режимам наложения слоя.
Мы используем демонстрацию выше и пробуем другие режимы наложения, чтобы получить разные эффекты.
Видно, что эффект наложения разных режимов наложения очень разный. Конечно, используя различные режимы наложения, мы также можем создавать узоры с различными эффектами.
CodePen Demo - Repeating-linear-gradient background & mix-blend-mode
Случайное создание шаблонов с помощью CSS-Doodle
На данный момент мы должны ввести артефакт для написания CSS —CSS-Doodle, я много раз упоминал CSS-doodle во многих других статьях, в двух словах это библиотека, основанная на веб-компоненте. Это позволяет нам быстро создавать страницы на основе макета CSS Grid и предоставляет различные удобные инструкции и функции (случайные, циклические и т. д.), позволяющие нам получать различные эффекты CSS с помощью набора правил.
Все еще используя DEMO выше в качестве примера, мы будемrepeating-linear-gradientЦвет, толщина, угол и режим наложения сгенерированного фона повторяющихся полос выбираются случайным образом, а затем используется CSS-Doodle для быстрого и случайного создания различных узоров на основе этого правила:
Вы можете щелкнуть, чтобы попробовать, и щелкнуть мышью, чтобы случайным образом создать различные эффекты:
CodePen Demo -- CSS Doodle - CSS MIX-BLEND-MODE Background
Попробуйте использовать радиальный градиент
Конечно, вышеперечисленное используетЛинейный градиент, аналогично, мы также можем использоватьрадиальный градиентИспользуйте ту же процедуру.
Мы можем использовать радиальные градиенты для создания нескольких радиальных градиентов. Так:
Дайте приложение с изображениемbackground-sizeэто будет выглядеть так:
Как и выше, мы немного деформируем это изображение, затем накладываем два слоя и добавляем стили CSS к верхнему изображению.mix-blend-mode: darken:
CodePen Demo -- radial-gradient & mix-blend-mode Demo
Случайное создание шаблонов с помощью CSS-Doodle
Опять же, используя CSS-Doodle, мы также можем получить серию интересных фоновых изображений, используя приведенные выше правила для радиальных градиентов.
Вы можете щелкнуть, чтобы попробовать, и щелкнуть мышью, чтобы случайным образом создать различные эффекты:
CodePen Demo -- CSS Doodle - CSS MIX-BLEND-MODE Background 2
Конечно, приведенные выше суперпозиции — это суперпозиции очень простых узоров, но, освоив этот принцип, вы можете сами попробовать создавать более сложные слияния. :собака:
Вышеупомянутый наложенный эффект, конечно же, является наложением внутреннего цвета большого куска.mix-blend-modeОн также может столкнуться с реальными градиентами для получения большего количества искр.
Применение режимов наложения на разных градиентных фонах
Использовать режимы наложения на разных градиентных фонах? Какой чудесный эффект это произведет?
При правильном использовании это может выглядеть так:
гм, совершенно другой стиль, чем полосатый рисунок выше.
ты можешь ткнутьgradienta.ioПроверьте это, вот библиотека фоновых узоров, созданных с помощью CSS для градиентных наложений.
Наложение различных шаблонов градиента с использованием режимов наложения
Ниже мы также реализуем один.
Во-первых, мы используем линейный градиент или радиальный градиент и случайным образом создаем несколько шаблонов градиента, таких как этот:
Затем между нами, начиная со второго слоя, используем режим наложения для наложения, всего нужно установить 5 режимов наложения, здесь я используюoverlay, multiply, difference, difference, overlay. Посмотрите на эффект после наложения, очень красиво:
CodePen Demo -- Graideint background mix
Поскольку коэффициент сжатия приведенного выше анимированного GIF-файла очень высок, он выглядит очень неровным, а изображение размытым.Вы можете щелкнуть ссылку выше, чтобы увидеть это.
Затем мы можем добавить еще один к наложенному изображению.filter: hue-rotate(), позвольте ему двигаться, немного увеличьте масштаб, чтобы увидеть эффект, эффект ослепительного света и тени:
CodePen Demo -- Graideint background mix 2
Случайное создание шаблонов с помощью CSS-Doodle
Dengdengdeng, да, здесь мы можем продолжить выдвигать CSS-Doodle.
Случайные градиенты, случайные режимы наложения, наложение и сушка.
Используйте CSS-Doodle для случайного создания разных градиентов, случайного использования разных режимов наложения и наложения их друг на друга., и посмотрите на эффект:
Конечно, поскольку он полностью сгенерирован случайным образом, не слишком хорошо, чтобы увидеть, сгенерировано ли он частично. Это непосредственно сплошной цвет. Но большинство из них неплохо: радость:
CodePen Demo -- CSS Doodle Mix Gradient
Спасибо за настойчивость, смотрите здесь. В основном используется первая половина из вышеперечисленного.режим смешивания, следующая, вторая половина, в основном будет использоватьmask, чудесное продолжается.
использовать маску
В дополнение к режиму наложения есть очень интересное свойство, связанное с фоном —MASK.
maskПереводится как маска. В CSS свойство маски позволяет пользователюСкрыть часть или всю видимую область элемента, замаскировав или обрезав определенную область изображения.
Если вы не знакомы с некоторыми основными способами использования маски, вы можете сначала прочитать мою статью —Фантастическая МАСКА CSS.
Проще говоря, маска позволяет нам гибко управлять изображением, настраивая часть на отображение, а остальные — на скрытие.
Использование шаблона маски сокращено
Например. Предположим, мы используемrepeating-linear-gradientГрадиент создает шаблон градиента следующим образом:
Его CSS-код выглядит так:
:root {
$colorMain: #673ab7;
}
{
background:
repeating-linear-gradient(0, $colorSub 0, $colorSub 3px, transparent 3px, transparent 10px),
repeating-linear-gradient(60deg, $colorSub 0, $colorSub 3px, transparent 3px, transparent 10px),
repeating-linear-gradient(-60deg, $colorSub 0, $colorSub 3px, transparent 3px, transparent 10px);
}
Если мы даем этот шаблон, накладываем маску следующим образом:
{
mask: conic-gradient(from -135deg, transparent 50%, #000);
}
Если вышеуказанная маска представлена фоном, это выглядит такbackground: conic-gradient(from -135deg, transparent 50%, #000), схема такая:
Два накладываются вместе, в соответствии с ролью маски,Перекрывающаяся часть фона и прозрачный градиент, созданный маской, станут прозрачными.. получит такой эффект:
CodePen Demo -- mask & background Demo
Мы завершили комбинацию фона и маски. Используя маску для вырезания фонового эффекта, мы можем сделать множество интересных фоновых узоров:
CodePen Demo -- mask & background Demo
mask-composite OR -webkit-mask-composite
Далее, используя маску для вырезания изображения, мы применим-webkit-mask-compositeАтрибуты. Это очень интересный элемент, очень похожий наmix-blend-mode / background-blend-mode.
-webkit-mask-compositeАтрибут : указывает, как несколько изображений масок, примененных к одному и тому же элементу, комбинируются друг с другом.
С точки зрения непрофессионала, его роль заключается в том, что когда элемент имеет несколькоmask, мы можем использовать-webkit-mask-compositeНаложите эффект.
Обратите внимание, что предпосылка здесь заключается в том, что если маска представляет собой несколько масок (аналогично фону, маска также может хранить несколько масок),-webkit-mask-compositeвступит в силу. Это означает, что маску элемента можно указать несколько раз через запятую.
Предположим, у нас есть такое фоновое изображение:
:root {
$colorMain: #673ab7;
$colorSub: #00bcd4;
}
div {
background: linear-gradient(-60deg, $colorMain, $colorSub);
}
Наша маска выглядит следующим образом:
{
mask:
repeating-linear-gradient(30deg, #000 0, #000 10px, transparent 10px, transparent 45px),
repeating-linear-gradient(60deg, #000 0, #000 10px, transparent 10px, transparent 45px),
repeating-linear-gradient(90deg, #000 0, #000 10px, transparent 10px, transparent 45px);
}
маска выражается какbackgroundВероятно, это так:
Если не добавлять-webkit-mask-composite, эффект после слияния суперпозиции следующий:
Если вы добавите-webkit-mask-composite: xor, становится так:
Видно, что пересечение и наложение линий имеют разный эффект.
CodePen Demo -- background & -webkit-mask-composite
Случайное создание шаблонов с помощью CSS-Doodle
После понимания основных принципов в CSS-Doodle мы используем несколько масок и-webkit-mask-composite, вы можете создать множество красивых фоновых рисунков:
Это похоже на калейдоскоп?
С CSS-Doodle мы задаем только грубые правила, дополненные случайными параметрами, случайными размерами. Затем появилось замечательное фоновое изображение.
Вот некоторые шаблоны попыток применения вышеуказанных правил:
CodePen Demo -- CSS Doodle - CSS MASK Background
Конечно, вы можете попробовать изменить форму, например, сделать ее похожей на чехол для телефона.
Следующие два демонстрационных примера также являются примерами всестороннего использования некоторых из вышеперечисленных методов, таких как выкройки чехла для мобильного телефона.
CodePen Demo -- CSS Doodle - CSS MASK Background 2
CodePen Demo -- CSS Doodle - CSS MASK Background 3
В заключение
задний планbackgroundНе только сплошные цвета, линейные градиенты, радиальные градиенты, угловые градиенты. Режимы наложения, фильтры, маски не одиноки.
когдаbackgroundСоответствие режиму наложенияmix-blend-mode,background-blend-mode, фильтрfilter, и маскаmaskИх можно комбинировать для получения различных эффектов.
К настоящему времени CSS становится все более и более мощным. Его можно использовать не только для написания дел, но и для создания множества красивых вещей. Пока мы готовы пробовать больше, мы можем создавать замечательные шаблоны.
наконец
Ну вот и подошла к концу эта статья, увидев это, вам тоже не терпится попробовать? Хотите попробовать сами?
Если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄
Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.
Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.