絶妙な二重枠線をCSSだけで実現する方法…

SPONSORED LINK

Pocket

これは目から鱗。今度使わねば。

なんらかのボックスを表示するとき、二重枠線になっていると綺麗ですよね。立体感も出ますし。

↑ こういうやつ。

これって以前はボックスを二重に配置して実現していたりしましたが、:beforeと:afterを使えばうまいことできるらしいですよ。盲点でしたね、確かに。

↑ 動画でもご紹介。

:before、:afterが使えるブラウザに限られるのがあれですが(最近は対応しているし特に問題ないかなー)、便利そうなので積極的に採用を検討したいところですね。

マークアップの詳細&説明は以下からどうぞ。

» Quick Tip: Multiple Borders with Simple CSS | Nettuts+

ツイッターもやっています!

SPONSORED LINK

  1. No comments yet.

  1. No trackbacks yet.