たまにはCSSとかHTMLとか

CSSでアイコンをデザイン

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でかけていく。

続きは下のリンクにて

すっかり忘れてしまってるわね。

CSS何やったっけ?だもんね。

ま、そんなもんやね。

でも、やりだすとのめり込むのも事実だしね。

そんなわけでメモ代わり。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中