CSS バックグラウンドの強力な使用法を例を通して学びます (収集価値あり)

この記事では、CSS で background、mix-blend-mode、mask を使用するいくつかの方法を紹介します。もう少し複雑でクールな背景を作成するためのいくつかの関連プロパティ。

この記事では、CSS 背景のより強力な使用法について学び、背景関連のプロパティを使用してさまざまな方法でより複雑な背景パターンを作成する方法を学びます。このプロセスでは、さまざまなグラデーションテクニックをよりよく習得し、さまざまなグラデーションについてより深く理解できるようになります。

同時に、強力な CSS-Doodle の助けを借りて、一連のルールを使用して多数の異なるランダム パターンをすばやく作成し、CSS の力を感じて、 CSSの美しさ。

背景の基本

CSS の background が非常に強力であることは誰もが知っています。

まずは基本をおさらいしましょう 日常生活でよく使うのは以下の4種類です

• 単色の背景背景: #000 ：

• 線形グラデーション背景: 線形グラデーション(#fff, #000) :

• 放射状グラデーション背景: 放射状グラデーション(#fff, #000) :

• コーナー グラデーションbackground: conic-gradient(#fff, #000) :

#背景の詳細​​

グラデーションは単なる単一の
• linear-gradient または単一のグラデーションではありません。 radial-gradient、background では、複数のグラデーションのオーバーレイをサポートしています。これは非常に重要です。
柔軟な使用
• repeat-linear-gradeint（repeat-radial-gradeint）、多くのコードを削減できます
• transparent透明性はどこにでもあります
Try
• mix-ブレンドモードとマスク、複雑なパターン作成の魂
ランダム変数を使用すると、アイデアを無数の美しいパターンに変えることができます

• 信じられないほどのカラー混合モード mix-blend-mode
• 信じられないほどのブレンド モード、background-blend-mode

mix-blend- モードの役割## ＃。

を使用して線形グラデーションを繰り返し、反対の角度を持つ 2 つの背景ストライプを作成します。通常は、ブレンド モードを使用せずに、2 つのパターンを重ねて、何が起こるかを確認します。

さて、何が起こるかわかりません。当然のことながら、パターンは透明ではないので、重ね合わせた後は、重ね合わせにより片方の絵しか見えなくなります。

OK、これに基づいて、

を toplayer パターンに追加します。実行してください。もう一度見て、今回はどうなるか見てみましょう。

ブレンディング モードを追加すると、2 つの背景画像が特定のアルゴリズムによって重ね合わされ、非常に美しいパターン効果が示されていることがわかります。これはまさに私たちが行った効果です。欲しい。

別の mix-blend-mode

CSS-Doodle を使用してパターンをランダムに生成する

これで終わりです。 CSS を記述するためのアーティファクト -

CSS-Doodle を導入する必要があります。CSS-doodle については他の多くの記事で何度も言及しました。簡単に言うと、これは Web コンポーネント ベースのライブラリです。 。これにより、CSS グリッド レイアウトに基づいてページをすばやく作成でき、さまざまな便利な命令や関数 (ランダム、ループなど) が提供され、一連のルールを通じてさまざまな CSS 効果を得ることができます。 上記のデモを例として、

によって生成された繰り返しストライプの背景の色、太さ、角度をランダム化し、ブレンド モードをランダムに選択します。次に、CSS-Doodle を使用して、このルールに基づいてさまざまなパターンをすばやくランダムに作成します。

クリックして試してみると、さまざまな効果をランダムに生成できます。マウスのクリック:

放射状グラデーションを使ってみる

もちろん、上記は

ですが、同様に radial gradient を使用して同じルーチンを適用することもできます。 放射状グラデーションを使用して、複数の放射状グラデーションを生成できます。次のように:

画像に

を適用すると、次のようになります:

上記と同様に、このグラフィックを少し変形してから 2 つのレイヤーを重ね、一番上のグラフィックに CSS スタイルを追加します。

:

CSS-Doodle を使用してパターンをランダムに生成する

繰り返しますが、ここでも使用します。 CSS-Doodle を作成し、上記のルールを放射状グラデーションに適用すると、一連の興味深い背景画像を取得することもできます。

クリックして試すことができ、マウスをクリックするとさまざまな効果をランダムに生成できます:

もちろん、上記のオーバーレイは非常に単純なパターン オーバーレイですが、この原理をマスターした後は、より複雑な融合を自分で試してみることができます。

上記のオーバーレイ エフェクトは、大きな単色のオーバーレイに基づいています。もちろん、

は実際のグラデーションと衝突して、より多くの火花を作成することもできます。 さまざまなグラデーション背景でブレンド モードを使用します

さまざまなグラデーション背景でブレンド モードを使用しますか?それはどんな素晴らしい効果をもたらすでしょうか？

適切に使用すると、次のようになります。

えーっと、上の縞模様とはまったく異なるスタイルです。

にアクセスしてご覧ください。これは、CSS を使用して作成されたグラデーション オーバーレイ背景パターンのライブラリです。 描画モードを使用してさまざまなグラデーション パターンをオーバーレイする

次に、描画モードを実装してみましょう。

まず、以下に示すように、線形グラデーションまたは放射状グラデーションを使用して、いくつかのグラデーション パターンを自由に作成します。

次に、描画モードを使用して、2 番目のレイヤーから 2 つずつ重ねていきます。合計 5 つの描画モードを設定する必要があります。ここでは、overlay # を使用しました。 ##、乗算、差分、差分、オーバーレイ。重ね合わせたエフェクトを見てください。非常に素晴らしいです:

CodePen デモ -- Graideint 背景ミックス

filter: hue-rotate() を追加して画像を動かし、少しズームインして効果、豪華な光と影の効果を確認します。

CodePen デモ -- Graideint 背景ミックス 2

CSS-Doodle を使用して、さまざまなグラデーションをランダムに作成し、さまざまなブレンド モードをランダムに使用し、それらをオーバーラップさせて 、その効果を確認します。

もちろん、これは完全にランダムに生成されるエフェクトであるため、生成されるエフェクトがあまり見栄えがよくなかったり、単なる単色だったりする場合があります。しかし、それらのほとんどは非常に優れています

CodePen デモ -- CSS Doodle Mix Gradient

ミキシングモードをメインに使用し、後半はマスクをメインに使用していきます。

MASK) があります。

マスクを簡単に説明すると、画像を柔軟に制御して、一部を表示し、残りの部分を非表示にすることができます。

repeat-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(-135deg、透明50%、 #000 )

マスクの機能に従って、2 つは一緒に重ね合わされます。背景とマスクによって生成された透明なグラデーションが透明になります。次のような効果が得られます。

##CodePen デモ -- マスクと背景のデモ

背景とマスクの組み合わせが完了しました。マスクを使用して背景効果をカットすると、多くの興味深い背景パターンを作成できます:

mask-composite

-webkit-mask-composite

-webkit を使用します。 -mask-composite プロパティ。これは非常に興味深い要素で、mix-blend-mode / background-blend-mode

-webkit-mask-composite: プロパティは、同じ要素に適用される複数のマスク イメージを相互に合成する方法を指定します。

通俗点来说，他的作用就是，当一个元素存在多重 mask 时，我们就可以运用 -webkit-mask-composite 进行效果叠加。

注意，这里的一个前提，就是当 mask 是多重 mask 的时候（类似于 background，mask 也是可以存着多重 mask），-webkit-mask-composite 才会生效。这也就元素的 mask 可以指定多个，逗号分隔。

假设我们有这样一张背景图：

:root {
    $colorMain: #673ab7;
    $colorSub: #00bcd4;
}
div {
    background: linear-gradient(-60deg, $colorMain, $colorSub);
}

我们的 mask 如下：

{
    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);
}

mask 表述成 background 的话大概是这样：

如果，不添加任何 -webkit-mask-composite，叠加融合之后的效果是这样：

如果添加一个 -webkit-mask-composite: xor，则会变成这样：

可以看到，线条的交汇叠加处，有了不一样的效果。

CodePen Demo -- background & -webkit-mask-composite

借助 CSS-Doodle 随机生成图案

了解了基本原理之后，上 CSS-Doodle，我们利用多重 mask 和 -webkit-mask-composite，便可以创造出各式各样的美妙背景图案：

是不是很类似万花筒？

借助了 CSS-Doodle，我们只设定大致的规则，辅以随机的参数，随机的大小。接着就是一幅幅美妙的背景图应运而生。

下面是运用上述规则的尝试的一些图案：

CodePen Demo -- CSS Doodle - CSS MASK Background

当然，可以尝试变换外形，譬如让它长得像个手机壳。

下面两个 DEMO 也是综合运用了上述的一些技巧的示例，仿佛一个个手机壳的图案。

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 已经越来越强大，它不仅仅可以用于写业务，也可以创造很多有美感的事物，只要我们愿意去多加尝试，便可以创造出美妙的图案。

本文转载自：https://www.cnblogs.com/coco1s/p/14376348.html

作者：ChokCoco

更多编程相关知识，请访问：编程视频！！

以上がCSS バックグラウンドの強力な使用法を例を通して学びます (収集価値あり)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。