How to Create a Beautiful Icon with CSS3 | Envato Tuts+Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
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がアイコンの前景をつなげたスプライ
CSSでアイコンをデザインへの補足
追記でCSSでアイコンをデザインの対応ブラウザについてざっと書いておいたが、そこで「知らない」とか「書きたくない」とIE8のところで書いた。それをどうも意図した方向とは違う感じで捉えられてしまっているようだったので、すこしだけ補足する。すでに勢いに任せて某所でも書いてしまったがもうちょっとはっきりと書く。IE8でもこうやればできるよ！ とかいう話ではなく、もっとモヤッとした話。 そもそもIE8でもちゃんと見えるように「書きたくなかった」のは、ベンダー拡張プリフィックスすら書きたくないというような意識があるからに過ぎない。Operaでグラデーション対応するためのSVGとかももちろん書きたくはない(書いてみたら面白かったので書いちゃったけど)。実際書きたくなかっただけで、IE8でもあの程度のことならfilterプロパティで実現できる。filterプロパティには複数の背景画像を実現するのに使える
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
