When it comes to maintaining your vehicle, regular servicing is essential. One of the most effective ways to ensure your…
久しぶりに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
随所に使用されているアニメーション 美しい建築写真が、存在感のあるタイポグラフィとともに目に飛び込んでくるサイト「Studio Songes(ステュディオ・ソンジュ:スタジオ夢)」。ダイナミックなページ全体の動きに加えて、ページの右上にある小さなメニューアイコンにもユニークな動きが取り入れられている。 メニューアイコンをマウスホバーすると、≡の3本のラインが整列し、クリックすると1本のラインに変化するギミック。CSSアニメーションを活用したサイトでは、こんな小さなメニューアイコンの動きにまでこだわるサイトが増えている。 今回は「Studio Songes」を参考に、CSSアニメーションを使ったメニューの開閉アイコンを作成する。アニメーション自体は小さな動きだが、メニューの開閉という大きな動作への導線でもある。覚えておくときっと役に立つはずだ。 STEP 1:アイコンの初期状態を作る メニュ
10,000個以上あっても品質はどうよ、と思う人もいるかもしれませんが、サイトを運営しているのは当ブログともコラボしたfreepik.com! 彼らのアイコンをはじめ、質の高いアイコンが揃っています。 ちなみに、コラボしたのはCelebrations Icon Setです。
「iconDrop」はiOSアプリのアイコンに特化したギャラリーサイト。このサイトを作成された@xxmiz0rexxさんもアプリデザインのお仕事をされているので、ご自分のためにも多くのアイコンが見れるサイトをということでサイトを制作したそうです。 「iconDrop」の特徴は、色やアイコンの系統、フラットデザイン、リッチデザイン、アプリのカテゴリなどで分類されていて、参考にしたいアイコンを探しやすくなっているというところ。 試しに「Blue」でフィルタリングしてみるとこんな感じ。 現在はまだ100個程度のアプリしか登録されていません。素敵なデザインのアイコンがあれば「オススメアイコンを紹介する」というページから推薦してあげると@xxmiz0rexxさんが泣いて喜ぶはず。 個人的にデザインとは別の機能ですが、そのアイコンのアプリがどれだけDLされたとか、そうゆうデータが見れると「こうゆうデザ
タグ「リアルアイコン」のついた関連記事は以下のようです。 キーワード「リアルアイコン」に関連するエントリーをチェックできます。 お探しの記事が見つからない場合は、右上の検索ボックスをお使いください。
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
To use this icon, you must first accept the license agreement.
SVGで書いたアイコンとPNGとで、どちらが重いかを調べた動作サンプルがあったので備忘録としてメモします。当然と言えば当然なんですけど、実際に見てみるとなんとも言えない気分になります・・ Codepenで良い動作サンプルがあったのでメモ。 PNG vs SVG for sprites Check out this Pen! ここに貼り付ける上手く動いて無さそうな・・実際にCodepenで見たほうが良さそうです。尚、使っているSVGはこちら、PNGはこちらです。 サンプルを見た限りでは今あるブラウザではかなりパフォーマンスに影響が出てしまうようですね。SVGは凄く便利ですけど、まだ実用段階としては時期早尚という印象です。使いどころ次第なんでしょうけど・・ 少し仕事が立て込んでるのでメモだけ。サンプルのコードは以下でどうぞ。 PNG vs SVG for sprites
Forecast Font 天気予報用のアイコンがセットになったアイコンフォント「Forecast Font」 CSSを使い、:before, :after を組み合わせて使うことで様々な天気アイコンに対応できるみたいです このテクニックは他のアイコンにも適用できそうです。 単に文字を組み合わせてタイポグラフィを作ってみるのもいいのかもしれませんね 関連エントリ フリーな1262種類のフラットアイコン「COSMO MINI」 アイコン画像をアップして独自のアイコンフォントがブラウザ上で作れる「Iconvau.lt」 地図と共に使えそうな200のフリーベクターアイコン集 シンプルで使えそうな50のベクターアイコンセット フラットが美しすぎるアイコン24個セット
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デザイン例に なりそうなサイトをまとめておきます。 結局アイコン等は使わなかったんですが、また作る時の備忘録としてメモ&シェアしたいと思います。ライセンスはそれぞれご確認を。多少重いかもしれません。アイコン、ボタンやバナー、その他の素材、ギャラリーと続きます。 アイコン白黒やグレーのアイコンいろいろ。 40 greyscale icons グレースケールアイコンパック。 40 greyscale icons twotiny 白黒のミニアイコンが沢山。 twotiny 165 vector icons 165のうち、66が白黒のアイコン。 165 vector icons bwpx.icns かなりの数の白抜きミニアイコンが揃っています。 bw
Icons are a great and quick way to enhance your projects. They add a certain personality to your designs and make things pop when they need to. Today we release a new set of icons which we call “Reflection”. It’s simple yet elegant and stylish at the same time. You’ll find these icons great to use at small sizes, such as for website navigation, menus and more. Both vector and raster versions are i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く