CSS3だけで星型バッジを作る方法
- May 24th, 2010
- Posted in 開発ツール・技術
- Write comment
ほぉ、なるほど！と思ったのでご紹介。CSS3のrotationを使って画像なしで星型バッジを作る方法です。
↑ こういうやつね。ちゃんとテキストも選択可能！
塗りつぶしたボックスを少しずつ回転させて重ねあわせているようですね。
そしてさらにChromeやSafariを使えばwebkit的な命令でアニメーションをさせることも可能ですよ。
↑ マウスオーバーするとうにょーんと動くバッジ達。これは是非見て欲しい。
SEO的にも良いし、iPhoneやiPadで見れるというのも大きいですよね。ブラウザを選びますが、覚えておいても良さそうです。
作り方の詳細は以下からどうぞ。
» CSS Starbursts with CSS3 transforms and transitions
No comments yet.