SVG can be used as an icon system to replace icon fonts. The reasons why SVG makes for a superior icon system are numerous, but we won’t be going over them in this article. If you don’t use SVG icons and are interested in knowing why you may want to use them, I recommend you check out “Inline SVG vs Icon Fonts” by Chris Coyier – it covers the most important aspects of both systems and compares the
「CSS Sprites（CSSスプライト）」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。 具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要
今はコレです。 $sprite2x: sprite-map("sprite2x/*.png"); $sprite-img:sprite-url($sprite2x); @mixin sprite-background2x($name) { background-image: sprite-url($sprite2x); background-repeat: no-repeat; overflow: hidden; width: image-width(sprite-file($sprite2x, $name)) / 2; height: image-height(sprite-file($sprite2x, $name)) / 2; $ypos: round(nth(sprite-position($sprite2x, $name), 2) / 2); background-positio
こんばんは、お弁当に入っている梅干しは最後に食べるishidaです。 暑い時期になるといつもは全然飲まないのに、やたら炭酸飲料が飲みたくなります。 特に好きなのがスプライト。ブランド名の語源は、英語のSpirit（元気の意）とSprite（妖精）に由来しているみたいです。 といった感じで無理やり話題につなごうとしていますが…スプライトと言えばCSS Sprites。 背景画像としてCSS Spritesを使うパターンは多いと思いますが、背景じゃなく通常の画像でも CSS Spritesみたいなことができないかな？と思ったので、今回はそれをご紹介。 画像を用意 まずは、以下のような画像を作ります。 sprite_icon.gif 画像のサイズはきりがイイほうが設定しやすいので 90x90 としています。 1つのアイコンが 30x30 ってことです。 サンプル 以下がサンプルです。 サンプル0
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
