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) :

#背景の詳細​​

# ＃＃確かに。基本的なグラデーションをマスターしたので、より複雑な背景パターンに進むことができます。私がグラデーションを使用してさまざまな背景パターンを実現することについて初めて知ったのは、「CSS Secret」という本でした。その後、絶え間ない探求と実験が行われ、いくつかの経験が要約されました。

グラデーションを使用してより複雑な背景を作成する前に、いくつかの重要なヒントを紹介します:

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

次へ、組み合わせの旅を始めます。

mix-blend-mode を使用します

mix-blend-mode、混合モード。 Photoshop で最もよく見られるこの機能は、PS の最も強力な機能の 1 つです。 CSS では、ブレンド モードを使用して複数のレイヤーをブレンドし、新しい効果を得ることができます。

混合モードの基本的な使用法については、私の記事を参照してください:

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

次に、最初のパターンを試して簡単に体験してみましょう

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

repeat-linear-gradient

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

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

OK、これに基づいて、

mix-blend-mode:multiply

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

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

CodePen デモ - 繰り返し線形グラデーション背景とミックスブレンドモード

別の mix-blend-mode

では、なぜ mix-blend-mode:multiply が上記で使用されているのでしょうか?他のブレンドモードを使用することはできますか? ＃＃＃＃＃＃もちろん。これは単なる例ですが、

mix-blend-mode:multiply

は PS の multiply を意味し、レイヤー ブレンド モードの暗化モード グループの 1 つに属します。 上記のデモを使用し、さまざまな効果を得るために他のブレンド モードを試します。

#異なるブレンド モードを重ね合わせると、非常に異なる効果が得られることがわかります。もちろん、さまざまなブレンド モードを使用することで、さまざまな効果を持つパターンを作成できます。

CodePen デモ - 繰り返し線形グラデーションの背景とミックスブレンドモード

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

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

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

repeat-linear-gradient

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

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

CodePen デモ -- CSS Doodle - CSS MIX-BLEND-MODE 背景

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

もちろん、上記は

Linear gradient

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

画像に

background-size

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

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

mix-blend-mode: darken

:

CodePen デモ -- 放射状グラデーション & ミックス ブレンド モード デモ

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

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

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

CodePen デモ -- CSS Doodle - CSS MIX- BLEND-MODE 背景 2

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

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

mix-blend-mode

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

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

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

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

gradienta.io

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

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

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

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

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

上記のアニメーション GIF のおかげで圧縮率が非常に高いため、ギザギザが目立ち、画像がぼやけていますが、上のリンクをクリックしてご覧ください。

次に、重ね合わせた画像に別の

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

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

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

こんにちは。そうですね、ここで引き続き CSS-Doodle を削除できます。

ランダムなグラデーション、ランダムなブレンドモードを重ね合わせて、クールにいきましょう。

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

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

CodePen デモ -- CSS Doodle Mix Gradient

---

粘り強くご覧いただきありがとうございます。上記前半は

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

---

マスクを使用する

ブレンディング モードを削除するには、背景に関連する非常に興味深い属性 (

MASK) があります。

mask はマスクと訳されます。 CSS では、マスク属性を使用すると、特定の領域の画像をマスクまたはトリミングすることで、要素の表示領域の一部またはすべてを非表示にすることができます。

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

マスクを使用してパターンをカットします

たとえば。

repeat-linear-gradient

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 デモ -- マスクと背景のデモ

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

#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 サイトの他の関連記事を参照してください。