CSS3だけで星型バッジを作る方法

SPONSORED LINK

Pocket

ほぉ、なるほど!と思ったのでご紹介。CSS3のrotationを使って画像なしで星型バッジを作る方法です。

badge

↑ こういうやつね。ちゃんとテキストも選択可能!

塗りつぶしたボックスを少しずつ回転させて重ねあわせているようですね。

そしてさらにChromeやSafariを使えばwebkit的な命令でアニメーションをさせることも可能ですよ。

css

↑ マウスオーバーするとうにょーんと動くバッジ達。これは是非見て欲しい。

SEO的にも良いし、iPhoneやiPadで見れるというのも大きいですよね。ブラウザを選びますが、覚えておいても良さそうです。

作り方の詳細は以下からどうぞ。

» CSS Starbursts with CSS3 transforms and transitions

ツイッターもやっています!

SPONSORED LINK

  1. No comments yet.

  1. No trackbacks yet.