線をカスタマイズしてみました。: iPhoneだけでノマドワーク

2017年02月03日

線をカスタマイズしてみました。

線をカスタマイズ

HTMLでブラウザ上で境界線を引くタグは <hr> ですよね。この境界線に飽きてきたら、CSSで装飾してみるのも楽しいと思います。

基本 <hr style="border: 太さ形状色 ;">

赤い線（太さ1px） <hr style="border:1px solid red">

赤い点線（太さ3px） <hr style="border:3px dotted red;">

青い破線（太さ2px） <hr style="border:2px dashed blue;">

緑の２重線（太さ3px） <hr style="border:3px double green;">

赤い凸線(5px) <hr style="border:5px outset #f00;">

青い凹線(5px) <hr style="border:5px inset #00f;">

グラデーション境界線１(太さ5px) <hr style="display:block; width:100%; height:5px; border:0; border:1px solid #0f0; -webkit-border-radius:5px; background:#0f0; background:-moz-linear-gradient(left,#0f0 0%,#0ff 25%,#fff 50%,#ff0 75%,#f00 100%); background: -webkit-gradient(linear,left top,right top,color-stop(0%,#0f0),color-stop(25%,#0ff),color-stop(50%,#fff),color-stop(75%,#ff0),color-stop(100%,#f00)); background:-webkit-linear-gradient(left,#0f0 0%,#0ff 25%,#fff 50%,#ff0 75%,#f00 100%); background: linear-gradient(to right, #0f0 0%,#0ff 25%,#fff 50%,#ff0 75%,#f00 100%);">

グラデーション境界線2(太さ5px) <hr style="display:block; width:100%; height:5px; border:0; border:1px solid #00f; -webkit-border-radius:5px; background:#00f; background:-moz-linear-gradient(left,#00f 0%,#f00 25%,#fff 50%,#f00 75%,#00f 100%); background: -webkit-gradient(linear,left top,right top,color-stop(0%,#00f),color-stop(25%,#f00),color-stop(50%,#fff),color-stop(75%,#f00),color-stop(100%,#00f)); background:-webkit-linear-gradient(left,#00f 0%,#f00 25%,#fff 50%,#f00 75%,#00f 100%); background: linear-gradient(to right, #00f 0%,#f00 25%,#fff 50%,#f00 75%,#00f 100%);">

自分で覚えきれないので、コピーして使える様にしちゃいました。幅,線種,色を変えてオリジナルラインでブログを飾ってみてはいかがでしょうかね？サンプルでは濃い色を使いましたが、薄めの色にすればさりげなく境界線が引けると思います。(グラデーションは、ブラウザによっては反映されないかもしれませんσ^_^;

タグ：線 HR カスタマイズタグコードサンプル飾るグラデーション

【このカテゴリーの最新記事】

posted by j.sakamoto at 20:07| Comment(0) | TrackBack(0) | デザイン

この記事へのコメント

コメントを書く

この記事へのトラックバックURL
https://fanblogs.jp/tb/5893825
※ブログオーナーが承認したトラックバックのみ表示されます。

※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック

宜しければ応援ポチお願い致します！

アンケートに御協力をお願い致します
m(_ _)m

広告

2017年02月03日