トロをCSS3だけでつくってみる

CSSでドラえもんとかTwitterのクジラとか、みなさんなかなかすごいですよね。

CSS3もだいぶIEさん以外は対応してきたので盛り上がっております。

なので俺もなんか作ってみよう!
CSS3だけで画像を使わずになんか描いてみよう!

お、横にどこでもいっしょのトロのぬいぐるみが落ちているじゃないか!!
よしよし、おまえをモデルにして欲しいんだな?

そのとき「つくってほしいのニャ」とトロの声が響いたとか響かなかったとか。
響きませんけどね。
オーケー、わかった!トロを作ろう!!!

CSSでできたトロ

なわけで出来たのがこちらです。

CSS3だけでトロのデモページはこちらからどうぞ。
上の画像クリックでも同じページに飛びますよ。

とりあえず確認はWinXPのFirefox3.6とChrome5でしかしていない状態。
なので他のブラウザじゃきちんと見れないと断言します。
苦労したのは耳の部分。
それ以外はそんなに困ることもなくパパッといったのですけども。

しかし、ブログを書くに当たってトロの画像をちゃんと探してみたんだけど、なんかちがうね・・・。
トロともりもり
まあ、俺のもかわいいはずだから良しとしますが。

今後の課題としては

  • もっといろんな環境で出来るだけきちんと表示
  • FirefoxとChromeでも既に多少違うからその吸収
  • 耳とか耳の中とかの三角的な部分をなんとかスマートに
  • アニメもさせたい

ってところ。
DOCTYPE htmlで書くこともないしな。

誰かうまいことCSSで三角を表示させる方法知りませんか?
思いつきませんでした。
borderにtransparentつかうとかはググッたらあったけど、今回は縁取りとかしたいから無理だったし。

しかし、本物はやっぱかわいいですね。
トロのかわいさは等身やポーズが赤ん坊に似ているからだな、とか弟の息子の見ながら納得したりと。
CSSの勉強以外に気付かされることがあったりもしたり。

あ、でも
「おまえウェブの仕事してるのにソース汚いな」
とかは言わないで。
もう先に予防線張っておきますよ。

そしてCSSドラえもんの方が「余程の暇人でない限りCSS3で絵を描くのは人には薦めません」といっていますが、概ね同意見。
ましてや空のDIVだらけではHTMLとしての意味がないというのも問題。
実用的ではないのです。
それならSVGやHTML5のCanvasなんかを使う、覚えるほうが実用的。

CSSで絵を描くように使う場面というのは、テキストを吹き出しのように囲んで見せるとかちょっとしたロゴマークのようなものにいれるとか、そういった程度の使い方にするべきかなと。
それだって空DIV並べたよくないので、やっぱ画像でいいんじゃないかなと。

なんにしても、いろんなことをもっと精進しなきゃ。

ポケピたち

50の新しくて役に立つCSSのテクニックなど

CSSイメージ

CSSについて今一度確認したほうがよかったり、最新の情報などが50個まとめられています

普段気にせずやってしまっていたけど、それどうなの?とかの復習にもなるし、やはりこのあたりの情報は出来るだけ新しいものはチェックしておくべき。
仕事で使うなら。

勘違いしやすいCSSのプロパティ
役に立つテクニック
CSSツールと使い方

などが網羅されています。
量が多いので全て目を通すのは少し大変かもだけど。

ソース元記事はこちら

透過PNGのすすめ

透過PNG、非常に便利。
いまさらすすめるほどでもないとは思うんだけど、実際にはどれくらいに人が使っているんだろうか。
俺の周りではあまりいないんだよな。
個人的には写真はJPG、他の画像はほぼPNG。

会社の後輩に教えたりが結構あるので、メモ。

透過PNGの何が便利なのか。
それはアルファチャンネルを持っているから。
簡単に言うと、透過GIFと違って透明か不透明の2択ではなくて透明の度合いが存在するという感じ。
不透明度が50%のPNGなら、その背景が半分透けて見えると言えばいいか。
他にも透過させた縁が綺麗になったり。

ただし、IE6だと透過ができないので、そんなときは
DD_belatedPNG.js

というライブラリを設置すると解決。
いろいろ試したけど、IE6で透過PNGを使えるようにするライブラリはこれが一番良かった。(正確には擬似的にだけれども)

でもってHTMLの中に条件コメントでIE6だけ向けて呼び出すと。

<!--&#91;if IE 6&#93;>
	<script src="DD_belatedPNG.js"></script>
	<script>
		DD_belatedPNG.fix('img, .png_bg');
	</script>
<!&#91;endif&#93;-->

上記の設定だとimgタグとクラスをpng_bgにしている要素が対象になる。
他にも指定したければ
DD_belatedPNG.fix(‘img, .png_bg’);
の中のに書き足せばよし。

とはいえ、これにも落とし穴があって、それについてはこちらの方のブログを参照。

さて、会社の後輩用に頼まれて、角丸グラデーションのボタンで簡単に色が変えれてある程度幅なんかも自由になるるようなのが欲しいとのことで、透過PNGでさっくりと作ったので一応サンプル表示。
本人的にはaの中にspan入れたりでどうもスマートではない気がするのだが、要望にはこたえたのでよしとする。細かい部分はいつか見直すと、ひっそりと思っておく。

サンプル

透明から薄い半透明の黒の画像を背景に指定していて、背景色を変えればその色がグラデーションになって見えるという感じ。
角丸実現のため縁の部分は白で塗りつぶしてるので設置する部分の背景が白じゃないといけないが。

しかし、CSS3がもっと普及すればこんなことしないでも、画像いらずで角丸グラデのボタンが作れるんだけどなぁ。

デザイン性の高い問い合わせフォームのメモ

フォームデザイン

最近はデザイン性が高く、率直に「お、こんな発想もあったか」なんてフォームも見かけるようになってきてますね。

一昔前のようなただのテーブル組みの質素なフォームよりも、問い合わせ率も上がるとかなんとか。

どっちにしろ、「センスいい」とか「面白い」なんて思われたほうが印象に残るわけで、以外に大事な部分です。
手を抜こうと思えば抜けるけど、そんな部分だからこそしっかりデザインして、アピールしたいもの。

もちろんユーザーの使いやすさも忘れちゃいけないけども。

いざ作ろうとおもうと以外に難しかったりも実はして。
ということで参考になりそうなものを集めたサイトのメモ