[CSS]borderプロパティを使用した華麗なる四つのエフェクト

実用的で簡単なスタイルシートで実装できる、borderプロパティを使用した華麗なる四つのエフェクトを紹介します。

デモのキャプチャ

Have Fun w/ Borders – Beveled, Pressed, & More!
デモページ

以下、デモのキャプチャは200%に拡大表示したものです。

Light Shadow

デモのキャプチャ

シンプルな明るいシャドウのエフェクトです。borderにライトグレーを使用しています。

CSS

Pressed

デモのキャプチャ

手紙などにあるプレスしたエフェクトです。プレスのエフェクトはborderの色で実現しており、角丸が更に美しくみせています。

CSS

Beveled

デモのキャプチャ

double borderのテクニックに非常に類似していますが、ここではoutlineを使用することで繊細なベベルのエフェクトを実現しています。

CSS

Indented Lines

デモのキャプチャ

リストを区切る際に有用なエフェクトです。li要素のtopとbottomにそれぞれ異なるカラーを指定して一本のラインにしています。

CSS

sponsors

top of page

©2018 coliss