[JS]変形アニメーションがかっこいい！アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js
オフキャンバス メニューなどで最近よく見かける、アイコンをクリック・タップすると、別のアイコンにアニメーションで変形させる単体のスクリプトを紹介します。 実装も非常に簡単で、それぞれのアイコンとアニメーションを指定するだけでOK。 「zoomOut」「rubberBank」のアニメーション例 iconate.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="iconate.min.css"> </head> <body> ... コンテンツ ... <script type="text/javascript" src="iconate.min.js"> </body> Step 2: HTML アイコンを配置します。 デモではFont Awesomeのアイ
![[JS]変形アニメーションがかっこいい！アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/3e52b762682773fbeb81c27963f72395fbbf5fea/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015052611.png)
数多くの無料アイコンから必要なものだけをセットにして、軽量化されたWebフォントやSVGを作成できるサービスのまとめ
セットになったアイコンはデザインが統一されており、それはそれで便利ですが、全部のアイコンを使うことはほとんどないと思います。 自分が必要なアイコンだけをセットにし、軽量化されたセットにして、WebフォントやSVGとして利用できるオンラインサービスを紹介します。 用意されたアイコンからセットを作ってもよし、自分のアイコンを加えてセットにすることもできます。 flat icon フォーマット：font(woff, eot, ttf, svg), png, svg, eps, psd 462種類のパック、55,000個のアイコンから使用するアイコンだけを選択し、セットにすることができます。チェックしたアイコンはクッキーで保存されているので、ログインしないでも利用できます。
ECサイトなどで活用できる フリークレジットカードアイコンセットのまとめ「27 Free Credit Card Icon Sets for Online Web Shops」
ECサイトなどで活用できる フリークレジットカードアイコンセットのまとめ「27 Free Credit Card Icon Sets for Online Web Shops」 インターネット上でショッピングをする際の決算方法として、クレジットカードを使用する方は非常に多いと思います。決済は非常に重要な工程であるため、デザイン的にも分かりやすく案内してあげることが重要。今回はそんな時に必要な素材の一つ・クレジットカードビジュアルをアイコン化した「27 Free Credit Card Icon Sets for Online Web Shops」を紹介したいと思います。 Dribbble – 1 Color Credit Icons by Chad Pugh さまざまな表現のクレジットカードのアイコンセットが、27種まとめられています。気になったものをピックアップしましたので、下記よりご覧
もうシンプルアイコン探しには困りたくない！フリーのシンプルアイコンを厳選26選！ | バンクーバーのうぇぶ屋
毎日英語圏のWEB系ブログをチェックしていると、毎週必ず何かしらのアイコン系の記事を見るんですよね。バンバン新しい物が出てきて、その度に『アイコン』のタグを付けてブックマークするわけですが、もう600記事近い程のアイコン関連のブックマークがあって意味分からない状況になってたりするわけです。 というわけで、今日はそんな僕のアイコン関連ブックマークの中から『シンプル アイコン』というタグで絞って、更にその中から「これはクオリティ高いなぁ」とか「凄い使えそうだなぁ」とか思った物だけを幾つか厳選して共有させて頂こうと思います！目についた物からご紹介させて頂くので順不同です！コレを機に少しずつ整理していこーっと。 数が数なので大変かもしれませんが、皆さんこういったフリー素材を使う時は必ずライセンスを確認するように気をつけてください。中にはサイトに明記して無くてもダウンロードファイルの中にReadme
シンプルさを可愛らしさを兼ね備えたフリーアイコン「Feather: 130 Free Icons by Cole Bemis」
フリーで配布されているアイコンにはいろいろな種類があり、デザインテイストもさまざま。そんな中今回紹介するのは、シンプルさを可愛らしさを兼ね備えたフリーアイコン「Feather: 130 Free Icons by Cole Bemis」です。 130種の、定番として使用できるフリーアイコンがセットになってダウンロードできるようになっています。 詳しくは以下 メールやファイル、ダウンロード、天気、矢印などのベーシックなものを中心に揃えており、どのアイコンも角が丸く描かれているので、シンプルでクールなテイストの中に柔らかい雰囲気が求められている時におすすめ。形式もPSD、 CSH、 SVGと3種でパッケージされているので、web制作を中心にいろんなデザイン形式で使用できる点も魅力。 ベーシックに使えるアイコンとしてストックしておくととても便利だと思います。今主流のフラット系デザインにもぴったり
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
