どうも!LSSです!!
CSS小ネタとして、区切り線を作ってみました。
赤と青の区切り線
コード
<style>
.yokosen{
height:30px;
background:
linear-gradient(30deg,#eeaaaa00 38%,#eeaaaaff 42%,#eeaaaa00 46%,#eeaaaaff 50%,#eeaaaa00 54%,#eeaaaaff 58%,#eeaaaa00 62%) 0 0/30px 30px
,linear-gradient(-30deg,#aaaaee00 38%,#aaaaeeff 42%,#aaaaee00 46%,#aaaaeeff 50%,#aaaaee00 54%,#aaaaeeff 58%,#aaaaee00 62%) 0 0/30px 30px
;}
</style>
<div class="yokosen"> </div>
↑のコードをコピペする事で使用できます。
また、同じページ内で複数、この区切り線を配置する場合は、一番下の行
<div class="yokosen"> </div>
だけを配置したい位置に貼り付ける事で使用できます(<style>~</style>は一つだけ置いておけばOK^^)
区切り線代わりに使用できますね
ちょっと話題を変えたい時などに、区切り線を入れておくと分かりやすくなりそうです^^
単純に<hr/>タグを入れておく事で、
↑こういう区切り線が入りますが、
もうちょっと凝った感じにしたい時などにいいかも?
※ちなみに<hr/>を使うのは↓こんなコードになります。
<p>単純に<strong><hr/></strong>タグを入れておく事で、</p>
<hr />
<p>↑こういう区切り線が入りますが、</p>
赤と青の線ですが、本当は…
線が途中で赤→青に変わっていますが、本当は「赤三本線と青三本線が交差してる感じ」のものを作ってみたかった…のが、繰り返しを考慮するとだいぶ難しそう^^;;;
gradient系の無制限繰り返しは、自分はだいぶ慣れてきた感じもあるのですが、radial-gradientやconic-gradientに比べ、linear-gradientはかなり手ごわい印象がありますw
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^