たまにはCSSとかHTMLとか
続きは下のリンクにてCSSでアイコンをデザイン
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。
View demo: Design icon with CSS
ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px;}
各アイコンになる
a要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライト画像 (パブリック・ドメイン)。これにさまざまなエフェクトをCSSでかけていく。
via hail2u.net
すっかり忘れてしまってるわね。
CSS何やったっけ？だもんね。
ま、そんなもんやね。
でも、やりだすとのめり込むのも事実だしね。
そんなわけでメモ代わり。
Posted on Thursday, Mar 3, 2011
