開発者向けのトップ 30 CSS3 ツールとアプリ

ウェブサイトのデザインを編集または変更する必要がある場合、カスケーディング スタイル シートが重要な役割を果たします。初心者の開発者や設計者が言語とその機能を簡単に学習できるようにするツールが用意されています。ご紹介しましょう。カスケーディング スタイル シート (CSS) は、マークアップ言語で記述されたドキュメントのセマンティクス (外観と書式) を記述するために使用されるスタイル シート言語です。これは、Web 開発者の世界で広く使用され、愛されてきました。

本日は、開発者やデザイナーの作業を支援し、簡素化する 30 個の便利なツールとアプリケーションのリストをまとめました。以下のツールを使用すると、プロパティを任意の順序で並べ替えたり、Photoshop レイヤー スタイルを変換したり、独自のレスポンシブ システムを作成したりできます。以下のリストが視聴者の皆様にとって便利で役立つものとなることを願っています。楽しむ！

1.Metro UI CSS: ユーザー インターフェイス フレームワーク、Windows 8 のようなインターフェイス

Metro UI CSS は、このようなインターフェースを作成するためのスタイルのセットです。これはスタンドアロン ソリューションですが、他のフレームワークと併用することもできます。タイル、画像、通知、フォーム、ボタン、タイポグラフィのスタイルがあります。このフレームワークも「進行中」であり、より多くのレイアウト オプションと機能が追加される予定です。

2. CSScomb: 指定された順序でプロパティを並べ替える

CSScomb は無料で、あらゆる種類のプロパティを任意の順序で提供します (また、デフォルトの順序も非常に優れています。最も重要なプロパティが最初、最も重要なプロパティが 2 番目です)。単一行 + 複数行のコードで利用できる最も人気のあるコンセプトを備えており、オンライン バージョンのほかにプラグインもあります。

3. CSS3Ps: Photoshop レイヤーを CSS 3 スタイルに変換する

CSS3Ps、無料のクラウド Photoshop プラグイン、変換レイヤー、CSS 3。複数のレイヤーとレイヤー グループを選択し、ワンクリックで変換できます。ストロークは境界線のプロパティに変換されます。内側の影、内側の影、外側の輝き、Web ボックスの影のプロパティに変換。結果を確認し、ブラウザでスタイルを設定して、他のユーザーと共有できます。 Windows または OS で実行し、後で Photoshop を使用することもできます。そして何より、完全に無料です!

4. ResponsiveAeon: CSS 3 グリッドアーキテクチャ

ResponsiveAeon は、レスポンシブなレイアウトを素早く作成するための HTML 5 / CSS3 ベースのフレームワークです。合計幅が 1104 ピクセルの 12 列に基づくグリッド システムを備えており、3 つの基本カテゴリのみを使用してわかりやすくなっています。このフレームワークは「メディアクエリ」を利用し、あらゆるサイズのあらゆるデバイスで動作します。グリッド システムに加えて、フォント、リスト、テーブル、ボタン、フォームのスタイルもあります。ダウンロード パッケージには、互換性のための複数のファイル、モーダル ボックス、グリッド用の PSD/AI/アイコン ファイルが含まれています。

5. RefineSlide: CSS 3 エフェクトを備えたレスポンシブな画像スライダー

RefineSlide は、レスポンシブな画像ベースのスライダーを Web サイトに素早く統合するための軽量 (4-zip) プラグインです。スライダーは CSS 3 トランジション + 3D トランジション (すでにフォールバック) を使用し、美しいトランジションを多数備えています。ナビゲーションとしてサムネイル（自動的にフォーマットされ、レスポンシブ）または弓と矢印を表示するオプションがあります（キーボードもサポートされています）。

6. Photon: 3D ライトエンジン

Photon は、3D 空間内の任意の要素にシンプルな照明効果を追加するためのライブラリです。この効果を作成するには、WebKit CSS Matrix オブジェクトを使用します (これをサポートする唯一のブラウザ エンジンです)。光源の角度は、機能性を提供するためにいつでも定義および変更できます。照明するオブジェクトを 1 つずつ定義することも、一度に複数のオブジェクトを定義することもでき、使用する黒 + 白の設定をカスタマイズできます。

7. グリッドパック

Gridpak は、ワークフローを改善し、レスポンシブ プロジェクトの時間を節約するために作成されました。シンプルなインターフェースを使用してレスポンシブなグリッド システムを一度作成すれば、あとは gridpak に png やスクリプトの生成といった面倒な作業を任せることができます。

gridpak が生成するスタイルは IE 8 以降と互換性がありますが、メディア クエリ、ボックス サイズ設定、背景クリップ プロパティなどの実験的なプロパティも使用するため、下位互換性を確保するために jQuery などの最新のライブラリと併用することをお勧めします。

8.Morf.js: カスタム関数遷移イージング CSS 3

Morf.js は、バウンス、スプリング、弾力性などのカスタム イーズ機能を備えたハードウェア アクセラレーション CSS 3 トランジションのソリューションです。イージング関数がトリガーされると、webkit-keyframes を使用して呼び出されます。このライブラリは、規則性プロパティをラップする shifty.js を使用し、Web Kit のみです。

9. Gumby: レスポンシブフレームワークと Web インターフェースキット

Gumby は、レスポンシブで 960 ピクセル グリッドの CSS グリッド フレームワークであり、ほとんど手間をかけずにさまざまな解像度で動作するようにカスタマイズできます。リキッド固定レイアウトは、デスクトップ、タブレット、モバイルの解像度に合わせてコンテンツを自動最適化し、ネストされたグリッドをサポートします。 Twitter Bootstrap に似た UI キットで、見栄えの良いボタン、フォーム、ナビゲーション + タブ、およびこれらのコンポーネントを実現するための小さなファイルが含まれています。 Guppy には、12 列、16 列、混合バージョン、またはオールインワン パッケージなど、ダウンロードできる複数のバージョンがあります。さらに、便利なデザイングリッドを提供するファイルもあります。

10.App JS: html-css-js でデスクトップ アプリケーションを作成する

App JS は、Web テクノロジー (Web ページ、Web ページ、スクリプト) を使用してデスクトップ アプリケーションを開発できる魅力的なリソースです。 AppJS は、Web テクノロジー (Web ページ、Web ページ、スクリプト) を使用してデスクトップ アプリケーションを開発できる魅力的なリソースです。

11. ブラウザサポート: ブラウザ互換性検索エンジン

ブラウザ サポートは、ブラウザでサポートされているプロパティを見つけるためのシンプルな検索エンジンです。オートコンプリート機能を搭載した検索では、入力中にすべての可能なプロパティが表示され、すべての主要ブラウザ (Chrome、Safari、Firefox、Vimeo、Opera) で結果が表示されます。

12.スプライトパッド：数秒でステッチ図を作成

Sprite Pad は、すべての Web 開発者にとって最適なソリューションです。Sprite Pad を使用すると、数秒でスプライトを作成できます。画像をキャンバスにドラッグ アンド ドロップするだけで、スプライト + コードとして使用できます。 Photoshop でいじったり、手動でスタイリングしたりする必要はありません。簡単な方法でスプライトを作ります。

Sprite Pad は超最適化されています。ダウンロードも、セットアップも、長いアップロードも必要ありません。ブラウザ内で直接簡単に作業できます。画像を挿入し、オプションを変更すると、スタイルが自動的に更新されます。同じ作業を二度行う必要はありません。

13.HTML5をお願いします

HTML5 Please は、HTML 5、CSS 3 などの機能を見つけ、それらが使用可能かどうかを知り、ポリフィル フォールバックを使用して、またはそのまま使用して、それらを使用する方法を見つけるのに役立ちます。したがって、これらの機能を使用するかどうか、またどのように使用するかを決定できます。

これらの推奨事項は、HTML 5 の最前線にいた開発者の集合的な知識を表しています。この提案が間違っていると思われる場合は、Para の各機能やリクエストに対する推奨事項を編集することもできます。

14.JS Bin: スクリプトとスタイルの便利なオンライン編集

JS Bin は、開発者が他のコード スニペットと共同作業したり、場合によってはコードをデバッグしたりできるように設計された Web アプリケーションです。このサイトでは編集とテストが可能です

およびハイパーテキスト マークアップ言語。満足したら保存し、レビューやサポートのために URL を同僚に送信できます。さらに変更が必要な場合は、1 つを保存できます。

15.アニメーション.CSS

Animate.CSS は、プロジェクトで使用できるクールで楽しいクロスブラウザアニメーションの集合です。プロジェクトで使用するには、要素にクラスを追加するか、ファイル内でアニメーションを自分で呼び出すだけです。クラスとアニメーションの名前は同じです。

Web アニメーションは、Apple、Google Chrome、Firefox でサポートされています。 Microsoft も IE 10 のサポートを約束しており、Opera 12 のサポートも発表されています。

16.過剰：むくみを取り除く

Excessive は無料で使用できる圧縮ソフトです。任意の数のファイルをドラッグ アンド ドロップするだけで、瞬時に圧縮されます。このアプリケーションは、すべてのファイルを 1 つに結合し、ファイルをドラッグ アンド ドロップすることで (出力するために) 並べ替えることができます。

17.CSS リフレッシュ

CSS リフレッシュは、ページを更新せずに新しいスタイルをすぐに適用するプロセスを自動化するファイルです。これはプラグ アンド プレイ ソリューションであり、構成するものは次のとおりです。ファイルをページに挿入するだけで準備完了です。

18. Impress.js: CSS 3 を利用したフレームワーク

Impress.js - これを使用すると、本当に美しいスライドショーを作成できます。スライドショーは、無限のキャンバス内で配置、回転、拡大縮小が可能で、ズームイン/ズームアウトや、Taro の CSS 3 変換とトランジションを使用して 3D 効果を作成できます (これにより、Webkit および最新の Firefox+ ブラウザーのみと互換性があります)。

19. ベアCSS

Bear CSS は、指定されたファイルからすべての要素、CSS、クラスを含むスタイルシートを生成する、無料で使用できる Web アプリケーションです。アプリケーションは主に長いコードを使用するプロジェクトに役立ちますが、アップロード後にプロジェクトに内部スタイルシートを含めるという要件を満たすとより良いでしょう - 機能リクエスト。

20.少ない

Less は、変数、ミックスイン、関数を備えた CSS の拡張機能です。 node.js および rhino では、クライアント側 (ブラウザ、エクスプローラー、Firefox) およびサーバー側では実行されません。

21. CSS2レス

これは、ドキュメントのスタイルを単純なコピー アンド ペースト形式に変換する Web ベースのツールです。

このツールはバックエンドで css2less ruby​​ ライブラリを使用しており、その Web サイトはオープンソースなので、自分でホストしたい人なら誰でも利用できます。

22. レスポンシブグリッドシステム: Fluid Grid Framework

Responsive Grid System は、レスポンシブな Web サイトを迅速に開発するための流動的なグリッド フレームワークです。

これには 3 つの種類があります: すべての標準デバイス用のメディア クエリ、オプションのリセットおよびクリアフィックスを備えた 12、16、24 列。グリッド スタイル、メディア クエリ、リセット、IE 固有の設定は、別々のファイルにきちんと分離されており、必要なものだけを使用できます。

23.CSS3 シェイプ

CSS3 Shapes は、三角形、ダイヤモンド、星、コメント、卵など、さまざまな形状を含む標準スタイルが付属するプロジェクトです。 CSS 3 プロパティを使用すると、さまざまな形状を持つ単一の要素を作成できます。もちろん、それらのすべてが日常的に使用できるわけではありませんが、インスピレーションを得たり、Web サイト (3) スキルを向上させたりするのに役立つことは間違いありません。

24. CSS 矢印をお願いします

ストライプ、ボタン、アイコンなど、あらゆるものに使用できる Web ベースのジェネレーターもあります。フォーム ローダー、矢印は別のニッチに焦点を当ててください。はい、完全に矢印ベースです (画像なし)。

このヒントはツールチップの作成に役立ちます。ジェネレーターはカスタマイズのための幅広いオプション (位置、色、境界の値) を提供し、関連するコードを自動的に生成します。

25. WebPutty: Webページの編集とホスティングサービス

WebPutty は、オンラインの機能豊富な構文強調表示エディターでコードを記述し、横並びのプレビュー パネルでリアルタイムに変更を確認できるアプリケーションです。

1 つのアカウントで任意の数のファイルをホストできます。ファイルはサービスによって管理され、行われた変更はライブ サイトにすぐに反映されます。 WebPutty はオープンソースの無料ホスティング サービスであり、誰でも独自のインスタンスを作成し、単一の場所から複数のプロジェクト ファイルを編集/管理できます。

26.CSSFx.js

CSSFx.js は、新旧両方のブラウザーのクライアントに必要なベンダー固有の CSS 3 プロパティを作成する単一のファイル (サイズ 2.5kb) です。ほとんどの CSS 3 プロパティをサポートし、ほとんどのブラウザ (IE 6 を含む) で動作します。

27.SpritePad: ステッチ図を簡単に作成する方法

SpritePad は、任意の数の画像をキャンバスにドラッグ アンド ドロップし、希望の場所に配置して、スタイル ルールを自動的に生成できる、優れた無料 Web アプリです。すべてのアイテムをインストールすると、Spritepad の zip ファイルが提供されます。また、キャンバスのサイズはスプライト画像スタイルのルールに従ってカスタマイズでき、クリックするだけでドキュメントに合わせて縮小することもできます。ユーザーに他の便利な機能を提供するプレミアム バージョンも用意されています。

28. Dirty Markup: Webページ、Webページ、スクリプトコードを美しくする

Dirty Markup は、乱雑なテキストを簡単に整理するのに役立つ無料の Web アプリケーションです。シンプルな機能の aceeditor を使用して編集し、各美容ツールに複数のオプションを用意して、最良の結果を得ます。テキスト（5）をサポートし、人気のあるWebページを組み合わせることで、Webページの整理と美化を実現します。

29. Crunch: 編集とコンパイルの手間を減らす

Crunch は、構文の強調表示と複数のタブのサポートを備えた無料の Web ページ/エディター アプリケーションで、ユーザー フレンドリなインターフェイスによりコマンド ラインを必要とせずにコンパイル部分を簡素化します。小さなファイルを保存すると、バージョンが自動的に作成されます (これは、開発量を減らしたいがクライアントに依存したくない人にとって便利です)。

30.CSS3 テスト

CSS3 テストは、どの CSS 3 プロパティがどのブラウザーでサポートされているかを調べる We​​b ベースのテスト スイートです。背景/境界線、トランジション、メディアクエリ、フォント、アニメーションなどのさまざまな機能をテストします。各要素に対して複数のテスト ケースが実行され、項目をクリックするだけで実行できます。

英語原文: http://skytechgeek.com/2012/08/css-tools-and-applications/

翻訳: http://www.html6game.com/thread-560-1-1.html

開発者向けのトップ 30 の CSS3 ツールとアプリ

キーワード: 開発、CSS3、ツール、アプリケーション、プログラム、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、収益化