「BonBon Buttons」はCSS3/HTML5をサポートするブラウザで表示可能なボタンとなっており、色・フォント・つやつやさせるかどうか・サイズ・形・アイコンだけにするか文字を表示するかなどがコントロール可能となっています。 コードのダウンロードは以下から。 BonBon Buttons - Sweet CSS3 buttons モーフィングも可能で、マウスを上に乗せると…… こうなる 試しにGIGAZINEで作るとこうなりました、なんだかおいしそう アイコンも表示させるとこうなります
![CSS3で作ったラムネ菓子っぽい雰囲気のボタン「BonBon Buttons」](https://cdn-ak-scissors.b.st-hatena.com/image/square/4c254317512e64e4c8c8eb4d6ad7fe687e86bfcb/height=288;version=1;width=512/https%3A%2F%2Fi.gzn.jp%2Fimg%2F2010%2F09%2F03%2Fbonbon_buttons%2Fsnap02990.png)
CSS3 の新しいプロパティーを総動員したら、Photoshopとかで作ったきれいなアクア風(ガラス風)ボタンにどこまで近づけるか? というのを実際にやってみました。 チュートリアル風に、ステップごとに分けて説明していますので、CSS3を使ったリアルな表現のためのテクニックとして、ポイントだけでも覚えておくと、いろんなところで応用できると思います! こんな感じになりました 何はともあれ↓が出来上がったものです。 今はやりの CSS3ジェネレータ には負けてないと自負しています... さて、これを作る手順です。 ※Chromeで表示して画像にしています。実際のものはこちらから見れます。 作成ステップ ステップ1 : ベースとなるHTMLを用意 まずは、こんなHTMLを用意しました。このHTMLをベースに、CSS3を総動員していきます。A タグの中に SPAN が入っていますが、こいつらには後
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く