【CSS】border-imageとconic-gradient【実験】
どうも！LSSです！！
ちょっとまた、border-imageを試してみました。
border-style:outset;で盛り上がったような枠線になりますが、それよりもborder-colorを四辺別々に設定した方が角が四つとも切れ目が生じてかっこいい！
…のを更に、conic-gradientを用いると四辺の中で更にグラデーション変化を入れる事ができます。
ついでに背景色をアニメーションで変化させて、様々な色に合う事を確認しています。
border-imageとconic-gradient
こんな風になります。
よく見ると４つの辺の中でも明るさがグラデーション変化していますね。
よく見ると４つの辺の中でも明るさがグラデーション変化していますね。
コード
<style>
@keyframes bgca{
0%,20%,100%{background:yellow;}
25%,45%{background:lightblue;}
50%,70%{background:pink;}
75%,95%{background:lightgreen;}
}
.bgc{
width: 250px;
height: 250px;
padding:10px;
border: 30px solid;
border-image: conic-gradient(from 315deg,
#ffffff80 0deg,#99999980 89.9deg,
#77777780 90deg,#11111180 179.9deg,
#00000080 180deg,#66666680 269.9deg,
#88888880 270deg,#eeeeee80 359.9deg
) 10%;
animation: bgca 20s linear infinite;
}
</style>
<div class="bgc">こんな風になります。<br />よく見ると４つの辺の中でも明るさがグラデーション変化していますね。</div>
outsetの場合
border:30px outset #ffff88;だと手軽に立体っぽく出来ますが…左上と右下に切れ目がないのが気になります。
コード
<div style="width: 250px; height: 250px; padding: 10px; background: yellow; border: 30px outset #ffff88;">border:30px outset #ffff88;だと手軽に立体っぽく出来ますが…左上と右下に切れ目がないのが気になります。</div>
四辺別々に色設定した場合
border-colorを四辺それぞれ、白～グレーの半透明色を指定する事で、四角に切れ目が出るように出来ます。
コード
<div style="width: 250px; height: 250px; padding: 10px; background: yellow; border: 30px solid; border-color: #ffffff80 #66666680 #44444480 #dddddd80;">border-colorを四辺それぞれ、白～グレーの半透明色を指定する事で、四角に切れ目が出るように出来ます。</div>
これは、
でも使っていました。
ただし、今回のconic-gradient版には欠点が…
四辺にグラデーションが入った事で、よりかっこよくなった…と思うのですが、実はoutset版やborder-color版では問題なかったところに支障が出ています。
…こんな風に、正方形でなくなった途端に、切れ目の位置がズレます^^;;;;;。
conic-gradient内の角度設定を、縦横の比率に合わせて調節すると対応は可能ですが…すっごく手間がかかりそうな上に、「ブラウザ表示幅によって縦横比が変化する可能性がある場合」などには対応しきれなくなってしまいます^^;。
その点では、outset版やborder-color版の方が何も考えなくても四角にぴったり合う分、優れていますね。
conic-gradientで縦横比に対応した角度指定方法があれば…（linear-gradientのto left topみたいな）。
あるいは、border-imageに「枠サイズを無視した仮想画像の縦横比指定」があれば…こっちはどうなんだろう？？
逆に言えば、border-imageが枠サイズの影響を受ける事を今回知りました^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
