アバターと国旗の統合を実現する1行のCSSコード

今日は建国記念日で、誰もが祖国の誕生日をお祝いしようとしています。

毎年この時期になると、WeChat Momentsで自分のプロフィール写真を国旗で飾るのが流行りますが、今年のトレンドは次のとおりです。

うーん、とても良いですね。

では、CSS を使用して旗の画像とアバターを簡単に組み合わせ、目的のアバターをすばやく作成するにはどうすればよいでしょうか。

いずれかの画像の透明度を変更することだと考える人もいますが、そうではありません。合成されたアバターをよく見ると、基本的に左端には赤い旗しか見えず、元のアバターの内容は見えません。一方、右端には基本的にアバターしか見えず、赤い旗の赤い背景は見えなくなります。

CSSのマスクを使用して、1行のコードでアバターと国旗を結合します。

CSS では、2 つの画像を重ねて、上の画像にマスク属性を使用するだけです。この効果は、たった 1 行のコードで実現できます。

div {
    位置: 相対的;
    マージン: 自動;
    幅: 200ピクセル;
    高さ: 200px;
    // 通常のアバター背景: url(image1) no-repeat;
    背景サイズ: カバー;
}
.div::after {
    コンテンツ： "";
    位置: 絶対;
    上: 0;
    左: 0;
    下部: 0;
    右: 0;
    // フラグ画像の背景: url(image2) no-repeat;
    背景サイズ: カバー;
    マスク: linear-gradient(110deg, #000 10%, 透明 70%, 透明);
}

上記のコードでは、 divとその疑似要素div::after使用して、アバターと国旗を重ねています。

div::afterマスク レイヤーmask: linear-gradient(110deg, #000 10%, transparent 70%, transparent)を設定するだけで、アバターと国旗の巧妙な重なりを実現できます。

マスクの簡単な紹介

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

マスクを使用する最も基本的な方法は、次のように画像を使用することです。

{
    /* 画像の値 */
    mask: url(mask.png); /* ビットマップをマスクとして使用します*/
    mask: url(masks.svg#star); /* SVG グラフィック内の図形をマスクとして使用します*/
}

もちろん、画像を使用する方法は実際にはもっと複雑です。まず対応する画像素材を準備する必要があるからです。画像に加えて、マスクは背景に似たパラメータ、つまりグラデーションも受け入れることができます。

次のような使用法になります。

{
    mask: linear-gradient(#000, transparent) /* グラデーションをマスクとして使用*/
}

次の画像は透明から黒へのグラデーションが重ねられています。

{
    背景: url(image.png) ;
    マスク: linear-gradient(90度、透明、#fff);
} 

マスクを適用すると、次のようになります。

このデモでは、マスクの基本的な使用方法を簡単に理解することができます。

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

上記のグラデーションではlinear-gradient(90deg, transparent, #fff)が使用されていることに注意してください。ここでの#fff単色部分は、効果に影響を与えずに任意の色に置き換えることができます。

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

マスクの使用に関するその他のヒント

もちろん、マスクをマスターすれば、さまざまな方法で遊ぶことができます。

たとえば、上記の旗のアバターでは、 CSS @propertyを使用して興味深いホバー効果を実現できます。

または、マスクを使用して興味深いトランジション効果を実現します。

弾丸スクリーンのウェブサイトで弾丸スクリーンをブロックする文字もすべて CSS マスクを使用して実現されています。

CSS MASK について詳しく知りたい場合は、次の 2 つの記事を注意深く読んでください。

魔法の CSS マスク

マスクを使用してビデオの弾丸画面の文字マスクフィルタリングを実装する

1行のCSSコードを使用してアバターと国旗を統合する方法についての記事はこれで終わりです。アバターと国旗のCSS統合に関するより関連性の高いコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMを応援してください。