ツールキット - ページ 12

すべてのうち カルーセルプラグインオンライン 私は私の帽子をひっくり返さなければなりません ロリー. それはそのようなものです 単純な概念 しかし、それは簡単に 最も強力なスライダー ウェブ上で. の 縮小版 合計で7KBほどありますが、これは小さくはありませんが、確かに タッチ対応のカルーセルスライダーには悪くない. あなたはそれ以来それをあらゆるウェブサイトにこのプラグインを追加することができます jQueryまたは普通のJSで動作します。. それはと動くことができます 依存関係なし これは互換性に優れています. Loryもその数少ないプラグインの1つです。 古いブラウザでは劣化しない. それは IE10で完全サポート+, 古いバージョンでもスライダーを動かすことができます。 アニメーションとちょっとした追加物なしで. あなたがする必要があります プログラムによるコーディングをすべて自分で行う コンテンツを追加したいがそれが 驚くほど簡単. 各パネルの大きさ、アニメーションの長さ、レスポンシブブラウザの処理方法を定義できます。. Loryのホームページをチェックしてください。...

色彩理論の主題はかなり基本的に思えるかもしれませんが、それはあなたが読むことによって理解できるものではありません。色彩理論を真に理解するためには、実践する必要があります。. 頻繁にWebプロジェクトを構築している場合は、色を使用することが必須です。実用的な色彩理論は あなたが速く色について学ぶのを助けることができる便利なウェブアプリケーション. この無料Webアプリケーションは、色、デザイン、またはUIの美学に関することを知らない開発者を対象としています。. 全ては、信じられないほどのデザイナー兼コーダーのNatalya Shelburneによって、GitHub上で構築されリリースされました。. 彼女は現在フロントエンドの開発者として働いていますが、彼女はアートとデザインを教える6年以上の経験を持っています。 Natalyaは、このカラーリソースを作るためのデザインと開発経験の完璧なカクテルです。! あなたがサイトを介して作業するようになるでしょう 特定の色がちょうど一致しない理由を学ぶ, 他の人がしている間。また、特定の配色は素人っぽく見えることが多く、いくつかの重要な規則を理解すれば避けるのは簡単です。. 例えば、私はしばしば黒を決して使わないように規則に従ってデザインして、それは私によく役立った。他の強い色についても同じことが言えます。可能な限り純粋な形の色を使用することを避けます（つまり、＃0000FFのようなフルブルーを避けます）。. このツールについての最もクールなことはそれです 各セクションには、CSS / Sassのコードと、よく書かれた説明が含まれています。 色について。ニュートラルがなぜそれほど重要なのか、アクセントカラーを作成する方法、そしてうまく調和するスキームを生成する方法を理解するでしょう。. このガイドがあなたを色の専門家にするとは言えません。本当にそれはちょうどいくつかの基本的なヒントで表面を傷つけます。しかしそれは巨大です 初心者カラー選択から飛躍 あなたが色に問題があるならば、このサイトは助けます. あなたがサイトで見つけたすべてのソースコードはあなた自身で自由に使用して遊ぶことができます. ボーナスのヒント：ページ上部の色付きの点をクリックして、ページの配色を変更してみてください。あなたはそれらからかなりの数のアイデアを得ることができます!

あなたがWebデザイン技術についていくなら、あなたはCSSグリッドについて知っているべきです。これらのプロパティは CSS3フォーマットへの新たな追加 そして彼らはすぐに開発者の親友になりつつあります. 最近、CSSグリッドのプロパティを習得するための楽しいゲームを取り上げましたが、ゲームは必ずしも実用的なアイデアを教えるわけではありません。それがGriddyがもっと役に立つかもしれないところです. この無料のWebアプリはあなたをすることができます リアルタイムでグリッドをカスタマイズしてライブスニペットを更新する ページ上。列、溝、余白を定義し、ページを再構成してグリッドのプロパティがどのように機能するかを学ぶことで、独自のカスタムグリッドを台無しにすることができます。. Griddyは実際には フロントエンド開発者向けの無料学習ツール CSSグリッドについてもっと知りたい. このWebアプリケーションを使用すると、グリッドに新しい項目を追加したり、他の項目を削除したり、必要なレイアウトに合わせてサイズを変更したりできます。. Webアプリケーションには、グリッドプロパティを編集するためのさまざまな入力フィールドを持つさまざまなセクションがあります。これらはあなたがグリッドの行/列を再フォーマットすることを可能にし、それらはあなたに教えます まさにあなたがしていること 途中で. 列の間隔を定義したり、グリッド項目を揃えたり、位置揃え設定で遊んだりすることができます。これらはすべてフォームフィールドを通じて可能です。変更を加えるたびに、プレビューとその下にある小さなコードスニペットが自動的に更新されます。. この方法で、CSSをさらにコピーしたい場合は、CSSをコピーして自分のスタイルシートに貼り付けることができます。かなりクール! GriddyはGrid Gardenほど面白くないかもしれませんが、Griddyは学ぶための実用的な方法であり、 視覚的に理解する CSSグリッドプロパティがページ要素に与える影響. それを試してみるには、Griddyのホームページにアクセスしてください。自分の考えや質問をTwitterの作成者と共有することもできます@drewisthe.

あなたが学ぶことを計画しているなら アドビの最新のUI / UXソフトウェア Adobe XDは非常に複雑なデザインツールであるため、習得するにはかなりの時間がかかります。ただし、学習プロセスをすばやく追跡したい場合は、XD Guruによって発行されたこのガイドを参照してください。. それは最大です Adobe XDソフトウェアの最も包括的なガイド あなたはオンラインで見つけるでしょう。それはインターフェイス、ツール、そしてデザイナーのためのいくつかの基本的なワークフローさえもすべて無料で教えます。! このガイドのいいところは、経験がなくても始められることです。 Adobe XDがどのように機能するのか、そしてそれが典型的なワークフローにどのように適合するのかを学ぶためのステップバイステップのプロセスを案内します。. ページの左側には目次があります。これらのリンクを使用して あなたが学びたいトピックに飛び乗る. 初心者は、タイポグラフィやAdobe XDの図形のカスタマイズなどのトピックに進むことができます。しかし、完全な初心者は、ステップバイステップの章と彼らが読むのがどれほど簡単であるかを理解するでしょう. また、これらに注意してください 章はチュートリアルのように読む 練習レッスンを行っているところ. 各章には、特定のインターフェイス機能を説明するための矢印とボックスの付いた多数のスクリーンショットが含まれています。これらのミニガイドは、Adobe XDを学びたい人にとって非常に貴重です。特に持っている人のために 決して 以前にデザインソフトウェアを使用したことがある. 各章の用途 MacOSからのスクリーンショット しかし、インターフェースはWindowsでもほとんど同じです。ただし、キーボードショートカットとメニュー項目の中には異なるものもありますので、注意してください。. 私はXD Guruをしばらく使っていて、最近書いたことさえあります。このサイトはAdobe...

グーグルマップは確かに最も人気があります 埋め込みマップウィジェット Webデザイナーのための。しかし、どうですか カスタム機能を追加する ツールチップやピンマーカーなど? これは素晴らしいライブラリが好きなところです Leaflet.js トンを助けます. これは 完全無料のオープンソースプロジェクト 当初はMapboxでVladimir Agafonkinという名前の人物によって作成されました。それ以来、リーフレットは含まれるように成長しました 何十人もの貢献者 世界中で. 頻繁に バグ修正と新機能で更新 それはあらゆるウェブサイトの全面的な実施を改善する。その純粋な力とデザインの美しさから、これは私のお気に入りのマッピングライブラリです。. それは私がおそらくそれらすべてをリストすることができなかったほど多くの機能を持っています、しかしここにあります 最も面白いもの： モバイルハードウェアアクセラレーション ピンマーカー、シェイプオーバーレイ、およびツールチップ カスタムズーム＆パンアニメーション JSの依存関係はありません IE7を含むすべての主要ブラウザのサポート+ あなたがする必要があるので実装は少しトリッキーです。 座標を入力 そして 地図の大きさを定義する. ユーザーはいつでもできる ズームアウトする...

開発者はの苦痛を知っています 最初からコードを作り直す. ありがたいことに、Web開発コミュニティはオープンソースとフロントエンドのフレームワークに関して多くのことを提供しています。. ブートストラップなどの一般的なフレームワーク うまくできた しかしまたできます 肥大しすぎる. ありがたいことに、選択肢があり、私の最新のお気に入りの1つは Kernel.css. カーネルはそれ自身を 邪魔にならないフレームワーク, 意味する 薄層のように動作する あなたのページの上に。面倒なことやカスタマイズが難しいと感じることはなく、クラスは 最新のHTML 5仕様に完全準拠. フロントエンド開発者の作業は 適切な意味に従う アクセシビリティと最高レベルのブラウザサポートのために。カーネルなどのフレームワークを使用することで、一般的な問題を解決するための時間とフラストレーションを軽減できます。. これがKernelの最も売れている側面のいくつかです： そのグリッドシステム flexboxで動作します. 完全にレスポンシブ そして モバイルフレンドリー. カスタムトランジション CSSとJavaScriptを通して プレスタイル要素 カード、テーブル、およびヘッダー用. シンプルな配色...

Webサイトのデザインは、うまく実行されたアニメーションによって実現します。プロジェクトに効果を追加するための適切なライブラリを探しているなら、ここでいくつかのライブラリのリストを作りました。 scrollイベントに基づいて効果を出すために使用できます. ユーザーがWebページを下にスクロールすると、アクションは さまざまなアニメーションオプションを起動するように設計できます。 フェード効果、ぼかし、3D、視差など。ここには25のJSライブラリーがあり、サイト設計でそのような応答を達成するのに役立ちます。. スクロール表示 Webとモバイルの両方にスクロールアニメーションを簡単に追加できるライブラリです。あなたがアニメートしたい要素にカスタムイージング、3D回転、継続時間と多くのmorパラメータを設定することができます. 依存関係： なし サイズ： 2.9kb | ライセンス： MIT アニビュー あなたの要素がビューポートに入ったときだけアニメーションを有効にするためにAnimate.CSSと連携するプラグイン. 依存関係： jQuery | サイズ： 1kb | ライセンス： 該当なし ビューにフェードイン 所定のビューポートに出入りするときに要素にフェードイン/アウト効果を追加するプラグイン. 依存関係： jQuery | サイズ：...

Webデザイナーは、アイコンセットを使ってゴミを選びます。あなたはオンラインで何百もの景品を見つけることができます、そして、それらのほとんどは商業的使用のために利用可能です. 私はいつも新しいアイコンセットを探しています、そして私が見つけた最新のパックはJAMアイコンです。これはすごい アイコンパックは数回の繰り返しを経てきました 現在、v1.0.7で準頻繁なアップデートを提供しています. このパック全体は フリーでオープンソース - SVGファイルを含むGitHubからダウンロードできます。しかし、あなたがあなたのサイトに本当に必要なのは、CSSを介して直接埋め込むことができるWebフォントフォルダです。. あなたがどのように知っていればあなたもあなたのページで直接SVGアイコンを使うことができます。最近のほとんどのブラウザはこれをサポートしています。! JAMはもともとユニークで繊細なアイコンセットとして設計されていたので、その目標に忠実であると私は思います. の 線アイコンのスタイルはかなり人気があります そしてどのページにも溶け込みやすい. さらに各アイコンはグリッド上にデザインされているので、編集は比較的簡単です。これらのアイコンはすべて、グリッドと縦横比が重要なレイアウトでうまく融合します。. ホームページを覗いて、420以上のアイコンすべての完全なリストを見てください。このリストには ページで使用するCSSクラスだけのアイコン名. もっと知りたいなら、aboutページを見てください。それはいっぱい含まれています 混乱させる可能性のあるソースコードのリスト そしてあなたが使用できるCDNリンクさえ. これらのJAMアイコンはすべてのWebサイトに収まるとは限りません。しかし、彼らは少なくともそこに主流のアイコンフォントの確かな代替手段として試す価値があります。. Webフォントに関してはこれらはあります すばやくセットアップ、読み込み、そしてカスタマイズがとても簡単. あなたがウェブサイトのパフォーマンスに真剣に取り組んでいるなら素晴らしい資産. あなたがクリエイターとアイデアを共有したい、あるいは単に感謝を言いたいのであれば、Twitterで彼に連絡することができます.