CSS3 線形グラデーション (linear-gradient) を使用してテキスト波線効果を実現する_html/css_WEB-ITnose

紙の本を読むとき、視覚体験を向上させるために、重要な内容を強調するために波線を使用することがよくあります。

CSS3 以前の Web ページでは、同様の機能を実現するには背景画像しか使用できませんでしたが、これはもちろん効率的な方法ではなく、保守や調整が困難でした。

たとえば、色、線のサイズ、傾きの角度を調整したいだけの場合、お絵かきソフトを開いていじる必要があります。

これで、CSS3 擬似要素とその背景のグラデーションを使用して、この興味深く実用的な効果を実現できるようになりました。

波線の特徴

波線を観察すると、次の 2 つの基本的な幾何学的特徴があります:

1. 波線は繰り返され、いくつかの接続された「角度」形状に分解できます

2. " "接続点はバリなしでスムーズに移行するため、頂点を滑らかにする必要があります

(1) については、まず鋭い角の形状 (2 つの短い直線、1 つのストロークと 1 つのストロークで構成) を作成できます。 ) 構成)、x 方向の繰り返しを使用して繰り返します。

(2) では、人の手で線を描く際に角の力が弱くなる様子をグラデーションカラーを使用して、鋭い角の交差点に比較的明るい色を使用して、角の丸みを視覚的に表現します。

CSS3 線形グラデーション

デフォルトのグラデーション軸 (上から下への垂直線) を見ると、それぞれの「コーナー」が 2 つの側面を持っていることに気付きました。右は315°の傾きです。

それでは、45°の傾斜線を作成するにはどうすればよいでしょうか?回転変換を使用することは簡単に考えられますが、回転は要素全体に作用するため、ここでは適用されません。

CSS3 の線形グラデーション (linear-gradient) は、上記の要件を満たすことができます。線形グラデーションの核となるのは、グラデーションの軸、始点と終点、およびカラー値の分布です。

勾配軸の角度を 45° に設定することで、傾き特性を取得し、勾配幅を線のサイズに狭めることができます。具体的なコードは次のとおりです。

div {  background: linear-gradient(45deg, transparent, transparent 45%, red, transparent 55%, transparent 100%);   background-size: 20px 20px;  background-repeat: no-repeat;}

1 つ目。上記の線形グラデーション法では、1 つのパラメーターはグラデーション軸の角度です。グラデーションはグラデーション軸に沿って展開されます。つまり、グラデーション ラインの角度は 45 度です。

次のパラメーターは、0 ～ 45% の長さが透明、45% ～ 55% が赤のグラデーション、55% ～ 100% が透明であることを示します。

つまり、要素の背景の長さの 10% のみがグラデーション カラーで表示されます (そして両側で対称です)。コードの 2 行目は背景の幅を 20 ピクセルに設定しているため、グラデーション ラインの実際の幅は 10 ピクセルです。 *10%=2px。

このようにして、45°の傾きとグラデーションを持つ短いポリラインが得られます。

同様に、短い 315° グラデーション ポリラインを取得できます。

div {  background: -webkit-linear-gradient(315deg, transparent, transparent 45%, red, transparent 55%, transparent 100%),-webkit-linear-gradient(45deg, transparent, transparent 45%, red, transparent 55%, transparent 100%);   background-size: 20px 20px;  background-repeat: no-repeat;}

しかし、今度は 2 本の交差する線分が得られ、「X」形状を形成しますが、これは私たちが望むものではありません。

簡単なトリックは、要素の高さを 1/2 に設定することで、「V」字型になります。

次に、background-repeatをrepeat-xに設定し、波線の形状を取得します。

CSS3 :before 疑似要素

最後のステップが残っています。テキストの下に波線の形状を追加する必要があります。上の div 要素をテキストに対応する :before 疑似要素に変更するだけです。

異なるグラデーションカラーを設定して、異なるテキストをマークすることもできます。

オンラインで自分で試すことができます: http://wow.techbrood.com/fiddle/5868

by iefreer