Webデザイン用の23の高品質CSSライブラリ

CSS

現在のCSSライブラリ 高レベルのウェブデザインの証拠です そして、Webエクスペリエンスが何であるかを理解するためのこれらの素晴らしい方法を実装することになると、これらがどのように物事を容易にするか。

だから私たちは 23の高品質CSSライブラリを共有する このデザイン言語を通じてすべてがどのように可能であるかを証明するさまざまなアーティストの。 CSSを通じて何が達成できるかに驚嘆するための興味深いリソースの提供。

ぼかしメニュー

ブラー

A 見事に最適化されたデモ 最大3つの例を見つけることができます。 彼らはCSSXNUMXトランジションを使用し、さまざまなセレクターを使用して高品質のぼかし効果を作成する際の優れたインテリジェンスを使用します。

CSS3Dクラウド

雲

だけで このデモにカーソルを合わせる、このCSSライブラリで達成される素晴らしい効果を体験することができます。 何よりも、それらの雲は完全に動いています。 これは、JavaScriptだけでなくCSS3D変換も使用します。 リンクから、各ステップを見つけるチュートリアルにアクセスできます。

純粋なCSSのロゴ

ロゴ

このライブラリには 最も人気のあるロゴのいくつか AppleやTwitterなどのすべてによって。 マウスポインタを置くことで、各ロゴのプロパティを知ることができるのは興味深いことです。 リンクから完全なコードにすべてアクセスできます。

JanKaderaによるナビゲーションバー

ジョン

codepen.ioから私たちは持っています 3Dでこのナビゲーションバーにアクセス それは素晴らしく動き、そこから私たちはそのコードを完全に知ることができます。 このライブラリの特徴は、65行のみで構成されていることです。 新しいCSS3機能が被写界深度効果に含まれています。

滑走する画像パネル

スライディング

チュートリアルにアクセスできます ここから。 その大きな価値は アニメーションがどれほどスムーズか 画像パネルをスライドさせるとき。 XNUMXつのバリエーションにアクセスして、それらをWebサイトに組み込み、すばらしい結果を得ることができます。

ダブルリング

ダブルリング

私たちは前にいます 完全に再現されたリング 素晴らしい製造アニメーションで。 codepen.ioから、数百行で構成されるすべてのコードにアクセスできます。

フレックスボックス

硬さ(フレックス Flex)

フレックスボックスは、ページに列を表示する新しいCSSの方法です。 A かなり包括的なガイド これらのコンテナを理解する。

カラフルなナビゲーションメニュー

ナビゲーション

あなたはにアクセスできます このナビゲーションメニューのすべてのHTMLとCSS 色への愛をたくさん公言している人。 この言語に没頭できるように、完全にCSSで作成されています。

CSS3のプログレスバー

バラス

ほとんどの書店と同じように英語ですが、 HTMLとCSSは非常に詳細です 優れたデザインプログレスバーが必要でした。 グラデーション、線、その他の種類の視覚効果があなたを待っています。

Animate.css

アニメーション

GitHubで人気があります 完全にCSSで行われます。 知りたいアニメーションを選択すると、「Animate it」ボタンをクリックするだけで、Animate.cssで効果を確認できます。 GitHubでダウンロードまたは表示できます。

スピンキット

スピンキット

私たちは次のことができる指標のコレクションに直面しています あらゆる種類の視覚要素に対応 ウェブで。 「ソース」をクリックすると、その実行に必要なすべてのコードが見つかります。

ボタン

ボタン

A CSSボタンライブラリ 競合他社との差別化に必要なものを見つけるためのすべての方法とアイデアの中で。 サイドバーから、見つけたくない形状や効果を無効にして、特にXNUMXつに焦点を合わせることができます。

フリップスイッチ

フリップスイッチ

私たちは前にいます 特定のボタンを無効にできるアプリ まさに私たちが探しているものを作成するために。 さまざまな設定を使用して、最終的にWebサイト用にコピーするコードを再現できます。 その多様性と素晴らしいスタイルのための非常に興味深いリソース。

ヒント.css

ヒント

A JavaScriptなしのCSSライブラリ そしてあなたが望むようにあなたが使う準備ができています。 サイズが小さく、使いやすく、最新のすべてのWebブラウザーで機能します。

色.css

Colores

する人のために 興味深い選択肢から色を探す これにより、視覚的な側面が優れたWebサイトのラピッドプロトタイピングが可能になります。

ボクセル.css

ボクセル

建設ゲームであるMinecraftを知っているなら、このCSSライブラリは確かに簡単に認識できます。 中央を押しながら回転します グリッドの生成に進みます。

タイポグラフィ

タイポグラフィ

A 純粋なCSSフォント 軽量で、次のプロジェクトに最適です。

スピナー

スピナー

A アニメーションの大規模なコレクション CSSとHTMLでアイコンをロードする方法。

チャージラインインジケーター

インジケータ

CSSペアの純粋なテキストあらゆる種類のインジケーターをロードする。 あなたのウェブサイトに必要で正しい指標を見つけるための素晴らしい情報源。

CSSローダー

CSSローダー

別の アイコンをロードするためのフォント あらゆる種類のアニメーションに合わせてカスタマイズできます。

画像ホバー

ホバー

A スケーラブルなCSSライブラリ そして、そのクラス«ホバー»の画像の重みはほとんどありません。

色相.css

劣化

のソース 49のグラデーションまたはフォトリアリスティックなグラデーション あらゆる種類のコンテンツと画像に対応します。

マテリアライズ

材料

Un マテリアルデザインに基づくCSSフレームワーク、Googleが多数のアプリや独自のAndroidオペレーティングシステムで使用している設計原則。

予約をお見逃しなく 完成度の高いウェブ とともに svg画像.


コメントを最初に

コメントを残す

あなたのメールアドレスが公開されることはありません。 必須フィールドには付いています *

*

*

  1. データの責任者:MiguelÁngelGatón
  2. データの目的:SPAMの制御、コメント管理。
  3. 正当化:あなたの同意
  4. データの伝達:法的義務がある場合を除き、データが第三者に伝達されることはありません。
  5. データストレージ:Occentus Networks(EU)がホストするデータベース
  6. 権利:いつでも情報を制限、回復、削除できます。