【CSS】赤と青の波線【小ネタの続き】
どうも！LSSです！！
昨日の記事、
で、ページ内の区切りとして使用できるような区切り線をデザインしました。
↑こういうのですね。
これはジグザグになった３本セットの線が交差しているデザインでしたが、これが波線だったら？というのを今回挑戦してみました^^
赤と青の波線
コード
<style>
.wavehr{
height:30px;
background:
radial-gradient(20px 20px at 30px 38px,#eeaaaa00 70%,#eeaaaaff 75%,#eeaaaa00 80%,#eeaaaaff 85%,#eeaaaa00 90%,#eeaaaaff 95%,#eeaaaa00 100%) 0px 15px/60px 30px
,radial-gradient(20px 20px at 30px -8px,#eeaaaa00 70%,#eeaaaaff 75%,#eeaaaa00 80%,#eeaaaaff 85%,#eeaaaa00 90%,#eeaaaaff 95%,#eeaaaa00 100%) 30px 15px/60px 30px
,radial-gradient(20px 20px at 30px 38px,#aaaaee00 70%,#aaaaeeff 75%,#aaaaee00 80%,#aaaaeeff 85%,#aaaaee00 90%,#aaaaeeff 95%,#aaaaee00 100%) 30px 15px/60px 30px
,radial-gradient(20px 20px at 30px -8px,#aaaaee00 70%,#aaaaeeff 75%,#aaaaee00 80%,#aaaaeeff 85%,#aaaaee00 90%,#aaaaeeff 95%,#aaaaee00 100%) 0px 15px/60px 30px
;}
</style>
<div class="wavehr"> </div>
４つのradial-gradient
「background」プロパティ内に、４つのradial-gradientが並んでいます。
これは上から順に、
- 上半分の赤い円弧
- 下半分の赤い円弧
- 上半分の青い円弧
- 下半分の青い円弧
を描いていて、それらを重ねて表示する事で、
という線になっているんですね。
ジグザグ線版と波線版、どちらが良いかは…好みがわかれるかも？？
そうそう、波線といえばかなり以前に、
というものを書いていました。
この時は「本当の」と書いていましたが、波線といいながらlinear-gradient（直線グラデ）を使用しており（小さいので波線ぽく見えてはいましたが）、今回はradial-gradientによる円弧を使っています。
いわば今回のが「本当に本当の波線」？？
（今後「本当の本当に本当の…」が出てこないとは言い切れないｗ）
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
