CSSでボーダーを画像の内側につける

マウスオーバーした際に、ボーダー処理をCSSでつける作業をしていた所、
画像の内側にもボーダーをつけたいと言われてやり方を調べました。

誰かの参考なれば幸いです。

↑このような状態が理想です。

結論を言うと、画像にネガティブマージンを適用すればOKのようです。

classを指定するだけでGoogle+風のボタンを実現できるCSS。

Google+風のデザインを実現できる24種のボタンが使えますよ。

有名なWebサービスのデザインはUIも非常に凝っているので、参考にできますね。

ライセンスはCreative Commons CC-BY。IE6でも動作するようになっているとの事。

詳細&ダウンロードは下のリンクからどうぞ。

CSSスプライトでMac OS X Lion 風のアイコンを使える「Lion Buttons in CSS」

Macの新OS Lionがリリースされてから暫く立ちますが、
Lion風UIをCSSスプライトで使えるようにした方がいましたのでご紹介。

以下のようなボタンが簡単に使えるようになります。

HTMLもシンプルな構造でclassを指定するだけで使えます。

Label

Mac風のデザインにしたい際に良いですね。

詳細&ダウンロードは下のリンクからどうぞ。

CSS3でプログレスバーを実装する際に使える「CSS3 Progress Bars」をご紹介。

ヨーロッパの地図をCSSとjQueryでクリッカブルマップにしてしまったすごいデモをご紹介。
Europe, CSS & jQuery clickable map by Winston Wolf

地図にマウスオーバーすると、ポップアップで地名を表示してくれるようになります。クリックすると、地名を選択可能に。

これ、すごいですね。

HTMLは単純な<li>タグで国名を一覧にしているだけなのですが、
以下のような画像を使って、うまくCSSで表現しています。

IE6以外のほとんどのブラウザで表示できるようになっています。
興味のある方は下のリンクからどうぞ。

CSSで手軽にボタンを作る方法を探している。
そんな方におすすめなのが、「CSS3 Buttons – 10+ Awesome Ready-To-Use Solutions (+All Related Tutorials You Need)」。

ボタンを作るCSSフレームワークが10点紹介されています。
エントリーの中から気になったのを、いくつかご紹介。

CSS3 Buttons With Simple Markup

非常にシンプルなボタン。18種類あり。

GitHub-Style CSS3 Buttons

以前に紹介しましたが、Github風のボタンを作れるCSSフレームワーク。
四角、角丸、アイコン付きでボタンが作れるようになります。

Zardi

Zardiを使うと、角が少しだけ丸い物と、もっと丸いボタンから形を選ぶ事ができます。

わずか4kbで作られているようですね。

BonBon Buttons

ちょっと変わった形のボタンを作りたい際に。

サイトには他にも様々なボタンがありました。
興味のある方は下のリンクからどうぞ。