ツールキット

eコマースサイトを閲覧したことがあれば、 画像ズーム効果. 製品の写真にカーソルを合わせると、画像のその部分が より見やすい. の ZooMoveプラグイン に最適な方法です この効果を再現する あなたのサイトに。それは jQueryを搭載, そのため、多くのコードを使わなくてもすぐに起動して実行できます。. ZooMoveは完全にフリーでオープンソースです。 GitHubで 好奇心旺盛な開発者のために。それはを通してインストールすることができます 午後, バウワー, 糸, またはから直接ダウンロード CDNJS. ZooMove画像を設定するには、 3つの特定のファイル あなたのページヘッダに： jQuery ZooMove CSS ZooMove JS 両方のZooMoveファイル 縮小することができます もっと速いページロードが欲しいなら。簡単な場合は、CSSファイルをメインのスタイルシートにまとめることもできます。....

WordPressのファンは、ここにあなたが欠場したくないかもしれないものです。 Snap2objectはあなたに30の無料WordPressアイコンをもたらします。それらはベクトル形式であり、したがってその品質に影響を与えることなく拡張可能です. ダウンロードファイルはPDF形式ですが、個人的には.AIや.PSDのようなオープンソース形式を好みます。. ベクトルワードプレスのアイコンをダウンロードしてください

とともに ブートストラップ4の人気の高まり, 開発者がお互いに飛び交っているのは当然のことです。 独自のプラグインとアドオンを公開する. Bootstrapの現在のバージョンは 大量のリソース, 含む 多くの無料テーマと無料プラグイン. BS4はサードパーティのリソースの同じ急増を見ますか? これまでのところ、物事は景品のような景品で良く見えます 有線UIキット. この無料のUIキットは、 クリエイティブコモンズライセンス そしてあなたの好みに合わせて自由に適応したりやり直すことができます。それ ブートストラップの上にシンプルなデザインで実行 しかし、そのようないくつかの異なるスタイルを提供しています 暗いテーマ. また、プレビューページを見ると、 ランディングページを含むすべての要素のライブサンプル. すべてのコードは 新しいBS4コードベースに完全準拠 そしてUIキットは、当然です, また敏感. Wired UIの開発者は プロ版での作業 追加のプラグインとサンプルページを含める必要がありますが、無料版はBootstrap 4を使い始めるのに十分すぎるほどです。. このUIキット ゼロからほぼすべてを再設計,...

フロントエンドのエコシステムはいっぱいです オープンソースフレームワーク 開発プロセスを改善するために作られました。通常、誰もがこれらのフレームワークとは異なる何かを望んでいます。何人かの人々が探す 美学 他の人が欲しい間 速度 または 使いやすさ. 翼 新しいフレームワークとミニマリストの親友です。それは付属しています デフォルトのグリッド設定, カスタム要素, そして 合計5 KBのコンポーネント. おそらく翼についての最もよい部分は デフォルト要素の自動スタイル設定. Wing CSSスタイルシートをプロジェクトにドロップするだけですぐに変更に気付くでしょう. デフォルトのテキスト、リンク、およびページ要素 自動的に自分自身を形作る Wingのデザインに基づいています。あなたもすることができます あなた自身のクラスを追加する ページに美観を追加する. 翼は 960pxグリッドシステム を使って 12列構造. これは非常に簡単な設定で、960pxグリッドは通常、今日のワイドスクリーンの視聴者にとっては小さすぎると考えられています。しかし、あなたがより小さなウェブサイトが好きなら、これは素晴らしい選択です。. http://usewing.ml/はクレイジーシンプルで、次のようなものです：...

CSS3のおかげであなたはWeb上でいくつかのクレイジーなアニメーションを作ることができます。これらはできます すべてのブラウザとページ要素にわたって機能します。 ナビゲーション項目、ドロップダウン、タブを制御するには、名前を付けます。. 実際、アニメーションツールを使ってこれらのコードを動的に生成することさえできます。しかし、それらは本格的なアニメーションライブラリと比べるとかなり限られています。. 邪悪なCSSはその種の最新のライブラリです。これは私に初期のことを思い出させる かなりシンプルで初歩的なAnimate.css, それでも、ほとんどすべてのWebサイトで使用できます. サポートされているすべてのアニメーションのリストと一緒にライブデモのホームページを覗いてみてください。この記事を書いている時点で私は数えます スライドから回転までの合計24のアニメーションスタイル とパルス/バウンス効果. これらのアニメーションの多くは、要素を表示（または表示外）にするための一時的な機能です。これは、特定のページ要素をターゲットにしたスクロールビューアニメーションのページに便利です。. でもできます 追加のページアイテムを表示（または非表示）するためにこれを使用します ドロップダウンメニュー、検索バー、表示されていない申し込みフォームなどがあります。これがあなたが選ぶことができるアニメーションの小さなリストです： 振る ズームイン/ズームアウト 上下にスライド フェードイン/アウト ロールイン/ロールアウト バウンスとポップ 円回転イン/アウト これらのアニメーションスタイルはすべて1回の使用に合わせて設計されています。それらはページごとにそして要素ごとに複数回呼ばれることができます、しかし これらは繰り返しのアニメーションではありません. 代わりに、ユーザーのクリック、ホバー、またはスワイプ効果に基づいてこれらを使用します。それらはまた脈動/ズキズキする効果のためにCTAボタンで使用することができます、しかしそれはJavaScriptタイミング機能を必要としません. ライブプレビューといくつかの詳細については例のページを見てください。メインサイトにはGitHubリポジトリと一緒に完全なドキュメントもあります。. Wicked CSSは新しいライブラリなので、まだ大したことはありません。しかし、ライブラリは安定しており、今後何年もの間使用される可能性があります。.

ウェブ上にたくさんの無料のコードジェネレータがあるので、あなた自身のグラデーションを作るのは簡単です。しかし、問題はあなたのウェブサイト、あなたのClick-to-Actionボタン、あるいはあなたがデザインしている他のものに合った正しい色を見つけることです。. WebGradientsは 閲覧できるグラデーションの無料ライブラリ そしてクールなアイデアを掘り下げる。これらは完全に無料で、PNGとともにCSS3ソースコードも含まれています。. 実際、アプリケーション全体がGitHubで利用可能で、ボタンをクリックするだけでほとんどすべてのものが提供されます。. GitHubから直接グラデーションパックをスタイルシートファイル内の生のCSSコードとしてダウンロードできます。または、グラデーションを生のPNGファイル、スケッチファイル、またはPhotoshop用のPSDファイルとしてダウンロードすることもできます。. これは本当にどんなウェブデザイナーでも助けるべき無料グラデーションの膨大なコレクションです。あなたはできる 設計プロセスのすべてのステップにこれを使用する Webモックアップデザインからフロントエンドコーディングまで. グラデーションサークルのいずれかをクリックすると、ページ全体に拡大表示されます。これはグラデーションが背景としてどのように見えるかを見ることを可能にします、かなりクールな効果! さらに、CSSをクリップボードにコピーするためのリンクとともにダウンロードボタンが右上隅にあります。. PSDファイルとSketchファイルはどちらもGumroadでホストされているナビゲーションバーにリンクされています。. 通常、人々はGumroadをオンライン商人として使用しますが、多くのデザイナーは以下のものを自分のものとしてリリースします オプションのチップ付き無料. ファイルをダウンロードするときは、必要に応じてヒントを追加できますが、どちらの方法でもSketchファイルとPSDファイルの両方が無料でリリースされます。. このリストのすべてのグラデーションがあなたのウェブサイトに使えるわけではありません。しかし、それはかなり包括的なギャラリーです。 180グラデーション だからあなたが好むかもしれない何かがここにあるはずです.

ブートストラップの上に移動する 新しいCSSフレームワーク 市内。それは呼ばれています バイタル そしてそれはフロントエンド開発を取り除く 裸の必需品まで. バイタルが付属しています CSSのみ そして持っています JavaScriptライブラリまたは依存関係がない. そしてVital.cssスタイルシートは 31KBのみ縮小, アイコンフォントを含む. BootstrapのCSSファイルだけで合計118KB。バイタルはブートストラップのほぼ1/4のサイズです。それはちょうど開発者のために構築されています 迅速な解決策が必要 次のプロジェクトへ. バイタルは 完全オープンソースフレームワーク GitHubで利用可能なすべてのコードを熟読する. すべてが Sass for CSSとSlim for HTMLで構築された. しかしこれは 開発専用, あなたがプロダクションにVitalを使っているのであれば 純粋なCSSを直接​​エクスポートする. 最新バージョン...

典型的な モックアップ設計プロセス 雑用のように感じることができます。色、書体、スタイルを変更したり、それらをすべて比較したりするには、Photoshop（またはSketch）を切り替える必要があります。. あなたがのようなツールで行くなら Speculo できるよ カラーパレットの調査と比較 ブラウザで動的に. このアプリは完全に無料で、ChromeからEdgeまでのすべての主要ブラウザで動作します。デモ 6種類のリンク先ページ, ワイヤーフレームとして設計. デフォルトでは、単純な 配色 それはBootstrapのスタイルを模しています。あなたは簡単にこれらの色のどれでも変えることができます、そして、彼らはそうするでしょう 自動的に更新する ページ上. あなたもすることができます 書体を変更する 各デザインの外観を確認します。あなたがあなた自身のサイトを追加することができればそれはクールだと思います 7種類のフォントのみをサポート： アルボ ラト オープンサン ロボト モントセラト Helvetica Neue BLOKKNeue ランディングページのワイヤフレームはそれほど詳細ではないため、このアプリは設計プロセスの後半の段階では役に立ちません。. しかし、したいだけのデザイナー...