photoshop- 1ピクセルラインで質感を高めるテクニック - WEBデザイン　BLOG
タケシィさんに、かなりためになる情報を教えてもらいました。
この記事を参考にして、HTMLで使っているブロック要素などに対して1pxのボーダーを入れ、質感を出してみました。
画像を使わずに実装できるので、デザイン変更などがとても楽です。

>> 青バージョン

>> 白バージョン


>> 青バージョンCSSソース
div.ns_coolbar1 {background:#36b; border:1px solid #009;} div.ns_coolbar1 span a {color:#fff;} div.ns_coolbar1 span { display:block; border-top:1px solid #39f; border-right:1px solid #25f; border-bottom:1px solid #25f; border-left:1px solid #25f; color:#fff; }
>> 青バージョンHTMLソース
<div class="ns_coolbar1"><span class="nishikori">1pxラインで質感を高めるテクニック＠XHTML+CSS 青バージョン</span></div>
>> 白バージョンCSSソース
div.ns_coolbar2 {background:#eee; border:1px solid #aaa;} div.ns_coolbar2 span a {color:#666;} div.ns_coolbar2 span { display:block; border-top:1px solid #fff; border-right:1px solid #ddd; border-bottom:1px solid #ddd; border-left:1px solid #ddd; color:#666; }
>> 白バージョンHTMLソース
<div class="ns_coolbar2"><span class="nishikori">1pxラインで質感を高めるテクニック＠XHTML+CSS 白バージョン</span></div>
こんな感じで普段画像で実装しているものを、XHTML+CSSで実装できるソースなどをたくさん公開していきたいです。
何か要望があったらコメントまで。

• タグ
• 1px
• CSS
• HTML
• 枠