ツールキット - ページ 31

オーバーレイスライダーを使用すると、2つの画像を重ね合わせた状態で2つの画像を比較することができます。操作可能なスライダーをユーザーがドラッグすると、前の画像が少なくなり、後の画像が多く表示されます。逆の場合も同様です。. 火星の大気の過酷な影響や半世紀にわたる都市景観の変化を見ることなど、特定のシナリオに最適な方法です。. デザイナーにとって、それはテクニックやアプローチがオリジナルのイメージに与える変化の量を反映するための素晴らしい方法でもあります。比較目的で使用できるさまざまなJSライブラリーがあります。ここではそれらの5つです. 20代 20代 2つの画像の違いを簡単に確認できるようにするための視覚的なツールです。このツールはjQueryとjquery.event.moveを利用して動作します。使い方はとても簡単です。2つの画像を1つのコンテナーに重ねて呼び出してください。 20（）; コンテナ用. その後： $（ "＃container"）。20（）; 20代は応答性が高く、すべてのデバイスで機能します。Foundationフレームワークを使用している場合は、そのまま使用できます。. 並置 並置 2枚のメディア（写真またはGIF）を比較して、時間の経過に伴う画像間の変化を簡単に強調するのに役立ちます。このプラグインは使いやすく、すべてのデバイスで動作します。ただ2つの画像を提供してから利用可能なオプションでプラグインを呼び出します. オプションでは、スライダの開始位置の設定、垂直または水平の設定、ラベルとクレジットの追加、アニメーションなどを設定できます。. 下記のデモを試してください。 imgSlider imgSlider 画像比較スライダーを作るためのシンプルなjQueryプラグインです。使い方はシンプルで簡単です。そのJSとCSSを含めた後、画像をdivで囲みます。 左 のクラス 前 イメージ 右 のクラス 後に 画像を呼び出してから起動 .スライダー（）;. プラグインのオプションには、スライダーの初期位置の設定、スライダーへの指示の追加/表示などがあります。....

あなたは基本に精通しているので、今から始める時間です。 AngularJSを使用して独自のWebアプリケーションを構築する. AngularJSは、Javascriptベースのアプリをより直観的に構築することを、いわゆる呼ばれるものを使って行うこと 指令, HTMLマークアップと連携して動作します。. 地上からWebアプリケーションを構築することがあなたにとって圧倒的に思われる場合でも、心配する必要はありません。非常に寛大な開発者もいます AngularJSをサポートするためにいくつかのフロントエンドフレームワークを適応させました. 典型的なフレームワークのように、それらはあらかじめ構築されたWebコンポーネントが付属しています。これらは、Webアプリケーションをすばやく起動して実行する必要がある人にとって、フレームワークの使用を完璧なツールにします。. AngularJSを使ってWebベースのアプリケーションを起動するために使用できる5つのフレームワークがあります。. 1. Angular UIブートストラップ AngularUIブートストラップ, その名前が示すように、最も一般的なフロントエンドフレームワークの1つであるBootstrapの上に構築されています。このフレームワークには、Carousel、Alert、Collapseなどの一連のBootstrapコンポーネントと、RatingやTimePickerなどの追加機能が含まれています。. これらのコンポーネントはすべてAngularJSディレクティブを使用するように移植されています（ng-repeat そして ng-controller）およびカスタムHTML要素たとえば、 カルーセルを包むために、もっと使うことができます “意味がある” カスタム要素, そして ： あなたがBootstrapの大ファンであると同時にAngularJSが提供するパワーとパフォーマンスを享受しているなら、これはフレームワークの完璧な選択になるかもしれません. 2.アンギュラーファンデーション AngularJSを使用するように移植されたもう1つの一般的なフレームワークはFoundationです。 “アンギュラー財団”. 同様に、このフレームワークは、AngularJSのディレクティブとカスタムHTML要素を採用するようにFoundationコンポーネントを変更しているので、より意味的な名前の付いたHTML要素を使ってWebアプリケーションを構築できます。 , , そして...

興味深いUI要素であるツールチップ（情報ヒントとも呼ばれます）を使用すると、小さなボックスが表示されます。 マウスカーソルが情報のある特定のテキストまたは画像の上にある ホバーされている要素に関して。ユーザーエクスペリエンスの点では、ツールチップはユーザーに最も迅速で簡単な情報源を提供します。 何もクリックせずに. テキストにツールチップを追加する最も簡単な方法はHTMLタグを使用することですが またはTITLE =””, ALT =””. しかし、いくつかの本当にクールがあります JavaScriptとCSSで作成できるツールチップのデザインとスタイル ツールチップスクリプトを使用する。見てみましょう. CSS Balloon.css - バルーンはCSSライブラリです SasSとLESSで構成 対話型のツールチップを表示します。ツールチップの内容と位置は、次の方法で設定できます。 データ- 属性。ツールチップは左、右、または左右に表示できます。できます コンテンツに絵文字を追加する. Balloon.cssは、NPMを介してインストールすることも、CDNJSからロードすることもできます。. シンプティプ - SasSを使って実現 要件に合わせてコードを再設定して再コンパイルします。. ツールチップの位置と内容は、クラス名と データツールチップ 属性。 Simptipは...

Google Chromeが大好きです。そのシンプルさ、スピード、そしてパフォーマンスは間違いなく最高です。しかし、時には、単純すぎることも問題になります。特に、Web DeveloperのようなFirefoxアドオンに大きく依存しているWebデザイナーにとっては特にそうです。それは2008年に戻ってアドオンを持っていなかったという理由だけで、私はそう、Chromeから離れて歩いた. しかし今、すべてがまた変わります。他のオタクがChromeに同じ愛情を抱いていることは驚くことではなく、彼らはFirefox Addonと同様の機能を持つChrome Extensionを作成することにしました。私はそれらの拡張機能を詳しく調べ、それらに非常に満足していたので、私は拾うことにしました。 Webデザイナーにとって非常に役立つ40の拡張 そしてあなたと共有する. だからここに彼らはあなたのためです、あなたのChromeを装備し、あなたの生産性を高めます. 色 カラーピッカー ColorPickerは、その名前と同じように、主にWebページ上の任意の場所から色の値を選択して取得するために作成された便利な拡張機能です。さらに、エリアを選択してカラーパレットをクリックすると、コードに触れることなくそのエリアの色がどのように変化するかを確認できます。. クロムパレット 画像から配色を見つけるのに頭痛がする？ Chromeパレットはあなたのデザインやインスピレーションのニーズに合わせてウェブサイトの画像から最大64色のパレットを作成することで効率的にあなたの問題を解決します. カラー調整 カラーピッカーはカラーピッカーと同じようにWebサイトの色を変更できますが、より具体的な方法があります。このエクステンションにCSSセレクタを入力して、テキストの色、背景色、境界線の色をあなたの意志に合わせて微調整するだけです。. タイポグラフィ フォントエディタ フォントエディタを使用すると、サイズの変更、行の高さ、バリアントなどのフォント設定の変更や変更を監視することができます。. Googleフォントプレビューア その名前で指定されているように、この拡張子はあなたがサイズ、スタイル、太さと影であるテキストスタイルオプションでグーグルフォントディレクトリからフォントをプレビューすることを可能にする。特定のフォントに満足している場合は、拡張子で提供されているリンクとCSSコードをコピーしてフォントを使用することができます。. 開発 ウェブ開発者 おそらくWebデザイナーおよび開発者にとって必須の拡張機能です。スクリプトの表示からオブジェクト情報の表示まで、Web Developerは既存のWebサイトから必要なあらゆる情報を提供することを目的としています。この拡張機能は、カラーピッカー、ウィンドウリサイズ、バリデータなどの便利なツールで武装しています。. 振り子 Web Developerに似ているがスタイルビューア、ソースビューア、バリデータのような必要なツールだけが装備されている軽量で便利な開発者ツール. Firebug...

約5ヶ月前、私たちはあなたにRSSアイコンのための究極のリストをもたらしました。 5ヵ月後、たくさんの無料のRSS RSSアイコンがインターネットをフラッシュし、究極のリストはもはや究極のものではなくなった。もっとクールなRSSアイコンを見つけるために、インターネットを再クロールしました。無料のアイコンパッケージも検討したので、クールなRSSアイコンを見逃すことはありません。. ここにいくつかあります あなたのブログやウェブサイトのための本当にクールなRSSフィードアイコン. ジャンプ後の全リスト. Psdbox.pl スマッシングマガジン 特にその読者への贈り物としてSmashing MagazineのためにブラジルからDirceu Veigaによって設計されています. 3D漫画のアイコンパック FreeIconsダウンロードI nyssajbrownによる6つの異なるアイコン色 FreeIconsダウンロードII によってicojoy フレッシュアイコン グランジRSSバナー RSSバナーの6つの色は超有名な景品の3つのリソースに基づいてそれらをデザインしました. Viki Social Bookmark Iconset 17多色のRSSアイコン ハットRSSアイコン Pixelvalve RSSアイコン BarteeX RSSアイコン IconTexto...

クリスマスは数週間後です。そして、あなたのクリスマスの買い物を終わらせるための締め切りも近づいています。これは私達が私達の場所のためのクリスマスをテーマにしたデザインがお祝いの年末のお祝いを歓迎するために準備をする時でもあります。良いニュースは、ここhongkiat.comで、私たちはあなたのデザインプロセスをスピードアップするためにたくさんの機知に富んだ投稿（そして景品）を持っているということです。. 今日、私達はのリストをまとめました 40の無料品質のクリスマスのアイコンセット あなたのクリスマスデザインプロジェクトをスピードアップし、スパイスを盛り上げることを目的としていて、ポストの最後にも特別なボーナスセクションがあります。以下のコレクションを楽しんで、みんなにメリークリスマスを送ってください。! その他のクリスマス関連の辞任リソース： クリスマスデザインリソース：サンタクロース クリスマスデザインリソース：壁紙、テーマ、アイコン、ベクトルなど クリスマス＆新年のアイコン[景品] クリスマス＆新年のアイコン GraphicsFuelによって作成されたこのアイコンセットは、hongkiat.comによって独占的に持ち込まれ、美しく細工された詳細を備えた魅力的なデザインがすべて付属しています。 （出典：Hongkiat） クリスマスのアイコンを設定 クリスマスデザインのリソースのあなたのマスターコレクションに追加されるに値する印象的な傑作。 （出典：MKho） クリスマスのアイコン 明るく鮮やかな、それはクリスマスのアイコンが顧客を引き付けるために必要とする局面であり、そしてArocheのクリスマスのアイコンセットはICOとPNGフォーマットでそれらを持っています、そしてサイズは512x512pxです。 （出典：アロチェ） クリスマススノードーム 冬をイメージした光沢のあるスノードームデザイン。フルベクトルシェイプレイヤーなので、任意の解像度に自由にサイズ変更できます。 （情報源：GraphicsFuel） クリスマスキャンドル あなたが販売ページまたは製品ページを作成したいかどうかにかかわらず、PSDフォーマットのこれらの豪華なクリスマスキャンドルはあなたのページの美観を増して、そして新しい販売記録のあなたの希望を明るくします。 （情報源：GraphicsFuel） キャンディケーン お菓子が好き！そして、彼らはもっと魅力的なキャンディー杖が好きで、そしてこのPSDキャンディー杖は400x300pxのサイズであなたに利用可能です。 （出典：nelutuinfo） クリスマスのベクトルアートの文字 かわいいサンタ、いたずらなエルフ、陽気なトナカイなどが付属しているPixedenの素晴らしいベクトルキャラクターパックをご覧ください。 AIおよびEPS形式で利用可能です。 （出典：ピクセデン）...

私たちはもう一人と一緒 クールなデザインの景品集 デザイナーのために。私たちはあなたがデザインの動向に追いつくのに苦労していると確信しています（私達はそれらをとても早く燃え尽きます）、それでここにあなたがおそらく愛するであろう資産のコレクションがあります. 我々は持っています アイコン、フォント、PSDとテンプレート、モックアップ、UIキット、そして便利なプラグイン あなたが材料設計に入っているならあなたは好きかもしれません。あなたがあなたが見るものが好きでないならば、またはあなたが好きならば、もっと多くの景品のために私たちの他のコンピレーションをチェックしてください、あなたは大好きです： Webデザイナーのための景品とグッズ - 12月 Webデザイナーのための景品とグッズ - 10月 Webデザイナーのための景品とグッズ - 9月 アイコン 50の図書館のアイコン 本やソファ、メガネなど、地元の図書館でよく見かける要素を特色としたアウトラインアイコンのかわいいセット。それらはすべてAdobe Illustratorで編集可能なベクトル図形で構成されています. 材料設計アイコン（拡張色版） Googleがしばらく前に発表した重要なアイコンを覚えていますか。ここで彼らは、彼らのガイドラインに加えて600以上のオリジナルデザインに基づいて色付けされています. 現代のUIアイコン MicrosoftのExpression Designを使用して細心の注意を払って作成されたアイコンのセット。モダンUIスタイルに最適な、シンプルでわかりやすい外観が特徴です。複数のフォーマットで提供される1200以上の要素があります. 丸いベクトルアイコンを設定 非常にシンプルなラインデザインの丸いアイコンのコレクションです。EPS形式でダウンロードして、必要なサイズに合わせて調整できます。. アイコンのフォント/デザインの概要アイコン あなたがデザイン（AI、スケッチ）とフォント（SVG）バージョンの両方でつかむことができる素晴らしいアイコンフォント。アウトラインスタイルはモダンで目に優しい. 繊細な黒いアイコンを設定 音楽やその他のトピックに関連する一連のアイコン。とてもシンプルで、白い背景の上に黒で描かれています。...

あなたがサイト上で見つけることができるツールとリソース、特にウェブデザイナーのための景品とグッズを愛するならば、ここであなたが愛するであろう新しい編集はここにあります. このラウンドアップでは、グラフィックユーザーインターフェース、あなたの製品を展示するためのモックアップ、ウェブサイト用のPSDテンプレート、いくつかのトレンディなスケッチ作成、完全に編集可能なアイコン、見栄えのするフォントなどがあります。. 詳細はこちら： Webデザイナーのための景品とグッズ - 2015年2月 Webデザイナーのための景品とグッズ - 2015年5月 Webデザイナーのための景品とグッズ - 2015年3月 ファウンドリ：複数デバイスのベクター資産 インタラクティブなWebアプリケーションやモバイルアプリケーションを作成するのに最適なSVG形式で作成されたデザイン要素の完全なギャラリー. 60ワークスペースの要素を持つエレガントなベクターキット iMac、MacBook、iPhone、iPad、Apple Watchなどのあらゆる種類のデバイス、カメラ、鉛筆、マーカーなどを含む60のワークスペース要素の無料マルチフォーマットベクトルセット. シュレッドプレート：iPhone 6サーフをテーマにしたPSDテンプレートパック バックグラウンドでサーフィンフォーカスを持つ高解像度のiPhone 6モックアップのコレクション。モックアップにはスマートオブジェクトと24個のPSDテンプレートがあります. 究極のマテリアルデザインバンドル 個人用および商業用の材料設計バンドル。静止したアイコン、アイソメトリックアイコン、アバター、イメージフォント、パターン、背景などがあります。. 高解像度のApple Watchの写真 あなたが自由に使えるApple Watchの高解像度写真。それらをダウンロードしてそれらにあなた自身のデザインを追加してください. 4色再開PSDテンプレート PSDで作られた4色のカラーバリエーションで構成される履歴書テンプレート。それはうまく層状にされていて、編集が容易で、印刷準備ができて、そしてまた、カバーレターテンプレートを含みます. Aleo：無料のPSDテンプレート...