CSSでアイコンをデザイン

ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 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がアイコンの前景をつなげたスプライ

[tailtame]

『ベースが正方形なので、 border-radius: 50%; とすると真円になる。』（一部略）…！！ 今度使おう…（なんかそればかりですが）

[typista]

ぽけったー CSSでアイコンをデザイン

[pirosikick]

白の透明をかぶせるのね。なるほどね。

[etoile777]

CSSのみで奇麗に装飾

[tiadeen2]

CSSでアイコンを作るチュートリアル。徐々にできていくのがわかりやすい！「対応ブラウザ-Internet Explorer 8 書きたくない」ｗｗ

[glat_design]

あとはwebフォントを使えば殆ど画像は必要なくなる。非対応のブラウザの駆逐待ちorスマフォにオススメ

[taketyan]

CSS3 の便利なプロパティを実用的な例で解説している素晴らしい記事.

[basara669]

きれい。[webデザイン][css][web制作][デザイン]

[bigchu]

: いいね、かしこい

[XIAORING]

icon

[Arison]

CSSでアイコンを丸くしたり枠つけたり凹ましたり半透明にしたり。

[kazutan711]

あとで

[b4takashi]

元の画像があれば大抵のことはできるのね。"察してくれ"ｗｗ

[sotarok]

icon アイコンアレンジ

[kosigan]

「察してくれ……」が笑える!!

[michael-unltd]

css techs

[hiro_y]

CSS3でアイコンぽく

[BURN]

rss

[saka39]

CSS3で角を丸くするとか背景をグラデーション。「対応ブラウザについて書いてなかったけど察してくれ…」

[code404]

今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。

[mitukiii]

素晴らしい

[syque]

実装に向いてるかはともかく、CSS でのアイコン作成例。エフェクトの数値が載ってるので参考になる。

[daisukeskim]

cssでアイコン

[yamadar]

いいね！こういうの好き。

[diveintounlimit]

ふつーに画像かベクトルデータで使えふつーに。そうするメリットは何もないんだって。

[keicin2002]

IE6が死ぬのが前提だ。[webデザイン][web制作]

[hottn]

css css3 webデザイン　アイコン

[adsty]

グレーのアイコンにCSSでエフェクトをかける。

[uturugi]

ほえ～。ためしてみようかな

[sihou1]

イラレで作ったほうが早い気がする件