PureCSSでSiriっぽい画面を作る

新しいiPad!!, Siri!!, AppleTV!! と世の中騒がしいのですが、僕はiPhoneなんて持ってないぞー! (買えよ)
ということでとりあえず見た目だけでも…

と思いPureCSSでSiriっぽい画面をつくろうとしてみました。
PureCSSなので画像は使っていません
http://inajob.no-ip.org/dev/siri_css/siri_css.html

CSS3をふんだんに?使ったので古いブラウザでは見えないと思います。
何気にWifiのアンテナが大変だったり…

おかげでbefore,after擬似要素や、clip,roundなんかの微妙な使い方がわかった気がします…


むー 作ったは良いが使うところが思いつかないw(修行にはなったw)

CSSに自信のある方はぜひ身の回りのあれこれをCSSだけで描いてみませんか?

心残りがたくさん

  • 背景は無理
  • マイクアイコンは作れるかも
  • ロックアイコンっぽいのもなんとか…なるかな?