前の記事 ≪:ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い
次の記事 ≫:1.5KBで実装できるスライドショー用JavaScript ライブラリ「TinySlider」

注目を集めるためのCSS3を使った光るボタンサンプル実装例

2009年12月09日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
注目を集めるためのCSS3を使った光るボタンサンプル実装例が公開されています。
Safari4や Firefox3.5、ChromeでみるとCSS3の機能を使ってボタンが光ります。少しだけ次世代ですがこんなことができるんだなと覚えておいてもよいかも。



アニメーションで輝くボタンはまるでイルミネーションのようです。
@-webkit-keyframes を使うことでこんなことができるんですね。

Firefox3でみると次のように光りはしませんが、それなりにきれいなボタンで表示されます。



デモは以下のエントリを参照してください。
Radioactive Buttons with CSS Animations and RGBa - ZURB Playground - ZURB.com

作成のチュートリアルは以下を参照してください
Pushing Your Buttons With Practical CSS3

関連エントリ
関連の記事検索:CSS, CSS3, button
スポンサード リンク

By.KJ : 2009年12月09日 09:56 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)