TOP > Tech > Webサービス > This Entry
Tech

CSSで画像を加工したい時に便利な『cssfilters』

crop.jpg

画像をCSSで加工したい時に便利なサービスをご紹介。

CSS画像フィルター

モノクロやLofiなどの13種類のフィルターがある。フィルターの微調整もできる。

画像フィルターCSS

微調整が終わればCSS CODEへ。ここで得たCSSを使用する。

.filter {
  position: relative;
  -webkit-filter: contrast(79%) brightness(110%) sepia(30%) grayscale(100%);
  filter: contrast(79%) brightness(110%) sepia(30%) grayscale(100%);
}
.filter::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  background: rgba(0, 0, 0, 0);
}
画像フィルターhtml

あとはCSSでフィルターをかけたい画像をクラスで囲む。

  

まとめ

記事中の写真は加工して貼り付けた方が早いかもしれないが、ヘッダー画像などで使える。

例えば、このブログをPCで見た時のヘッダー画像のような感じで。

細かい調整が簡単にできるところも便利なので、是非お試しを。

Create custom and Instagram like photo filters for CSS
Click to Copy Title & URL

Subscribe

"The path"の更新情報をチェックできます。

Recommend

The Path
Copyright © The Path 2012-2016.