デザイン

デザイン

【厳選28】 CSS3を効果的に使ってモダンな仕上がりにするためのウェブサイト

RankRED

RankRed is a place where you can find a lot of interesting and inspiring stuff about science and technology, internet, programming tools and plugins, robots, machines and high tech gadgets, and much more.

本記事は、28 Amazing CSS3 Effects To Give Your Website a Modern Look
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

161 views

読了時間 : 約4分26秒

CSSを使うと、かわいいエフェクトを作ったり、モデルを作ったり、いろいろな形を作ったり、いろいろなことができます。

 

最新の技術を使えば、アプリケーションに完璧なCSSを組み込むことは難しくありません。インターネット上には、何千ものエフェクトやチュートリアルがあり、しかも無料で利用できるのです。理想的なエフェクトの正しい組み合わせを選ぶのは本当に大変な作業で、そのほとんどが少し時代遅れで古くささを感じます。

 

私たちは、あなたのウェブサイトが素晴らしいユーザー体験とモダンな雰囲気に仕上げるのに役立つ素晴らしいCSS3エフェクトを集めました。 ぜひ参考にしてください。

 

 

28. 3D Text

 

3D Text

 

かっこいいフォントと素晴らしい影の効果で、見出しテキストを立体的に見せることができます。

 

 

27. Flat Icons

 

Iconex Flat Icon Set

 

Alireza Attariデザインの純正CSS Iconex Flat Icon Set(4個)です。

 

 

26. Color Spectrum

 

Color Spectrum

 

box-shadowで色を混ぜるとこうなります。色のスペクトルは、3色で構成されます。

 

 

25. Metro UI

 

Metro UI

 

Windows 8のデザインに影響を受けたMetro UIを、全てCSS3で作成しました。アイコンはFontAwesomeから抽出したものです。

 

 

24. Elastic Stroke

 

Elastic Stroke

 

美しい配色で描かれた文字に、CSSとSVGでエフェクトをかけた伸びやかなデザインです。

 

 

23. Layered shapes

 

Layered shapes

 

美しいカラーとレイヤーの組み合わせ(全てCSSで書かれています)、Snhasaniのデザインです。

 

 

22. Spiral CSS

 

Spiral CSS

 

ローディングアイコンとして使用できる、曇り空のスパイラルCSSアニメーションです。

 

 

21. Text Animation

 

Text Animation

 

Yoannを使うと、テキストアニメーションを使った素晴らしいテロップ効果を作成できます。2つ目の単語のトグル効果はかなりかっこいいです。

 

 

20. Flat Long Shadow

 

Flat Long Shadow

 

フェード変数、ロングシャドウ、アングル変数などを詰め込んだ、究極のシャドウミックスインパッケージです。

 

 

19. CSS Creatures

 

CSS Creatures

 

HTMLとCSSで作られた美しいインタラクティブアイコンです。

 

 

18. 3d Flip Button

 

3d Flip Button

 

JavaScriptや画像を使わない、シンプルなCSS3の3Dフリップボタンです。

 

 

17. Transform Text with Shadow

 

Transform text with shadow

 

lettering.jsを使った高度なタイポグラフィ技術でデザインされたCSSテキストシャドウです。

 

 

16. CSS Rainbow

CSS Rainbow

 

シンプルなホバーエフェクトのフルサークルレインボーです。

 

 

15. Colorful Glitchy 404

 

Colorful Glitchy 404

 

CSSと少しのJavaScriptで作られたグリッチ(振動も一緒に)エフェクトです。

 

 

14. UI Feedback

 

UI Feedback

 

 

これは、ボタンへのフィードバックのアイデアの集大成です。 フロントエンドのUIをよりダイナミックにするためのヒントが集まっています。

 

 

13. Horizontal Accordion

 

Horizontal Accordion

 

純正CSSで作られています。 画像の代わりにエレメントを、SNSのアイコンはGenericonsフォントを使用しています。

 

 

12. Circle illusion

 

Circle Illusion

 

Jaime Caballeroが作った、動く円形錯視(Tusi motion)です。ページのローディングバーやアイコンに使えます。

 

 

11. Seconds Counter

 

Seconds Counter

 

 

 

10. CSS Text-FX

 

CSS Text-FX

 

文字に淡い光を加えることで、パッチワークのような光の点滅を表現することができます。

 

 

9. CSS Menu

 

Mobile menu

 

CSS3のアニメーションとトランジションを使った、現代的なモバイル用メニューです。

 

 

8. Budget Slider

 

Budget Slider

 

Erik Deinerに影響を受けた、3DデザインのシンプルなCSS + jQueryスライダーです。

 

 

7. Animated Text Shadow

 

Animated Text Shadow

 

このテキストシャドウのアニメーションパターンは、-webkit-background-clip: textとlinear-gradientを使って、ストライプのテキストシャドウを表現しています。

 

 

6. CSS 3D Captioned Domino Image

 

CSS 3D Captioned Domino Image

 

これを使うと、より良いセマンティックマークアップ、より少ない擬似要素、より少ないCSSでレスポンシブ3Dホバー効果を作ることができます。

 

 

5. Radio Click Through

 

Radio Click Through

 

ラジオボタンを使ったシンプルな画像スライダーで、全てCSSで作成されています。

 

 

4. Gradient Ghost Buttons

 

Gradient Ghost Buttons

 

ボーダー画像とボックスシャドウを組み合わせてデザインされています。

 

 

3. Squishy Toggle Buttons

 

Squishy Toggle Buttons

 

Justin Windleがデザインした、グニャグニャしたゴムのようなシミュレーションボタンです。

 

 

2. Simple Stack Effects

 

Simple Stack Effects

 

遠近法と3Dトランスフォームを使った簡単なトグルエフェクトセットです。

 

 

1. SpinKit

 

SpinKit

 

SpinKit(ローディングインジケータのコレクション)を使うと、CSSアニメーションを使用し、スムーズでカスタマイズ可能なアニメーションを作成できます。

おすすめ新着記事

おすすめタグ