クーポンスキルのCSS実装

その他 2021-03-31 01:40:47 訪問数: null

実際のWeb開発プロセスでは、常にさまざまなレイアウトに遭遇します。社内の同僚から、このようなレイアウトを実装する良い方法はないかと尋ねられました。これは、イベントのリチャージページで非常に一般的なクーポン効果です。次のようになります。

画像

これがあります

画像

考えられるさまざまなシナリオを考慮して、次のケースを抽象化し、実装を一緒に見てみましょう。

画像

1.達成するための最良の方法

まず第一に、このタイプのレイアウトの最良の実装は間違いなくマスクです。マスクについては、CSS3 MaskAmwayレポートをご覧ください。ここに簡単な紹介があります

基本的な文法は非常にシンプルで、基本的に背景の文法と一致しています

.content{
  -webkit-mask: '遮罩图片' ;
}
/*完整语法*/
.content{
  -webkit-mask: '遮罩图片' [position] / [size] ;
}
复制代码

マスク画像と背景の使い方は基本的に同じです。PNG画像、SVG画像、グラデーション描画画像のいずれでもかまいません。また、マルチ画像オーバーレイもサポートしています。

マスクの原理は非常に単純で、最終的な効果は不透明な部分のみを示し、透明な部分は表示されません。半透明のアナロジー

画像

実際、マスキング条件として透明度（アルファ）を​​使用することに加えて、明るさ（輝度）によっても決定できます。たとえば、白は非表示、黒は表示を意味します。しかし現在、Firefoxのみがサポートしています

したがって、上記の形状を描くことができれば、それを実現することができます。

2つの凹型フィレット

ほとんどのクーポンには、凹型の丸い角という明らかな特徴があります。丸みを帯びた角になると、放射状グラデーションを考えるのは簡単です。この文法は少し複雑です。覚えていなくても構いません。張先生によるこの10のデモ例を見て、CSS3の放射状グラデーションの放射状グラデーションを学ぶことができます。

.content{
  -webkit-mask: radial-gradient(circle at left center, transparent 20px, red 20px); 
}
复制代码

画像

これにより、半径20pxの透明な円が描画されますが、コードレベルで最適化する余地はまだたくさんあります。

  1. 境界が明確なグラデーションを実装する場合、背面の色の位置は、0などの前面の色の位置以下である必要があります。
  2. 透明な色は、代わりに**＃0000などの16進数の略語にすることができます。不透明な部分は、赤**を使用するのが好きです。主に短い単語です。
  3. グラデーションの位置はデフォルトで中央に配置されているため、2番目の中央を削除でき、左側は0で表すことができます。

さらに単純化して取得

.content{
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0); 
}
复制代码

はい、Bのトラフィックは大幅に少なくなっています〜オンラインのサンプルcodepenクーポンを確認して1を達成できます

3.クーポン効果

上記は最も基本的な凹型の丸い角の効果です。次に、2つの半円など、次のレイアウトを実装しましょう。上記の例に従って、別の円をコピーできますか？位置決めの方向を変える

.content{
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0); 
}
复制代码

画像

このとき、どのサークルも消えていないことがわかりました。理由は実は非常に単純です。次のデモンストレーションでは、2層の背景を重ね合わせて背景全体を不透明にしているため、マスク効果が完全に表示されているように見えます。

画像

2つの解決策があります。すなわち：

  1. 2つの凹状の角をずらします。ここでは、サイズと位置を変更できます。同時に、タイリングを禁止する必要があります。
.content{
-webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0);
-webkit-mask-size: 51%; /*避免出现缝隙*/
-webkit-mask-position: 0, 100%; /*一个居左一个居右*/
-webkit-mask-repeat: no-repeat;
}
复制代码

画像

ダイナミックデモンストレーションは以下の通りですので、お互いをカバーしません

画像

あなたはオンラインのサンプルcodepenクーポン実装を見ることができます2

  1. マスクを使用してマスクコンポジットを合成します。これはなじみがないかもしれません。簡単に紹介しましょう。

標準属性の下でのマスクコンポジットには4つの属性値があります（Firefoxがサポート）

/* Keyword values */
mask-composite: add; /* 叠加（默认） */
mask-composite: subtract; /* 减去，排除掉上层的区域 */
mask-composite: intersect; /* 相交，只显示重合的地方 */
mask-composite: exclude; /* 排除，只显示不重合的地方 */
复制代码

これは少し理解しにくいかもしれません。実際、フォトショップなどの一部のグラフィックソフトウェアの形状合成操作を参照できます。

画像

-webkit-mask-compositeは標準値とは異なり、多くの属性値があります。以下を参照してください。

-webkit-mask-composite: clear; /*清除，不显示任何遮罩*/
-webkit-mask-composite: copy; /*只显示上方遮罩，不显示下方遮罩*/
-webkit-mask-composite: source-over; 
-webkit-mask-composite: source-in; /*只显示重合的地方*/
-webkit-mask-composite: source-out; /*只显示上方遮罩，重合的地方不显示*/
-webkit-mask-composite: source-atop;
-webkit-mask-composite: destination-over;
-webkit-mask-composite: destination-in; /*只显示重合的地方*/
-webkit-mask-composite: destination-out;/*只显示下方遮罩，重合的地方不显示*/
-webkit-mask-composite: destination-atop;
-webkit-mask-composite: xor; /*只显示不重合的地方*/
复制代码

それは唖然としましたか？慌てる必要はありません。上記の値の一部はsource- *であり、一部は** destination-***で始まります。sourceは上に描画されたレイヤーである新しいコンテンツを表し、destinationはメタコンテンツ。これは下に描画されるレイヤーです（CSSでは、前のレイヤーが後ろのレイヤーをカバーします）。ここの属性値は実際にはCanvasの概念から借用されています。詳細については、CanvasRenderingContext2D.globalCompositeを確認してください。

画像

覚えていなくても、実際の開発は1つずつテストできます[\ coverface]。特定の違いについては、codepen-webkit-mask-composite属性値のデモンストレーションを確認できます

画像

この属性を理解した後、上記のオーバーレイの問題は非常に単純で、重複する場所のみを表示するように設定されています。

.content{
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0); 
  -webkit-mask-composite: source-in | destination-in ; /*chrome*/
  mask-composite: intersect; /*Firefox*/
}
复制代码

画像

ダイナミックデモンストレーションは以下のとおりですので、重なり合うところだけが表示されます。

画像

あなたはオンラインのサンプルcodepenクーポン実装を見ることができます3

2つの丸い角が実現され、4つは簡単で、4つの円を描くだけで、マスク合成を使用して簡単に実現することもできます

content{
  -webkit-mask: radial-gradient(circle at 0 0, #0000 20px, red 0), radial-gradient(circle at right 0, #0000 20px, red 0), radial-gradient(circle at 0 100%, #0000 20px, red 0), radial-gradient(circle at right 100%, #0000 20px, red 0); /*4个角落各放一个圆*/
  -webkit-mask-composite: source-in | destination-in ; /*chrome*/
  mask-composite: intersect; /*Firefox*/
}
复制代码

画像

あなたはオンラインのサンプルcodepenクーポン実装を見ることができます4

4.クーポンタイル効果

上記の例は、2つの丸い角と4つの丸い角の効果を示しています。それぞれ2つと4つの円が描かれています。実際、これはタイリングによって実現でき、必要な円は1つだけです。実装手順は次のとおりです

  1. 左側に透明な円を描きます
.content{
  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0); 
}
复制代码

画像

  1. 半分を左にパンします
.content{
  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0); 
  -webkit-mask-position: -20px
}
/*也可以缩写为*/
.content{
  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0) -20px; 
}
复制代码

画像

効果は出ていますね、すごいですね。実際、デフォルトのリピート機能が使用されていますが、これは動画で理解できます。

下の赤い枠は、最終的な効果であるビューポートのスコープを示しています。デモンストレーションの目的で、視線の外側のタイルは半透明であり、動きは位置変更のプロセスを示しています。

画像

あなたはオンラインのサンプルcodepenクーポン実装を見ることができます5

同じ原理で、4つの丸い角もこの方法で実現できます

.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0); 
  -webkit-mask-position: -20px -20px;
}
/*也可以缩写为*/
.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px; 
}
复制代码

画像

実現原理は次のように示されます

画像

あなたはオンラインのサンプルcodepenクーポン実装を見ることができます6

6つの丸い角はタイルサイズを変更する必要があります。

.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0); 
  -webkit-mask-position: -20px -20px;
  -webkit-mask-size: 50%;
}
/*也可以缩写为*/
.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%; 
}
复制代码

画像

実現原理は次のように示されます

画像

あなたはオンラインのサンプルcodepenクーポン実装を見ることができます7

背景画像のサイズを縮小し続けると、最終的な効果を得ることができます

.content{
  -webkit-mask: radial-gradient(circle at 10px, #0000 10px, red 0); 
  -webkit-mask-position: -10px;
  -webkit-mask-size: 100% 30px;
}
/*也可以缩写为*/
.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -10px / 100% 30px; 
}
复制代码

画像

実現原理は次のように示されますが、実際にはタイル状になっています

画像

あなたは8を達成するためにオンラインのサンプルcodepenクーポンを見ることができます

V.逆中空オーバーレイ

グラデーションの単層では、非常に複雑なグラフィックを描画できない場合があります。これには、逆中空技術を使用する必要があります。実際には、上記のマスク合成です。ここで使用しましょう。

  1. 上記の実装を最初に実行します
.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%; 
}
复制代码

画像

  1. これに基づいて直接小さな穴を一列に並べます
.content{
  -webkit-mask: radial-gradient( circle at 50%, red 5px, #0000 0) 50% 50% / 100% 20px, radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;
  -webkit-mask-composite: destination-out;
  mask-composite: subtract; /*Firefox*/
}
复制代码

画像

ここでは**-webkit-mask-composite：destination-out **が使用されていることに注意してください。これは、減算することを意味し、下のマスクのみが表示され、重複する領域は表示されません。

画像

あなたは9を達成するためにオンラインのサンプルcodepenクーポンを見ることができます

両側に配置することもでき、位置を変えるだけです。

.content{
  -webkit-mask: radial-gradient( circle at 5px, red 5px, #0000 0) -5px 50% / 100% 20px, radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;
  -webkit-mask-composite: destination-out;
  mask-composite: subtract; /*Firefox*/
}
复制代码

画像

あなたは10を達成するためにオンラインのサンプルcodepenクーポンを見ることができます

6、ボーダーマスク

放射状のグラデーションは複雑すぎて書くことができないと感じる生徒もいますが、写真に置き換えることはできますか？実際、それは実行可能です。ここで言及されている境界マスクは、まだW3Cドラフトにあるmask-borderを参照していますが、代替属性-webkit-mask-box-imageがあります。

画像

文法と概念はborder-imageと非常によく似ています。border-imageについては、border-imageの正しい使用法についてこの記事を参照してください。ここでは、主に使用法と効果について説明します。

.content{
  -webkit-mask-box-image: '遮罩图片' [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]
}
复制代码

たとえば、このような写真があります

画像

SVGコードは非常に長く、多くのツールをエクスポートできます。設計クラスメートに直接連絡することは実際には不可能です。

<svg xmlns="http://www.w3.org/2000/svg" width="60.031" height="60.031" viewBox="0 0 60.031 60.031"><path d="M40 60.027H20.129A20.065 20.065 0 0 0 .065 40H0V20.127h.065A20.066 20.066 0 0 0 20.131.061v-.065H40v.065a20.065 20.065 0 0 0 20.027 20.064V40A20.063 20.063 0 0 0 40 60.027z" fill-rule="evenodd"/></svg>
复制代码

ここではエスケープする必要があります。TeacherZhangのSVGオンラインマージツールを使用できます

.content{
  -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60.031' height='60.031' viewBox='0 0 60.031 60.031'%3E%3Cpath d='M40 60.027H20.129A20.065 20.065 0 0 0 .065 40H0V20.127h.065A20.066 20.066 0 0 0 20.131.061v-.065H40v.065a20.065 20.065 0 0 0 20.027 20.064V40A20.063 20.063 0 0 0 40 60.027z' fill-rule='evenodd'/%3E%3C/svg%3E") 20;
  /*这里的20表示四周保留20像素的固定区域，剩余部分平铺或者拉伸*/
}
复制代码

そして、そのような形を実現し、それも適応性があります

画像

オンラインのサンプルcodepen-webkit-mask-box-iamge実装を表示できます1

たとえば、このような写真があります

画像

.content{
  -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60.031' height='60.031' viewBox='0 0 60.031 60.031'%3E%3Cpath d='M55.186 30.158a4.965 4.965 0 0 0 4.841 4.959V40A20.063 20.063 0 0 0 40 60.027H20.129A20.065 20.065 0 0 0 .065 40H0v-4.888c.054 0 .1.016.158.016a4.973 4.973 0 1 0 0-9.945c-.054 0-.1.014-.158.015v-5.074h.065A20.066 20.066 0 0 0 20.131.058v-.065H40v.065a20.065 20.065 0 0 0 20.027 20.064v5.07a4.965 4.965 0 0 0-4.841 4.966z' fill-rule='evenodd'/%3E%3C/svg%3E") 20;
}
复制代码

あなたはそのような形を得ることができます、両側の半円は引き伸ばされます

画像

現時点では、タイリング方法を設定するだけで済みます**-webkit-mask-box-image-repeat、**これはborder-image-repeatと同じ概念であり、次の4つの値があります。

-webkit-mask-box-image-repeat: stretch; /*拉伸(默认)，不会平铺*/
-webkit-mask-box-image-repeat: repeat; /*重复*/
-webkit-mask-box-image-repeat: round; /*重复，当不能整数次平铺时，根据情况拉伸。*/
-webkit-mask-box-image-repeat: space; /*重复，当不能整数次平铺时，会用空白间隙填充*/
复制代码

いくつかのタイリング方法の違いは次のとおりです

画像

ここでは、ラウンドまたはリピートを使用できます

.content{
  -webkit-mask-box-image: url("...") 20;
  -webkit-mask-box-image-repeat: round;
}
复制代码

画像

オンラインのサンプルcodepen-webkit-mask-box-iamge実装2を表示できます

セブン、まとめと説明

上記では、これらのレイアウトの問題のほとんどを解決するはずのクーポンを描画する合計12のケースを紹介します。以下のポイントがあります。

  1. CSSマスクは、このタイプのレイアウトを実装するための完璧な方法である必要があります
  2. 必要性のCSSは、放射状の勾配描画スキル
  3. 同じ要素を繰り返すには、できるだけ繰り返しを使用します
  4. 複数の形状を重ね合わせる場合は、マスクコンポジットを柔軟に使用する必要があります
  5. CSSグラデーションの代わりに画像を使用することもできます。マスクボーダーを使用する必要があります

互換性に関しては、実際、IEに関係なく大きな問題はありません。最終的なマスクボーダーは現在、クロムカーネルとのみ互換性があり、モバイル端末は自信を持って使用できます。

読んでいただきありがとうございます、そして将来の仕事のために啓発されることを願っています。


著者：フロントエンドチームはテキスト
リンクを読みました：https：//juejin.cn/post/6945023989555134494
 

おすすめ

転載: blog.csdn.net/daocaokafei/article/details/115336372
おすすめ
ランキング
パイソンのPythonの設計哲学--zen
VUE - 1を学習の開発ブログ
エントリートラバース地図要素
コードをHuaweiCloudgitリポジトリに同期する
Mavenは地元の倉庫とアリクラウド遠隔倉庫を設定しました
Linux は、ファイルとサブディレクトリの内容をすべてのユーザーが読み取り、書き込み、実行できるように変更します。
サンプルを作成するためのK8S展開＆サービス
ailoop2内部ailoop3内部の操作で、検討します。（コストは右である）海のデバッグ本当の巨人を使用した場合HearthBuddy愛2（第ヒーローのスキルが問題のトーテムを召喚使用していない、海の巨人を使用）、以下トーテムを召喚
お金が最も多くを得ました
[P1023]羅区税補助金（説明）
アーカイブ
もっと
2024-06-04(0)
2024-06-03(1)
2024-06-02(0)
2024-06-01(1)
2024-05-31(1)
2024-05-30(0)
2024-05-29(1)
2024-05-28(0)
2024-05-27(1)
2024-05-26(0)

コードワールド

© 2018 codetd.com