Filter

  • フィルターなし

  • グレースケール

  • 彩度

  • セピア

  • 色相変換

  • ブラー

  • 階調の反転

  • 明るさ

  • コントラスト

  • アニメーション

MDN filter

IE4時代のfilterプロパティ

IE10 : DX フィルターがサポートされなくなった

view source

JavaScript


  
CSS

  
.filters:after{
  display:block;
  content:"";
  clear:both;
}
.filters li {
  width:200px;
  float:left;
  font-size:24px;
}

.filters img{
  width:200px;
}



/* default: 0% */
.filter-grayscale{
     -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -o-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     filter: grayscale(100%);
}

/* default: 100% */
.filter-saturate{
     -webkit-filter: saturate(20%);
     -moz-filter: saturate(20%);
     -o-filter: saturate(20%);
     -ms-filter: saturate(20%);
     filter: saturate(20%);
}

/* default: 0% */
.filter-sepia{
     -webkit-filter: sepia(100%);
     -moz-filter: sepia(100%);
     -o-filter: sepia(100%);
     -ms-filter: sepia(100%);
     filter: sepia(100%);
}

/* default: 0deg */
.filter-hue-rotate{
     -webkit-filter: hue-rotate(60deg);
     -moz-filter: hue-rotate(60deg);
     -o-filter: hue-rotate(60deg);
     -ms-filter: hue-rotate(60deg);
     filter: hue-rotate(60deg);
}

/* default: 0px */
.filter-blur{
     -webkit-filter: blur(10px);
     -moz-filter: blur(10px);
     -o-filter: blur(10px);
     -ms-filter: blur(10px);
     filter: blur(10px);
}

/* default: 0% */
.filter-invert{
     -webkit-filter: invert(100%);
     -moz-filter: invert(100%);
     -o-filter: invert(100%);
     -ms-filter: invert(100%);
     filter: invert(100%);
}

/* default: 1 */
.filter-brightness{
     -webkit-filter: brightness(.4);
     -moz-filter: brightness(.4);
     -o-filter: brightness(.4);
     -ms-filter: brightness(.4);
     filter: brightness(.4);
}

/* default: 100% */
.filter-contrast{
     -webkit-filter: contrast(240%);
     -moz-filter: contrast(240%);
     -o-filter: contrast(240%);
     -ms-filter: contrast(240%);
     filter: contrast(240%);
}







/* 変化は起きるけど、じわじわ変化はせずパッと変わる */
/* blurだけじわじわ変化する */
.filter-anime{
  -webkit-animation-name:anime;
  -webkit-animation-duration:4s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
}


@-webkit-keyframes anime{
  25%{
     -webkit-filter: contrast(240%) blur(10px);
  }
  50%{
     -webkit-filter: brightness(.4);
  }
  75%{
     -webkit-filter: invert(100%);
  }
  100%{
     -webkit-filter: hue-rotate(60deg);
  }
}


  
HTML

  

    
ページのソースを表示 : Ctrl+U , DevTools : F12

    
view-source:https://hi0a.com/demo/-css/css3-filter/

  

  
ABOUT

  

    
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

    
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

    
必要な機能の関数をコピペ利用したり勉強に活用できます。

    
プログラムの動作サンプル結果は画面上部に出力表示されています。

    
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

    
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

    
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

    
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。