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 件のコメント:
おォぉ?今やこんなコトができるのですね。
オイラもまみまみしとうございます。
おぉボムさん!
ほむほむとかまみまみとかなんのことかよくわかりませんが、CSS3の影響で一部の地域ではCSS職人というカテゴリができつつあるようです。
QBとか
http://jsdo.it/norahiko/m1WT
ミクとか
http://jsdo.it/Tenderfeel/hmBJ
QBってなんでしょう。
いやまぢで知識として知ってるだけで本編見たいのに1話もみてないの。
コメントを投稿