CSSで写真編集 第2弾

画像編集はphotoshop上で編集が一般的ですが、CSSでも編集することができます。

第1弾に引き続き、様々なTipsをご紹介いたします。

今回はfilterプロパティでの画像編集の紹介になります。

画像を暗くする

HTML

<div class="pic_06">
　　<img src="images/fruits.jpg" alt="フルーツの画像">
</div>

CSS

.pic_06 img {
    filter: brightness(0.5);
}

彩度を上げて鮮やかな画像にする

HTML

<div class="pic_07">
　　<img src="images/fruits.jpg" alt="フルーツの画像">
</div>

CSS

.pic_07 img {
    filter: saturate(300%);
}

色相環を回転させる

HTML

<div class="pic_08">
　　<img src="images/fruits.jpg" alt="フルーツの画像">
</div>

CSS

.pic_08 img {
    filter: hue-rotate(225deg);
}

明るさや彩度、色を反転

HTML

<div class="pic_09">
　　<img src="images/fruits.jpg" alt="フルーツの画像">
</div>

CSS

.pic_09 img {
    filter: invert(100%);
}

コントラストを上げる

HTML

<div class="pic_10">
　　<img src="images/fruits.jpg" alt="フルーツの画像">
</div>

CSS

.pic_10 img {
    filter: contrast(230%);
}