ブログパーツとか: CSSシミュレータ（filter）

【使い方】textareaの中身（値）を書き換えて色々と試してみる

①ぼかし / filter:blur()
　0px～
　初期値は「0px」

②明度（明るさ） / filter:brightness()
　0%～
　初期値は「100%」

③明暗差 / filter:contrast()
　0%～
　初期値は「100%」

④影 / filter:drop-shadow()
　影の位置（横）、影の位置（縦）、影のぼかし、影の色
　透過画像は、非透過部分の形に影が付く
　影の位置（横）：正の数が右、負の数が左
　影の位置（縦）：正の数が下、負の数が上
　影のぼかし：0pxならはっきりくっきり
　影の色：カラーコード、カラーネーム、RGB、RGBAで指定する
　初期値は「none」

⑤白黒度 / filter:grayscale()
　0～100%
　初期値は「0%」

⑥色相回転 / filter:hue-rotate()
　0deg=±360deg
　180deg=-180deg
　初期値は「0deg」

⑦階調反転 / filter:invert
　0～100%
　初期値は「0%」

⑧不透明度 / filter:opacity()
　0～100%
　初期値は「100%」

⑨彩度（鮮やかさ） / filter:saturate
　0%～
　初期値は「100%」

⑩セピア度 / filter:sepia()
　0～100%
　初期値は「0%」

HTML

<div id="filterDisplay"></div><br />

<⚠textarea style="width:99%;height:300px;font-family:monospace;" id="filterTextarea" onInput="filterSimulator();">
<style>
#filterDisplay {
    filter:blur(  0px)                               /*①ぼかし*/
           brightness(  100%)                        /*②明度（明るさ）*/
           contrast(  100%)                          /*③明暗差*/
           drop-shadow(  5px  5px  2px  #ff0000  )   /*④影*/
           grayscale(  0%)                           /*⑤白黒度*/
           hue-rotate(  0deg)                        /*⑥色相回転*/
           invert(  0%)                              /*⑦階調反転*/
           opacity(  100%)                           /*⑧不透明度*/
           saturate(  100%)                          /*⑨彩度（鮮やかさ）*/
           sepia(  0%);                              /*⑩セピア度*/
   }
</style>
<span style="font-size:20px;">🧡💛💜💙💚🤎🖤🤍<br />
いろはにほへとちりぬるを<br />
わかよたれそつねならむ<br />
うゐのおくやまけふこえて<br />
あさきゆめみしゑひもせす</span><div style="clear:both;"></div>
<⚠/textarea><!--⚠は削除する-->

JavaScript

<script>
var filterSimulator=function(){
    document.getElementById("filterDisplay").innerHTML=document.getElementById("filterTextarea").value;
   }
setTimeout("filterSimulator()",0);
</script>

2020年3月22日日曜日

CSSシミュレータ（filter）