スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--/--/--(--) /  スポンサー広告

水平線をつかったちょっとしたデザイン

今日はちょっとスタイルシートをつかったちょっとしたデザインを
いじってみようかなと思います。

使うタグは<HR> 水平線を引くタグですね。


普通はこうなります。

ちょっとかざってみましょう。

<HR style="box-shadow: 0 10px 10px -10px #bbb inset; height: 15px;border: 0;">

ちょっとおしゃれになりますね。

スタイルシートでまとめておくと一括で指定できて便利です。

hr {
height: 15px;
border: 0;
box-shadow: 0 10px 10px -10px #bbb inset;
}


box-shadowはボックスに影をつけるタグになります。
水平移動距離、垂直移動距離、ぼかし距離、広がり、基本色、
insetをつけると影の方向を内側か外側か。
といった感じになります。

本来ボックスにつけるものなので、水平線につけるには、見本を
そのままコピペしとくとよいでしょうね。

2015/02/15(日) /  CSS TB(0) CM(0)















管理者にだけ表示を許可する


- Page Top -

検索フォーム

カテゴリ

月別アーカイブ

モバイルはこちら

QR

こちらもどうぞ

SEO
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。