簡単ホームページ作成ツールならAMS - まずはお試し

全国対応!まずはご相談ください 電話番号0120-55-4682

CSS3を使えば簡易Photoshopになる?

2021/5/13

CSS3を使えば簡易Photoshopになる?

CSS3のCSSフィルターを使うことで簡単に、画像の明度やコントラストを変えたり、ぼかしを入れたり、モノクロにしたりできます。

例えばこちらの画像を

.sample.img {
  filter: sepia(100%);
}
 
でsample classを入れるとこのようにセピア調になります。
100%が最大でこの数字を下げるほどセピア度が下がっていきます。

 

.
sample2.img {
  filter: brightness(200%);
}
 
でsample2 classを入れるとこのように明るくなります。
0%が真っ暗で、この数字を増やせば増やすほど明るくなります。
CSS3を使えば簡易Photoshop2




.sample3.img {
  filter: blur(5px);
}
 
でsample3 classを入れるとこのようにぼかしになります。
pxで指定でき、この数字が高いほどぼかし度が高くなります。

CSS3を使えば簡易Photoshop3


.sample4.img {
  filter: opacity(40%);
}
 
でsample4 classを入れるとこのように透明度を変えられます。
100%で不透明、0%で完全に透明になります。ホバーアクションで使ったりするケースがあるでしょう。
CSS3を使えば簡易Photoshop4



.sample5.img {
  filter: hue-rotate(90deg);
}
でsample5 classを入れると色相を回転できます。360degで一周します。全体の色相を変えたいときに使います。
CSS3を使えば簡易Photoshop5

合わせ技も可能


.sample6.img {
  filter: hue-rotate(90deg) opacity(75%) blur(5px) sepia(10%) brightness(200%);
}
 
でsample6 classを入れると同時に適用できます。まるでPhotoshopみたいですね。
CSS3を使えば簡易Photoshop6


他にもCSS3のfilterはなにかと便利なので参考になれば幸いです。
最後までお読みいただきありがとうございました。

この記事を書いたのは

株式会社AMS 取締役副社長 古倉 功一

2005年からSEOに本格的に取り組み、SEO歴は15年以上。現在はリスティング広告、SEOをメインにしたWebコンサルを提供中。好きな番組:ポケットモンスター。

  • 石川県産業創出支援機構(ISICO)「お店ばたけ」ホームページドクター
  • セミナー講師(Webマーケティング、SEO、PPC広告等)
  • ミラサポ専門家登録(派遣先からの総合評価平均 5点中4.9)
常時SSL+スマホサイト最適化の効果の出るホームページが39,800円!
【0120-55-4682】月~金曜9:00~18:00

月~金曜9:00~18:00

メールでのお問い合わせ
AMS簡単ホームページ作成ツール
あなたのサイトをPRしましょう!
AMSマニュアル
よくある質問と回答
AMSお問合わせ

月別アーカイブ