Power Up With The Right Gears and Wheels -Transform IconsWhen it comes to automotive excellence, the term encompasses more than just high-performance vehicles or luxurious interiors. It represents a…
Webサイトに必要なfaviconが21個になっていた - IT探検の追憶
久しぶりにWebサイトのfaviconを変えようと思い、調べてみると、必要なfaviconが大幅に増えていることがわかりました。 その数、何と21個！ そんなに増えていたとは。 一応、以下にリストアップしてみます。 faviconのリスト favicon.ico: IE用 favicon-16x16.png: タブ表示用 favicon-32x32.png: Mac版Safari用 favicon-96x96.png: Google TV用 favicon-160x160.png: Opera 12 までのスピード・ダイアル用 favicon-196x196.png: Android版Chrome用 mstile-70x70.png: Windows 8 用 mstile-144x144.png mstile-150x150.png mstile-310x310.png mstile-31
差がつくメニューアイコン 25個のCSSアニメーション (1/2)
随所に使用されているアニメーション 美しい建築写真が、存在感のあるタイポグラフィとともに目に飛び込んでくるサイト「Studio Songes（ステュディオ・ソンジュ：スタジオ夢）」。ダイナミックなページ全体の動きに加えて、ページの右上にある小さなメニューアイコンにもユニークな動きが取り入れられている。 メニューアイコンをマウスホバーすると、≡の3本のラインが整列し、クリックすると1本のラインに変化するギミック。CSSアニメーションを活用したサイトでは、こんな小さなメニューアイコンの動きにまでこだわるサイトが増えている。 今回は「Studio Songes」を参考に、CSSアニメーションを使ったメニューの開閉アイコンを作成する。アニメーション自体は小さな動きだが、メニューの開閉という大きな動作への導線でもある。覚えておくときっと役に立つはずだ。 STEP 1：アイコンの初期状態を作る メニュ
アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう
2014年7月3日 SVG ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか？SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。 ↑私が10年以上利用している会計ソフト！ 2014年7月3日 追記：SVGスプライトの書き方について修正＆追記しました。 SVGってなに？ SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術です。Web上で一般的に使われる画像形式であるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。 Appleがレティナディスプレイを発表して
もうアイコンには困らないぞ！ 11,245個のピクトグラムのアイコンがダウンロードできる -flaticon
10,000個以上あっても品質はどうよ、と思う人もいるかもしれませんが、サイトを運営しているのは当ブログともコラボしたfreepik.com！ 彼らのアイコンをはじめ、質の高いアイコンが揃っています。 ちなみに、コラボしたのはCelebrations Icon Setです。
アプリ開発者必見！国産アプリも多めのアイコンデザインギャラリー「iconDrop」｜男子ハック
「iconDrop」はiOSアプリのアイコンに特化したギャラリーサイト。このサイトを作成された@xxmiz0rexxさんもアプリデザインのお仕事をされているので、ご自分のためにも多くのアイコンが見れるサイトをということでサイトを制作したそうです。 「iconDrop」の特徴は、色やアイコンの系統、フラットデザイン、リッチデザイン、アプリのカテゴリなどで分類されていて、参考にしたいアイコンを探しやすくなっているというところ。 試しに「Blue」でフィルタリングしてみるとこんな感じ。 現在はまだ100個程度のアプリしか登録されていません。素敵なデザインのアイコンがあれば「オススメアイコンを紹介する」というページから推薦してあげると@xxmiz0rexxさんが泣いて喜ぶはず。 個人的にデザインとは別の機能ですが、そのアイコンのアプリがどれだけDLされたとか、そうゆうデータが見れると「こうゆうデザ
変態的にすごい！レイヤー効果を駆使してわずか1レイヤーで描いたアイコン達
世の中には物事の限界を追及する人たちがおりまして... / わずか1レイヤーで描いたアイコン / Photoshop One Layer Chal...他...全11件 世の中には物事の限界を追及する人たちがおりまして、そういった方々のことを、人は尊敬の念を込めて「変態」と呼びます。 そんな変態たちがPhotoshopの限界に調整した、わずか1レイヤーで描いたアイコンを集めました。元ファイルを配布しているものばかりを集めましたので、ダウンロードしてその変態っぷりをご覧ください（作り方の勉強にもなりますよ）。
- Photoshop VIP
タグ「リアルアイコン」のついた関連記事は以下のようです。 キーワード「リアルアイコン」に関連するエントリーをチェックできます。 お探しの記事が見つからない場合は、右上の検索ボックスをお使いください。
MFG Labs icon set
Why? because it's practical We have designed a friendly icon set for an internal project. It is designed to be easily embeddable on a website or application using a webfont and css. We have decided to share it with everyone. Our creation flow was inspired by the excellent work of Dave Gandy's font awesome project and the Octicons font made by the github team. Retina ready Fully scalable icons Font
iconmonstr - Free simple icons for your next project
To use this icon, you must first accept the license agreement.
アイコンを表示させる際にSVGスプライトとPNGのどちらが重いかをテストした動作サンプル - かちびと.net
SVGで書いたアイコンとPNGとで、どちらが重いかを調べた動作サンプルがあったので備忘録としてメモします。当然と言えば当然なんですけど、実際に見てみるとなんとも言えない気分になります・・ Codepenで良い動作サンプルがあったのでメモ。 PNG vs SVG for sprites Check out this Pen! ここに貼り付ける上手く動いて無さそうな・・実際にCodepenで見たほうが良さそうです。尚、使っているSVGはこちら、PNGはこちらです。 サンプルを見た限りでは今あるブラウザではかなりパフォーマンスに影響が出てしまうようですね。SVGは凄く便利ですけど、まだ実用段階としては時期早尚という印象です。使いどころ次第なんでしょうけど・・ 少し仕事が立て込んでるのでメモだけ。サンプルのコードは以下でどうぞ。 PNG vs SVG for sprites
天気予報用のアイコンがセットになったアイコンフォント「Forecast Font」:phpspot開発日誌
Forecast Font 天気予報用のアイコンがセットになったアイコンフォント「Forecast Font」 CSSを使い、:before, :after を組み合わせて使うことで様々な天気アイコンに対応できるみたいです このテクニックは他のアイコンにも適用できそうです。 単に文字を組み合わせてタイポグラフィを作ってみるのもいいのかもしれませんね 関連エントリ フリーな1262種類のフラットアイコン「COSMO MINI」 アイコン画像をアップして独自のアイコンフォントがブラウザ上で作れる「Iconvau.lt」 地図と共に使えそうな２００のフリーベクターアイコン集 シンプルで使えそうな５０のベクターアイコンセット フラットが美しすぎるアイコン24個セット
Conor Muirhead // Designer
Home Twitter Dribbble Hey, I'm Conor. I design interfaces that help people get stuff done. March 23, 2013 2 days ago Icon Stacks Combining icon font glyphs to create complex mega-icons. If you've recently joined the ranks of designers and devs using icon fonts, you're likely still in the honeymoon phase. I know for me it was a god-send when I first starting using these sweet scalable glyphs in my
白黒ベースのサイトを作りたい時に役立ちそうなWeb素材やWebデザイン例などのまとめ
最近、白黒カラーベースのサイトを 作成したのですが、その際に色々と 参考にしたアイコンやバナーなど のWeb素材やインスピレーション 向上の為のWebデザイン例に なりそうなサイトをまとめておきます。 結局アイコン等は使わなかったんですが、また作る時の備忘録としてメモ＆シェアしたいと思います。ライセンスはそれぞれご確認を。多少重いかもしれません。アイコン、ボタンやバナー、その他の素材、ギャラリーと続きます。 アイコン白黒やグレーのアイコンいろいろ。 40 greyscale icons グレースケールアイコンパック。 40 greyscale icons twotiny 白黒のミニアイコンが沢山。 twotiny 165 vector icons 165のうち、66が白黒のアイコン。 165 vector icons bwpx.icns かなりの数の白抜きミニアイコンが揃っています。 bw
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブ対応のアイコン素材、単にサイズを変えるだけでなく、デザインを最適化した優れもの！
SVGアイコンをアニメーションエフェクト付きで切り替える為のスクリプト・「SVG Morpheus」
http://www.uiplayground.in/css3-icons/
ビジネスからコスメ・ファッション・料理・スポーツ・教育など、最近リリースされたアイコン素材のまとめ（フラットは除く） -2013年夏
Symbolset - Turn words into icons using font magic
新着記事
