Web上のイメージをセピア色に変える

画像の場合

HTML

  <!--左-->
<img src="image.jpg>
  <!--中央-->
<div class="sepia">
<img src="image.jpg>
</div>
  <!--右-->
<div class="gray">
<img src="image.jpg>
</div>

CSS

.sepia img{
        -ms-filter: sepia(100%);
        -webkit-filter: sepia(100%);
        -moz-filter: sepia(100%);
        filter: sepia(100%);
        }
.gray img{
        -ms-filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        filter: grayscale(100%);
        }

動画の場合

HTML

<div class="sepia">
    <video controls autoplay loop>
        <souce src ="img/video.mp4"></souce>
    </video>
</div>

CSS

.sepia {
    -ms-filter: sepia(100%);
    -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
    filter: sepia(100%);
    }

短いですが今回はこの二つのやり方について説明しました。皆さんもぜひ試してください。

---