Help us understand the problem. What is going on with this article?

【現役Vueフロントエンジニアおすすめ】実務で使えるCSSマテリアルデザイン80選(完全オリジナル/解説付き)

スクリーンショット 2020-07-04 20.26.15.png

コピペだけで作れるマテリアルデザインを80個ご紹介します。

box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています

コードには説明もわかりやすく書いてあるのでかなり参考になります

Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています

Webデザイナーに興味のある方はこちらも合わせてどうぞ↓
スクリーンショット 2020-08-08 16.41.27.png

CSSボタンアニメーション80選

1. シンプルなスライダーマテリアルデザイン3選

そのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

qiita-material-image1.png

↓参考記事は下の記事です↓

qiita-material-design1.png

2. filterとopacityを使いこなすスライダーマテリアルデザイン3選

filterとopacityを使ったそのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

qiita-material-image2.png

↓参考記事は下の記事です↓

qiita-material-design2.png

3. filterエフェクトを使いこなすhoverアニメーション3選

filterエフェクトを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

qiita-material-image3.png

↓参考記事は下の記事です↓

qiita-material-design3.png

4. overflow: hiddenを使いこなす美しいCSSアニメーション3選

overflow: hiddenを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しい画像アニメーションとなっています

qiita-material-image4.png

↓参考記事は下の記事です↓

qiita-material-design4.png

5. position:absoluteとfilterを使いこなし鏡みたいに反射するアニメーション3選

position:absoluteとfilterを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

鏡みたいに反射する見ているだけで面白いアニメーションです

qiita-material-image5.png

↓参考記事は下の記事です↓

qiita-material-design5.png

6. filter: hue-rotateとtransitionを使いこなし色が暴れ出すアニメーション3選

filter: hue-rotateとtransitionを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

色が暴れ出すかなり美しいデザインになっています

qiita-material-image6.png

↓参考記事は下の記事です↓

qiita-material-design6.png

7. filter:blurとtransitionを使いこなしぼかし画像が動き出すアニメーション3選

filter:blurとtransitionを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

qiita-material-image7.png

↓参考記事は下の記事です↓

qiita-material-design7.png

8. transitionとfilterを使いこなし美しく変化するCSS画像エフェクト5選

transitionとfilterを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しく変化するのを見るだけでも面白いです

qiita-material-image8.png

↓参考記事は下の記事です↓

qiita-material-design8.png

9. margin-leftとscaleを使いこなすスライドアニメーション16選

margin-leftとscaleを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

transform:scaleを使っていてわかりやすく説明もされているのでかなり重宝します

qiita-material-image9.png

↓参考記事は下の記事です↓

qiita-material-design9.png

10. hoverとfilter:brightnessを使いこなし明るさ調節するCSS画像エフェクト3選

hoverとfilter:brightnessを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

filterを使いこなすためにはまずひとつひとつ丁寧にい理解していきましょう

qiita-material-image10.png

↓参考記事は下の記事です↓

qiita-material-design10.png

11. transformを使いこなすボタンアニメーション16選

transformを使ってボタンを変形し、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

transformを全種類使っていてわかりやすく説明もされているのでかなり重宝します

css-effect-hover-button-transform-skew.png

↓参考記事は下の記事です↓

スクリーンショット 2020-07-02 16.02.15.png

12. transitionを使いこなすボタンアニメーション9選

transitionを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

box-shadowやborder-radiusをエフェクトで使用して見た目のデザインもいい感じです

hover-button-animation-color.png

↓参考記事は下の記事です↓

button-effects1.png

13. transformを使いこなすマテリアルデザイン5選

transformを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションでそのまま使えるマテリアルデザインとなっています

マテリアルデザインなのでそのまますぐにでもコピペして使用できます

css-effects-hover-button-materialdesign-3d.png

↓参考記事は下の記事です↓

スクリーンショット 2020-07-03 20.48.02.png

14. filterが網羅できるCSSボタンアニメーション15選

filterを使ってボタンにエフェクトを効かせおり、特にデザインの見た目をカッコよくしたい場合に非常に使えます

filterエフェクトを全種類使っているので永久保存版としても重宝できそうなまとめ記事になっています

勉強にもフロント開発でも役立つと思います

hover-button-animation-filter.png

↓参考記事は下の記事です↓

button-effects2.png

15. scaleでオシャレなCSSボタンアニメーション3選

transform:scaleを使ってボタンにエフェクトを効かせおり、オシャレでかっこいいボタンになっています

ボタンの背景が滑らかにスライドしたり、フワッと出てきたりするのでみているだけで面白いです

css-animation-button-diagonal.png

↓参考記事は下の記事です↓

button-effects3.png

16. ボタンでつくる回転アニメーション9選

transitionを使ってボタンが自然に回転します

ボタンが回転するって純粋に興味ありませんか?

回転扉みたいに動くんです

hover-animation-button-explain3.png

↓参考記事は下の記事です↓

button-effects4.png

17. transformを使用したスライダーアニメーション3選

translateやrotate、box-shadowも適宜使用することで様々な場面(Web制作やWebアプリケーションなど)で利用できるデザインになっています

qiita-slider-3d.png

↓参考記事は下の記事です↓

qiita-17.png

18. transform:scaleを使用したスライダーアニメーション3選

scaleでスライダー画像やナビゲーションボタンの拡大縮小を行いそれに対してアニメーションを使用しており幅広く使えるものになっています

qiita-slider-good.png

↓参考記事は下の記事です↓

qiita-18.png

19. clip path polygonを応用して2枚の画像を半々で表示するアニメーション3選

clip path polygonを応用して2枚の画像を半々(三角形)で表示するCSSアニメーション

それぞれに違った実務で使えるエフェクトがついています

qiita-clip-path-polygon.png

↓参考記事は下の記事です↓

qiita-19.png

20. hoverするとドロップダウン表示するナビゲーションメニュー3つ

hover(マウスオーバー)するとドロップダウン表示するナビゲーションメニューが3つ紹介されています

それぞれに違ったアニメーションがついていて面白いです

hover-animation-navigation-dropdown3.png

↓参考記事は下の記事です↓

qiita-20.png

21. 絶対失敗しないナビゲーションメニューサンプル3選

ナビゲーションメニューにいろいろなエフェクトがついていて使い勝手がいいです

カスタマイズもしやすいのでありがたいデザインです

matereal-design-navigation3.png

↓参考記事は下の記事です↓

qiita-21.png

22. 絶対失敗しないヘッダーデザインにコピペで使えるナビゲーションメニュー4選

ヘッダーデザインにコピペで使えるナビゲーションメニュー4選が紹介されていて、そのまま使えるマテリアルデザインなのでかなり重宝します

header-design-navigation-animation1.png

↓参考記事は下の記事です↓

qiita-22.png

23. 【まとめ】CSSだけで動きのあるナビゲーションバーデザイン3選

CSSだけで動きのあるナビゲーションバーデザイン3選が紹介されています

かなりシンプルなデザインですがシンプルだからこそ使える場所が多いと思います

navigation-bar-animation2.png

↓参考記事は下の記事です↓

qiita-23.png

▶︎▶︎画像エフェクト総まとめ

twinzvlog_yk
フロントエンドメイン/Vue.js/CSS/Rails/駆け出しエンジニアに向けてコピペだけで実装できるおもしろデザインメモ/気に入ったら使ってください/批判反論その他心ない行為を発見した場合は即座にブロックします
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした