2011年3月2日水曜日

CSS3でまどか☆マギカのシャルロッテを描いた

CSS3(webkitのみ)でまどか☆マギカのシャルロッテを作る、の続きです。

今朝未明のエントリでは力尽きて耳というか羽というかまでは作れませんでしたが、あとちょっとだしということで、付けました。

この完成版で、background-colorやらborderやらの指定を取り除き、border:1px solid whiteのみ適用してみると、こうなります。


だいたい、border-radiusを2角にだけかけたdivを、rotateして位置はabsoluteでチマチマ合わせてます。
目はradialタイプのgradientで色分け。
ひんまがった口には、border-radiusめいっぱいかけたdiv=円のborderを2辺だけ表示にして半円にし、それにskewやらscaleやらrotateやら適用してます。たぶん。


汚いソース見たい奇特な方は下記ページを開きブラウザの「ソースを表示」等からどうぞ。
実際のページ
※リンク先ページ内オブジェクトクリック危険

2 件のコメント:

flowerbomb さんのコメント...

おォぉ?今やこんなコトができるのですね。

オイラもまみまみしとうございます。

piyotori さんのコメント...

おぉボムさん!

ほむほむとかまみまみとかなんのことかよくわかりませんが、CSS3の影響で一部の地域ではCSS職人というカテゴリができつつあるようです。

QBとか
http://jsdo.it/norahiko/m1WT

ミクとか
http://jsdo.it/Tenderfeel/hmBJ

QBってなんでしょう。

いやまぢで知識として知ってるだけで本編見たいのに1話もみてないの。