点線を使った下線を引いてノートのようにデザインするCSS

By admin // デザイン // コメントは受け付けていません。

本来、リファレンスよりこういったものの方が読んでいて楽しいと思うし書くほうも書き甲斐がある。
さて、CSSだけでもきれいなデザインはできます。
今回は下線を点線にしてノートのような感じにデザインするためのCSSを紹介します。
全く難しいものではなく、CSSのborderというプロパティを使うだけの簡単な方法です。

11月
12

画像無しでCSSだけで簡単に切り取り線のような罫線が作れる

By admin // デザイン // コメントは受け付けていません。

コンテンツ同士を区切るのによく使われる罫線。
格好良くするために、点線の罫線を使いたいときもあります。
画像を使わずに簡単に切り取り線のような点線ラインを引く方法。
CSSだけで簡単に作れます。
通常の罫線よりかっこいいですよ。
画像を使わないでスタイリッシュな点線を使った罫線を描く方法。

10月
13

簡単なので覚えておきたい。画像を使わないでスタイリッシュな点線を使った罫線を描く方法。

By admin // ケーススタディ, デザイン // 1 Comment

コンテンツとコンテンツを区切るために使える罫線。
点線を使った罫線だとデザインの邪魔にならずに格好良くコンテンツを区切ってくれます。
普通の罫線とちがってちょっと控えめにクールに罫線を描きたい、
そんなときはCSSを使ってスタイリッシュな点線の罫線はいかがでしょう。
点線の罫線をわざわざ画像で作って使っている人も見かけますが、
そんなことをしなくても簡単に作れます。

10月
1

これは使える！マウスを画像の上に持ってくると明るくなる処理をCSSだけで実装。

By admin // ケーススタディ, デザイン, 便利 // コメントは受け付けていません。

画像の上にボタンを持ってくると画像の色が変わるようなページがあります。
マウスがフォーカスしている画像が明るくなると、今どこを選んでいるのかがわかりやすくなってユーザーにとても親切です。
デザイン的にもマウスにあわせて画像が明るくなるとかっこいいですね。
そんなマウスオーバーの処理をCSS（スタイルシート）だけで簡単にやってしまう方法を紹介します。