【CSS】なぜCSSで画像にグラデーションをかける?【初心者向け】

画像にグラデーションがかかっている場合、画像が加工されているものだと思っていいませんか?なぜCSSでグラデーションをかけるのか?
ずれる心配もないので、画像加工したほうがいいのではと思っています。
という方に向けて書いた記事です。

結論から申しますと
実際はCSSでグラデーションをかけることも画像加工でグラデーションでをかけることどちらも正解です。

  • しっかり画像を見せたい → 画像加工
  • ちょっとした飾り付け → CSS

疑問を持った内容を顧問の先生に聞いた内容をまとめていますので

この記事を読んでいただき判断材料になればと思います。

グラデーションをイメージさせる画像
目次

画像にCSSでグラデーションかけることに関する悩みを解決しましょう

  • CSSでグラデーションを行う理由は加工の手間が省け、簡単にできる?
  • 著作権等で、加工がだめな場合があるから?
  • photoshopなどで加工して使用するについて 
  • 結論

CSSでグラデーションを行う理由は加工の手間が省け、簡単にできる?

Photoshopいらずでオシャレな加工ができる

CSSでの加工は、グラデーションに限らず、プロパティの数値を変えるだけで実現できたりするので、便利かなという印象です。

例え

例えば、画像の提供がクライアントから1つしかなく、色々な雰囲気を見たいと言われたりした場合は、CSSとかで作ってしまった方が簡単ですね。

注意点

注意点としては、ブラウザの対応です。

プロパティによっては、IEに対応していなかったりもするので、その辺りを気をつければ、CSSでも良いですね。

CSS加工については下記が参考サイトです。

https://ferret-plus.com/4816

著作権等で、加工がだめな場合があるから?

著作権について

著作権が理由の場合は、CSS装飾するだけでは良くありません。

著作権について詳しく書かれているサイトはこちら

https://kigyobengo.com/media/useful/148.html#i-3

photoshopなどで加工して使用するについて

photoshopで加工

photoshopなどで加工して使用するのもありだと思います。

そして、おそらく、世の中のWebサイトでもそのパターンの方が多いと思います。

photoshopでの画像加工も可能ですが無料の画像加工ソフトなどもあります、
無料画像加工ソフトについてはこちらPC携帯電話からの操作が可能です。

https://www.canva.com/

ー結論ー

実際はCSSでグラデーションをかけることも

画像加工でグラデーションでをかけることどちらも正解ですね。

しっかり画像を見せたい → 画像加工

ちょっとした飾り付け → CSS

シェアしてしあわせに

コメント

コメントする

目次
閉じる