CSSを使用してマルチカラーの境界線を作成する

CSSの境界線プロパティには、実線、破線、点線などの選択など、いくつかのカスタマイズオプションがあります。ただし、境界線の色に関しては、片側に単色しか設定できません。 しかし、あなたが考えもしなかったかもしれないいくつかのより多くのプロパティを使用してマルチカラーラインを実現する別の方法があります。見てみましょう。

個体

破線

点在

マルチカラーボーダー

上記のようなマルチカラーの境界線を実現するには、 positionプロパティと::afterセレクターをカラーグラデーションで使用します。 まず、HTML <div>クラスを使用してヘッダー領域を作成し、次にCSSでスタイルを設定して、それと以下のコンテンツを分割するマルチカラーの境界線を作成します。

HTMLを作成します。

 <div class="ost-multi-header"> <h1> Header Title </h1> </div>

<div class="ost-multi-header"> <h1> Header Title </h1> </div>

それでは、CSSで少しスタイルを設定しましょう。

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }

h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }

これで、次のようなものが表示されます。

これで、 ::afterを.ost-multi-header selectorに追加できます。 ただし、その前に、 ::afterが何をしているのか、そしてマルチカラーボーダーのpositionプロパティが必要な理由について少し説明したいと思います。 ::afterは、選択した要素の最後にあるcontentプロパティにあるものを使用して疑似要素を作成します。 この場合、その要素は.ost-multi-headerです。 昔ながらの「HelloWorld！」を作りましょう。 説明する例。

これをCSSに追加します。

 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }

.ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; } 

ご覧のとおり、「HelloWorld！」ができました。 ヘッダータイトルの下の要素。 親要素である.ost-multi-headerは、 relative位置プロパティを持っているため、子要素にabsolute位置を与えることができます。 これにより、 ::afterで作成した新しい疑似要素を親要素内の好きな場所に簡単に移動できます。 これを下部に配置し、親要素内で左から20px以上移動します。 親要素のpositionプロパティがrelativeに設定されていない場合、絶対位置の要素はブラウザのビューポートの下部と20pxの左側にあることに注意してください。

色付きの境界線はどうですか？ グラデーションを使用して、疑似要素の背景をマルチカラーの境界線にスタイル設定します。 CSSグラデーションは、線形または放射状にすることができます。 境界線には、 linear-gradientを使用します。 簡単に言えば、これは私たちが求める境界線を私たちに与えるでしょう。

 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }

.ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }

しかし、少しずつ速度を落としましょう。 まず、 contentプロパティは空白ですが、まだそこにあります。 これは、 contentプロパティがないと、疑似要素が作成されないためです。 だから、私たちはそれが必要です。 疑似要素の高さ、境界線の高さを設定する必要があります。 なぜleftとrightの両方のプロパティを0に設定するのですか？ 幅が設定されていない場合、これにより、疑似要素が親要素内で100％の幅になるように引き伸ばされます。 たくさんのように見えるかもしれませんが、 linear-gradientの設定は、色が左から「右」に流れるように指示しているだけで、背景の特定の割合で必要な色を入力します。

私たちがしているのは、特定のパーセンテージでどの色にするかを選択することだけですが、それは多くの足の仕事です。 幸いなことに、カラーグラデーションに非常に役立つ無料のオンラインリソースがあります。 ColorZillaによるUltimateCSS Gradient Generatorは、古いブラウザをサポートするための複数のグラデーションプロパティを含む優れたツールです。

ツールには既にグラデーションが設定されているため、このリンクを使用して、このチュートリアルで使用されている正確な設定を確認できます：https：//colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33 、feb123 + 66,2184cd + 66,2184cd +100。 次のようになります。

このサイトには多くの設定がありますが、境界線に使用する外観を作成するために必要な設定に焦点を当てましょう。 それを分解しましょう：

1. プリセット-これらは素晴らしい出発点になります！
2. スライダーバー-ここで色を追加、削除、編集できます
3. 停止-このセクションでは、各色の不透明度と位置の設定を変更できます。 上のスライダーのカラーボックスをクリックするだけで、このセクションで制御しているカラーボックスを変更できます。
4. プレビュー-ここでは、変更の結果をすぐに確認できます。
5. 向きとサイズ-これにより、水平、垂直、斜め、または放射状から変更できます。 そして、グラデーションのサイズを設定します。
6. CSSコード-パーマリンクを使用して生成されたコード。いつでも戻ってグラデーションを簡単に編集できます。

この場合、色あせたグラデーションを探していたのではなく、2つの色の間の安定したフラットな遷移を探していたので、これを実現したい場所で2つの色を積み重ねるだけです。 この例では、色をそれぞれ33％と66％で積み重ねました。

プレビューに表示されるものがコードによって生成されるものであることを知って、設定を自由に試してみてください。 見た目を思い通りに設定したら、コードボックスの右下にある「コピー」ボタンを使用できます。

リンクにあるようにコードをコピーした場合、最終的なCSSは次のようになります。

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }

h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }

そして、そのCSSは、完全にレスポンシブなこのマルチカラーの下線を生成します。

どうぞ！ .ost-multi-headerの下部に6pxのパディングを追加する必要はありませんでしたが、 absolute位置の子は親要素の高さに影響しなくなりました。 親要素のコンテンツの上にフロートさせるか、 paddingを追加して、邪魔されたくないコンテンツをカバーしないようにすることができます。

これは、CodePenで再現されたこの演習へのリンクであり、誰もが心配することなく編集および学習できます。

最後に、一部の古いブラウザは、単一のコロン:afterセレクターのみをサポートし、最新の標準のdouble ::afterはサポートしていません。 安全を確保したい場合は、単一のコロンを使用できます。 今のところ、最新のブラウザでも動作します。