Web系

CSSでお絵かきの限界追及してみた

どうも。
最近新しいものを色々購入して金欠なミウラです。
iPhone7やら PS Vitaやら、服やホタテ、ゲームなど・・・。

私のiPhone7はまだ届いていないのですが、
みなさんはもうゲットできましたか?
まだ触った事がないので、楽しみです!

楽しみとは裏腹にお財布が楽しい事になっていきます。
そう、金欠の時にやる事と言ったら一つしかないですよね。

( ˘ω˘ ) …

CSSでトラを作ろう

では初めていきます。

参考までに完成系のHTMLコードを記述しますが、
参考にならない上によくわからず汚いですね!
よく見ると、これから何が追加されるのかがわかるかもしれません。
でもそんな無駄な時間を使うのはやめて、どんどんトラを描画していきましょう

頭から徐々に作って行きましょう!

この当たりは特に変わった事もなく
border-radiusで丸を作り
position: absolute; で耳の位置を決めているくらいでしょうか
耳の黒い部分は、円に黄色の長方形を重ね、半円にしています。
もっといい方法ありそうですけどね…( ˘ω˘ ) 笑

ここに顔パーツをペタペタと・・・!

だいぶトラトラしてきましたね。

上から順番に。
額の模様は、cssで三角を作りそれを複数組み合わせています。
サングラスの形状は、border-radiusを四隅違う数値を指定し、
サングラスっぽくしています。

やはり安定のabsoluteですね・・・

体を付けます

つけました!

頭でやった額と同じように、css三角をぺたぺたとつけて、
丸いdivを配置したのみです!ここはシンプル!

あっ、手をつけるのを忘れた。

ついでに笛をつけてみました。
手はborder-radiusで丸くし、
グラデで、背後の黄色と色を地味に変えて、手である事をわかるようにし、
transform: rotateで傾きをつけています!

左右で違う数値を指定はしていますが、こんな感じです。
(※ここではブラウザ毎の指定は覗いています。またwidthやheightなど基本的な記述も書いていません。)

足をつけます

つけました

後は色々と整えて終わりたいと思います。

ブログ外でコーディングをして、後でこのブログに挿入したら
classが見事に被り・・・崩れたので、治す為に色々と無駄な記述を追加してしまった・・・!

でもなんとか表示されてよかったです。ちなみにIEやらスマホやらブラウザチェックはしていません。

命名:とらとらお

最後まで見ていただき、ありがとうございました!
今度は面白い動きなども実装してみたいと思いました!

結論:cssはまだまだいける

もっと修行を積んでいきます。

The following two tabs change content below.
三浦太輝

三浦太輝

フロントエンドエンジニア(CP2)株式会社トラパンツ
好きな事はアクアリウム、いつか部屋中を水槽で埋め尽くしたい。部屋一面のレッドビーシュリンプ水槽に囲まれて暮らしたい。そこでコーディングしていたい。 嫌いなものは、エビ。食べれません。触れません。吐き気がします。