[CSSチュートリアル】CSS たった1行のコードでアバターと国旗の一体化を実現

今日は建国記念の日、誰もが祖国の誕生日を祝おうと意気込んでいます。

毎年この時期になると、アバターに国旗を飾るのが流行っていますが、今年も流行っていますね。

emm、とても素敵です。

では、私たちのアバターで国旗の写真を撮り、目的のアバターを素早く手に入れるには、CSSを使うと簡単でしょうか？

片方の画像の透明度を変えればいいと思っている人がいますが、そうではありません。合成されたアバターをよく見ると、左端は基本的に赤い旗だけが見えて、元のアバターの中身は見えませんし、右端は基本的にアバターだけが見えて、赤い旗の赤い背景は見えていません。

CSSでマスクを使用し、1行のコードでアバターと旗を融合させる

CSSでは、2つの画像を重ね合わせて、一番上の画像にmaskプロパティを使うだけで、1行のコードで効果を得ることができるのです。

div {
    position: relative;
    margin: auto;
    width: 200px;
    height: 200px;
    // normal header image
    background: url(image1) no-repeat;
    background-size: cover;
}
.div::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    // National flag image
    background: url(image2) no-repeat;
    background-size: cover;
    mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent);
}

上のコードでは div とその擬似要素の1つである div::after アバターと国旗のオーバーレイを実装しています。

単純にフラグを div::after マスクレイヤーで mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent) アバターと国旗の巧みな重ね合わせは、次の方法で実現できます。

マスクの簡単な紹介

CSS では、mask プロパティを使用すると、画像の特定の領域をマスクまたはトリミングすることによって、要素の可視領域の一部または全部を非表示にすることができます。

最も基本的なマスクの使い方は、画像の助けを借りて、次のようなものです。

{
    /* Image values */
    mask: url(mask.png); /* Use bitmap to make mask */
    mask: url(masks.svg#star); /* Use shapes from SVG graphics to make masks */
}

もちろん、画像のアプローチは、最初に画像を用意しなければならないので、もう少し面倒です。また、画像に加えて、マスクはグラデーションという背景のようなパラメータを受け取ります。

以下のような使い方のようなものです。

{
    mask: linear-gradient(#000, transparent) /* Use gradient for masking */
}

下のような画像に、透明から黒へのグラデーションを重ねたものです。

{
    background: url(image.png) ;
    mask: linear-gradient(90deg, transparent, #fff);
}

マスク適用後は、以下のようになります。

このDEMOでは、マスクの基本的な使い方を簡単にご紹介しています。

ここで、マスクを使う上での最も重要な結論ですが、マスクによって生成されたグラデーションの透明部分と画像の重なりは透明になります。

注目すべきは、上のグラデーションでは linear-gradient(90deg, transparent, #fff) で、ここでは #fff ソリッドカラーの部分は、実は効果を損なわずに任意の色に変更することができるのです。

CodePenデモ -- MASKの基本的な使い方

その他、マスクの使い方のコツ

もちろん、Maskを使いこなせば、いろいろなことができるようになります。

例えば、上の国旗アバターでは CSS @property を使用すると、面白いホバー効果が得られます。

また、マスクを使って楽しいトランジションができます。

ポップアップサイトの文字化けポップアップも、CSSのマスクを使って実装されています：。

CSS MASKについてより深く知りたい場合は、以下の2つの記事を参照してください。

不思議なCSS MASK

マスクによる動画ポップアップ文字マスクフィルタリング

これは、アバターと旗の融合を達成するために、コードのCSS一行のこの記事の終わりです、より関連するCSSアバターと旗の融合コンテンツは、スクリプトの家の前の記事を検索してくださいまたは次の関連記事を閲覧を継続、私はあなたがスクリプトの家を応援することを願っています！...