最新の手法でブラウザのタブに表示される「Favicon(ファビコン)」を作成するとこうなる
ブラウザのタブやブックマークに表示される「Favicon(ファビコン)」は、ウェブサイトを印象づける重要な要素です。そんなファビコンを作成しウェブサイトに表示させる最新の方法について、フロントエンドエンジニアのAndrey Sitnik氏が解説しています。 How to Favicon in 2021: Six files that fit most needs — Martian Chronicles, Evil Martians’ team blog https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs ファビコンは2000年代初頭に生まれたコンセプトで、インターネットに公開するウェブサイトはファビコンを備えているべきだとSitnik氏は主張。しかし、ウェブサイト
input要素の前と後にアイコンを添えたオシャレなフォームを実装するチュートリアル
Coloured 前後+カラーリングのパターン 実装 HTML HTMLはシンプルで、アイコンやカラーリングはclassで判別します。 <!-- 1st prefix with email icon and default color (grey) --> <input placeholder="Type here..." class="ppfix pre email" type="text"> <!-- 2nd postfix with google plus icon and default color (grey) --> <input placeholder="Type here..." class="ppfix post gplus" type="text"> <!-- 3rd prefix with home icon and blue color --> <input pla
立体感のあるUIが手軽に利用できるフリーUIキットまとめ「New Creative UI Kit Free Download」
TOP > Design > 立体感のあるUIが手軽に利用できるフリーUIキットまとめ「New Creative UI Kit Free Download」 webサイトやスマートフォン特有のUIデザインは、視認性とクリエイティブ性の両方が求められるクオリティのパーツ制作が必要不可欠となってきます。そこで今回は、立体感のあるUIを手軽に利用できるフリーUIキットをまとめた「New Creative UI Kit Free Download」を紹介したいと思います。 Simple UI Kit – Icon Deposit カラートーンの異なるUIキットが、いくつも紹介されています。中でも気になったものいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■Vector UI Bundle – Icon Deposit シンプルなカラーリングのUIキットです。落ち着
Free Icons Web - Free Icons,Free Icons Download,Free Desktop Icons,Royalty Free icons
U.S. DollarEuroBritish PoundCanadian DollarsAustralian DollarsIndian RupeesChina Yuan RMBMore Info →
確実に進化している！CSS3アニメーションで実装する10種類のナビゲーション
Example 10 エレメントのサイズとカラーを変更し、重なり順も変更。 実装 HTML HTMLの構造は、アイコン、メインテキスト、サブテキスト、3つをli要素に含めます。 <ul class="ca-menu"> <li> <a href="#"> <span class="ca-icon">A</span> <div class="ca-content"> <h2 class="ca-main">Exceptional Service</h2> <h3 class="ca-sub">Personalized to your needs</h3> </div> </a> </li> ... </ul> [ad#ad-2] CSS アイコンに使用しているのは画像ではなく、シンボルフォントを使用します。 @font-face { font-family: 'WebSymbolsRegul
defaulticon
[dih-fawlt] [ahy-kon] is a repository of elegant, visually unified, minimal icons with crystal clear clarity, based on black color. It Can be used for UI design on web, portable devices (iPhone, iPad, Android compatible devices, other smartphones etc) , desktop applications, and generally any kind of electronic or mechanic machinery interface. The set is completely customizable as it is available
商用利用も無料、ウェブ用のエレメント・ページレイアウト・アイコンのPSD素材の配布サイト -design deck
ナビゲーション、ボタンなどのエレメントをはじめ、ページレイアウト、アイコンなど、商用でも無料で利用できるウェブデザイン用のPSD素材を配布しているサイトを紹介します。
ロゴ、背景、アイコンなどの画像ジェネレータ厳選20個｜Webpark
背景、ロゴ、favicon、Ajaxローディングなどの画像をオンラインで作成できるサイトを集めました。まだまだありますが、多すぎるとかえって不便だと思うので各ジャンルごとで3個または5個で厳選しています。 背景関連 1. Stripe Generator ストライプの模様を作るならここ。ストライプの幅はもちろん、影や柄なども自由自在です。グラデーションもつけることもできます。 2. bgMaker 背景パターン作成サイトです。サイズは自由に変更できて、リアルタイムで背景に提要されて確認できるので便利です。 3. BgPatterns ― Background Patterns Maker こちらも画像の背景パターン作成サイトです。背景画像の組み合わせからサイズや色まで詳細にカスタマイズすることができます。 4. Dotted Background Generator 水玉模様の背景画像が作
無料で商用でも利用OKなWebdesigner Depotのアイコン集「Kaching」「Childish」「Buddycons」「Reflection」などなどとにかくいっぱい
イーコマース用のアイコン「Kaching」、子ども向けウェブサイト用のアイコン「Childish」、各種ソーシャルメディアのアイコンをベクター形式で揃えた「Buddycons」、モノクロベースで208種類もある実用アイコン「Reflection」、ベクター形式のソースファイルを同梱したRSS用のアイコン「Supra」、ブルーとブラックを基調にしたベクター形式も収録済みのアイコン「Primo」、ベクター形式とPNG形式の両方を揃えたTwitter用各種アイコンセットなどなど、とにかく山ほど無料で商用利用も可能なオリジナルデザインのアイコンを配布しているのがウェブデザインを扱うブログ「Webdesigner Depot」です。 というわけで、各種アイコンのダウンロードは以下から。 Kaching - Exclusive Free eCommerce Icons | Webdesigner De
Fireworks用のウェブデザインの無料素材がダウンロードできる -Webportio
アイコン、ボタン、リボンをはじめ、フォーム、スライダー、ツールチップ、メニューなどウェブデザインでよく使用されるようなエレメントをFireworks用のファイルで配布しているサイトを紹介します。 Webportio Graphical resource of Adobe Fireworks [ad#ad-2] 素材の利用にあたってはウェブサイト・ソフトウェアなど、個人でも商用でも無料で使用できます。また、利用の際にはバックリンクの必要もありません。 お願いとして、このサイトを何らかの形で広めてくれると嬉しい、とのことです。 素材はウェブデザインによく利用するエレメントも数多くあり、下記にいくつか紹介します。
1年間365日、Twitterのアイコンを毎日ドット絵で変更したまとめ - 聴く耳を持たない(片方しか)
私（@rikuo）はTwitterで「毎日アイコンをドット絵で更新する」というのやっています。 （その経緯は Twitterでアイコンを毎日新作ドット絵で変更しているよ こちらで説明しています） で、2009年11月8日から始めた更新も2010年11月7日に365日目となったので、これまでの1年間毎日更新してたアイコンを一気にまとめてみたでござるの巻。 一応ルールとしては 基本的には24ピクセル・16ピクセルのドット絵 画像自体は48ピクセルなので、2倍または3倍に拡大する ドット絵であれば、題材は特に制限しない 辺りの緩い縛りです。見事に題材はバラバラです。 というわけで、カレンダー表記でこれまでの更新履歴を並べてみました。 2009年11月 日月火水木金土 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
リストに使えそうなフリーの小さいアイコンセットまとめ
リストアイコンをよく探してるので 自分用にまとめ。小さいアイコン だけにしています。結構迷うんで すよね、リストアイコン。そのまま 使えそうなのとか参考になりそう なものとか色々です。 リストアイコンいろいろです。諸事情で時間がなかったのであまりライセンス見ていません。一応フリーみたいですが利用条件等はご自身で判断してください。 Free Website Bullet Icons 使いやすそうです。 Free Website Bullet Icons Liste de puces pour design de sites internet. シンプルでいいですね。 Liste de puces pour design de sites internet. 300imagesfrom1800sites 有名なやつです。 300imagesfrom1800sites Mini Icons 小さ
小さくてもくっきり、商用利用も無料のミニアイコン290種
Design interface application Framework _ 290 free vectors icons アイコンはウェブサイト、ワイヤーフレーム、オンラインアプリケーション、ソフトウェアなどを想定しているため、多種多様なデザインが290種類揃ったものとなっています。 サイズは16x16に基づいて設計されており、小さくても鮮明な外見を備えています。
かわいい上にハイクオリティなフリーのアイコン集
ブログ用からEコマース用まで、極小サイズ、手書き風、折り紙風などシンプルでかわいいフリーのアイコンをIconDockから紹介します。 IconDock キャプチャのアイコンは「20 Free Marker-Style Icons」 IconDockで配布されているアイコンから、フリーのものだけを下記にピックアップしました。 有償のアイコンでは更に素敵なアイコンセットが用意されています。 Stock Icon（有償のアイコンページ）
商用利用でも無料のイラストやアイコンなどのベクター素材集 -Love Vector
Love Vector 登録されている素材は、オリジナルのものをはじめ、他の作者によるイラストやアイコンなど多数あります。 目的の素材は検索、タグ、カテゴリから探すことができ、下記にカテゴリの中からいくつかピックアップしました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GUIdebook: Graphical User Interface gallery
IDEA * IDEA
http://designaholic.cc/2011/02/20.html
わかばマークのMacの備忘録 : いろいろファイルの保存場所のメモ書き
Engadget | Technology News & Reviews
