ウェブサイトを最新化する 28 の最先端の CSS3 効果

CSS を使用すると、きれいな効果を作成したり、モデルを作成したり、さまざまな形状を作成したりするなど、多くのことができます。最近では、アプリケーションに完璧な CSS を組み込むことは難しくありません。インターネット上には何千ものエフェクトやチュートリアルがあり、それらも無料で利用できます。理想的なエフェクトの適切な組み合わせを選択するのは非常に困難な作業であり、それらのほとんどは少し時代遅れまたは時代遅れに見えます。いくつかの素晴らしい CSS3 エフェクトを集めました。  これは、ウェブサイトに優れたユーザー エクスペリエンスを備えたモダンな外観を与えるのに役立ちます。 自由にコードをいじって素晴らしい結果を生み出すことができます。

28. 3D テキスト

クールなフォントと素晴らしい影効果を使用して、見出しテキストに 3D の外観を与えます。

27.フラットアイコン

Alireza Attari によってデザインされた、純粋な CSS Iconex フラット アイコン セット (4 つのアイコン)。

26.カラースペクトル

これは、ボックスシャドウで色を混合すると得られるものです。カラー スペクトルは 3 色の間の進行です。

25.メトロ UI

Windows 8 のデザインからインスピレーションを得た Metro UI は、すべて CSS3 で作成されています。アイコンは FontAwesome から抽出されます。

24.弾性ストローク

これは美しい配色のテキストの弾性ストロークであり、効果は CSS と SVG で作成されています。

読む:インスピレーションのための 50 以上の美しいタイポグラフィの例

23.レイヤードシェイプ

Snhasani がデザインした、美しい色とレイヤードシェイプ（すべて CSS で書かれています）。

22.スパイラルCSS

読み込みアイコンとして使用できる、曇ったスパイラル CSS アニメーション。

21.テキストアニメーション

Yoann は、テキスト アニメーションを使用してこの素晴らしいティッカー効果を作成しました。 2 番目の単語の切り替え効果は非常にクールに見えます。

20.フラットロングシャドウ

これは、フェード変数、ロングシャドウ、角度変数が詰め込まれた究極のシャドウ ミックスインです。

19. CSS クリーチャー

美しいインタラクティブなアイコンはすべて HTML と CSS で作られています。

18. 3D フリップ ボタン

JavaScript や画像を使用しないシンプルな CSS3 3D 反転ボタン。

17.シャドウを使用してテキストを変形する

これは、lettering.js を使用した高度なタイポグラフィ技術で設計された CSS テキスト シャドウです。

16. CSS レインボー

これは、シンプルなホバー効果を備えた全円の虹です。

15.カラフルグリッチ 404

CSS と少しの JavaScript で作成された驚くべきグリッチ (および振動) エフェクト。

読む:100 以上のクリエイティブで面白い 404 エラー ページ

14. UI フィードバック

これはボタンに対するフィードバックのアイデアの集まりです。 これは、フロントエンド UI にさらなるダイナミズムを与えるための単なるインスピレーションです。

13.横型アコーディオン

純粋な CSS で作られた水平アコーディオン。 これには、ソーシャル ネットワーキング アイコン用の要素（画像の代わり）と Genericons フォントが含まれています。

12.サークル錯視

Jaime Caballero がデザインした、Tusi モーションを備えた円錯視。ページ読み込みバー/アイコンとして使用できます。

11.秒カウンター

「近日公開」テンプレートに最適なエレガントなカウンター。

読む:40 以上の美しい作成中テンプレートと近日公開予定のテンプレート

10. CSS テキスト-FX

これは、テキストに薄暗い光を追加することで作成され、斑点状に点滅します。

9. CSS メニュー

CSS3 アニメーションとトランジションを備えた最新のモバイル メニュー。

8.予算スライダー

Erik Deiner からインスピレーションを得た、3D デザインのシンプルな CSS + jQuery スライダー。

7.アニメーションテキストシャドウ

このアニメーションのテキスト シャドウ パターンは、-webkit-background-clip:text と Linear-gradient を使用して、縞模様のテキスト シャドウをシミュレートします。

6. CSS 3D キャプション付き Domino 画像

これは、より優れたセマンティック マークアップ、より少ない疑似要素、より少ない CSS を備えたレスポンシブな 3D ホバー効果です。

5.ラジオ クリックスルー

ラジオ ボタンを使用したシンプルな画像スライダー。完全に CSS で記述されています。

4.グラデーションゴーストボタン

境界線の画像とボックスの影を利用してデザインされた、グラデーション ゴースト ボタンとテキスト。

3.スクイーズ トグル ボタン

Justin Windle がデザインした、ふわふわしたゴム製のボタンをシミュレートします。

推奨:Web デザイナー向けの新鮮なリソース

2.シンプルなスタック効果

遠近法と 3D 変換を使用して単純なスタック効果を作成する方法を示すトグル効果のセット。

1.スピンキット

SpinKit（読み込みインジケーターのコレクション）は、CSS アニメーションを使用して、スムーズでカスタマイズ可能なアニメーションを作成します。

今すぐ読む:ウェブサイトをより良くするための 26 の最新の jQuery プラグイン