画像加工（CSS）

b l u r 　ぼかし
b r i g h t n e s s 　明度（明るさ）
c o n t r a s t 　明暗差
g r a y s c a l e 　白黒度
h u e - r o t a t e 　色相回転

i n v e r t 　階調反転
o p a c i t y 　不透明度
s a t u r a t e 　彩度（鮮やかさ）
s e p i a 　セピア度

CSS /*画像加工*/ input[name="blur"]#blur0:checked~#filter #blur{-webkit-filter:blur(0px);filter:blur(0px);} input[name="blur"]#blur1:checked~#filter #blur{-webkit-filter:blur(1px);filter:blur(1px);} input[name="blur"]#blur2:checked~#filter #blur{-webkit-filter:blur(2px);filter:blur(2px);} input[name="blur"]#blur3:checked~#filter #blur{-webkit-filter:blur(3px);filter:blur(3px);} input[name="blur"]#blur4:checked~#filter #blur{-webkit-filter:blur(4px);filter:blur(4px);} input[name="blur"]#blur5:checked~#filter #blur{-webkit-filter:blur(5px);filter:blur(5px);} input[name="blur"]#blur6:checked~#filter #blur{-webkit-filter:blur(6px);filter:blur(6px);} input[name="blur"]#blur7:checked~#filter #blur{-webkit-filter:blur(7px);filter:blur(7px);} input[name="blur"]#blur8:checked~#filter #blur{-webkit-filter:blur(8px);filter:blur(8px);} input[name="blur"]#blur9:checked~#filter #blur{-webkit-filter:blur(9px);filter:blur(9px);} input[name="blur"]#blur10:checked~#filter #blur{-webkit-filter:blur(10px);filter:blur(10px);} input[name="blur"]#blur11:checked~#filter #blur{-webkit-filter:blur(11px);filter:blur(11px);} input[name="blur"]#blur12:checked~#filter #blur{-webkit-filter:blur(12px);filter:blur(12px);} input[name="blur"]#blur13:checked~#filter #blur{-webkit-filter:blur(13px);filter:blur(13px);} input[name="blur"]#blur14:checked~#filter #blur{-webkit-filter:blur(14px);filter:blur(14px);} input[name="blur"]#blur15:checked~#filter #blur{-webkit-filter:blur(15px);filter:blur(15px);} input[name="blur"]#blur16:checked~#filter #blur{-webkit-filter:blur(16px);filter:blur(16px);} input[name="blur"]#blur17:checked~#filter #blur{-webkit-filter:blur(17px);filter:blur(17px);} input[name="blur"]#blur18:checked~#filter #blur{-webkit-filter:blur(18px);filter:blur(18px);} input[name="blur"]#blur19:checked~#filter #blur{-webkit-filter:blur(19px);filter:blur(19px);} input[name="blur"]#blur20:checked~#filter #blur{-webkit-filter:blur(20px);filter:blur(20px);} input[name="brightness"]#brightness0:checked~#filter #brightness{-webkit-filter:brightness(0%);filter:brightness(0%);} input[name="brightness"]#brightness1:checked~#filter #brightness{-webkit-filter:brightness(10%);filter:brightness(10%);} input[name="brightness"]#brightness2:checked~#filter #brightness{-webkit-filter:brightness(20%);filter:brightness(20%);} input[name="brightness"]#brightness3:checked~#filter #brightness{-webkit-filter:brightness(30%);filter:brightness(30%);} input[name="brightness"]#brightness4:checked~#filter #brightness{-webkit-filter:brightness(40%);filter:brightness(40%);} input[name="brightness"]#brightness5:checked~#filter #brightness{-webkit-filter:brightness(50%);filter:brightness(50%);} input[name="brightness"]#brightness6:checked~#filter #brightness{-webkit-filter:brightness(60%);filter:brightness(60%);} input[name="brightness"]#brightness7:checked~#filter #brightness{-webkit-filter:brightness(70%);filter:brightness(70%);} input[name="brightness"]#brightness8:checked~#filter #brightness{-webkit-filter:brightness(80%);filter:brightness(80%);} input[name="brightness"]#brightness9:checked~#filter #brightness{-webkit-filter:brightness(90%);filter:brightness(90%);} input[name="brightness"]#brightness10:checked~#filter #brightness{-webkit-filter:brightness(100%);filter:brightness(100%);} input[name="brightness"]#brightness11:checked~#filter #brightness{-webkit-filter:brightness(110%);filter:brightness(110%);} input[name="brightness"]#brightness12:checked~#filter #brightness{-webkit-filter:brightness(120%);filter:brightness(120%);} input[name="brightness"]#brightness13:checked~#filter #brightness{-webkit-filter:brightness(130%);filter:brightness(130%);} input[name="brightness"]#brightness14:checked~#filter #brightness{-webkit-filter:brightness(140%);filter:brightness(140%);} input[name="brightness"]#brightness15:checked~#filter #brightness{-webkit-filter:brightness(150%);filter:brightness(150%);} input[name="brightness"]#brightness16:checked~#filter #brightness{-webkit-filter:brightness(160%);filter:brightness(160%);} input[name="brightness"]#brightness17:checked~#filter #brightness{-webkit-filter:brightness(170%);filter:brightness(170%);} input[name="brightness"]#brightness18:checked~#filter #brightness{-webkit-filter:brightness(180%);filter:brightness(180%);} input[name="brightness"]#brightness19:checked~#filter #brightness{-webkit-filter:brightness(190%);filter:brightness(190%);} input[name="brightness"]#brightness20:checked~#filter #brightness{-webkit-filter:brightness(200%);filter:brightness(200%);} input[name="contrast"]#contrast0:checked~#filter #contrast{-webkit-filter:contrast(0%);filter:contrast(0%);} input[name="contrast"]#contrast1:checked~#filter #contrast{-webkit-filter:contrast(10%);filter:contrast(10%);} input[name="contrast"]#contrast2:checked~#filter #contrast{-webkit-filter:contrast(20%);filter:contrast(20%);} input[name="contrast"]#contrast3:checked~#filter #contrast{-webkit-filter:contrast(30%);filter:contrast(30%);} input[name="contrast"]#contrast4:checked~#filter #contrast{-webkit-filter:contrast(40%);filter:contrast(40%);} input[name="contrast"]#contrast5:checked~#filter #contrast{-webkit-filter:contrast(50%);filter:contrast(50%);} input[name="contrast"]#contrast6:checked~#filter #contrast{-webkit-filter:contrast(60%);filter:contrast(60%);} input[name="contrast"]#contrast7:checked~#filter #contrast{-webkit-filter:contrast(70%);filter:contrast(70%);} input[name="contrast"]#contrast8:checked~#filter #contrast{-webkit-filter:contrast(80%);filter:contrast(80%);} input[name="contrast"]#contrast9:checked~#filter #contrast{-webkit-filter:contrast(90%);filter:contrast(90%);} input[name="contrast"]#contrast10:checked~#filter #contrast{-webkit-filter:contrast(100%);filter:contrast(100%);} input[name="contrast"]#contrast11:checked~#filter #contrast{-webkit-filter:contrast(110%);filter:contrast(110%);} input[name="contrast"]#contrast12:checked~#filter #contrast{-webkit-filter:contrast(120%);filter:contrast(120%);} input[name="contrast"]#contrast13:checked~#filter #contrast{-webkit-filter:contrast(130%);filter:contrast(130%);} input[name="contrast"]#contrast14:checked~#filter #contrast{-webkit-filter:contrast(140%);filter:contrast(140%);} input[name="contrast"]#contrast15:checked~#filter #contrast{-webkit-filter:contrast(150%);filter:contrast(150%);} input[name="contrast"]#contrast16:checked~#filter #contrast{-webkit-filter:contrast(160%);filter:contrast(160%);} input[name="contrast"]#contrast17:checked~#filter #contrast{-webkit-filter:contrast(170%);filter:contrast(170%);} input[name="contrast"]#contrast18:checked~#filter #contrast{-webkit-filter:contrast(180%);filter:contrast(180%);} input[name="contrast"]#contrast19:checked~#filter #contrast{-webkit-filter:contrast(190%);filter:contrast(190%);} input[name="contrast"]#contrast20:checked~#filter #contrast{-webkit-filter:contrast(200%);filter:contrast(200%);} input[name="grayscale"]#grayscale0:checked~#filter #grayscale{-webkit-filter:grayscale(0%);filter:grayscale(0%);} input[name="grayscale"]#grayscale1:checked~#filter #grayscale{-webkit-filter:grayscale(10%);filter:grayscale(10%);} input[name="grayscale"]#grayscale2:checked~#filter #grayscale{-webkit-filter:grayscale(20%);filter:grayscale(20%);} input[name="grayscale"]#grayscale3:checked~#filter #grayscale{-webkit-filter:grayscale(30%);filter:grayscale(30%);} input[name="grayscale"]#grayscale4:checked~#filter #grayscale{-webkit-filter:grayscale(40%);filter:grayscale(40%);} input[name="grayscale"]#grayscale5:checked~#filter #grayscale{-webkit-filter:grayscale(50%);filter:grayscale(50%);} input[name="grayscale"]#grayscale6:checked~#filter #grayscale{-webkit-filter:grayscale(60%);filter:grayscale(60%);} input[name="grayscale"]#grayscale7:checked~#filter #grayscale{-webkit-filter:grayscale(70%);filter:grayscale(70%);} input[name="grayscale"]#grayscale8:checked~#filter #grayscale{-webkit-filter:grayscale(80%);filter:grayscale(80%);} input[name="grayscale"]#grayscale9:checked~#filter #grayscale{-webkit-filter:grayscale(90%);filter:grayscale(90%);} input[name="grayscale"]#grayscale10:checked~#filter #grayscale{-webkit-filter:grayscale(100%);filter:grayscale(100%);} input[name="hue-rotate"]#hue-rotate0:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg);} input[name="hue-rotate"]#hue-rotate1:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(10deg);filter:hue-rotate(10deg);} input[name="hue-rotate"]#hue-rotate2:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(20deg);filter:hue-rotate(20deg);} input[name="hue-rotate"]#hue-rotate3:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(30deg);filter:hue-rotate(30deg);} input[name="hue-rotate"]#hue-rotate4:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(40deg);filter:hue-rotate(40deg);} input[name="hue-rotate"]#hue-rotate5:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(50deg);filter:hue-rotate(50deg);} input[name="hue-rotate"]#hue-rotate6:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(60deg);filter:hue-rotate(60deg);} input[name="hue-rotate"]#hue-rotate7:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(70deg);filter:hue-rotate(70deg);} input[name="hue-rotate"]#hue-rotate8:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(80deg);filter:hue-rotate(80deg);} input[name="hue-rotate"]#hue-rotate9:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(90deg);filter:hue-rotate(90deg);} input[name="hue-rotate"]#hue-rotate10:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(100deg);filter:hue-rotate(100deg);} input[name="hue-rotate"]#hue-rotate11:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(110deg);filter:hue-rotate(110deg);} input[name="hue-rotate"]#hue-rotate12:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(120deg);filter:hue-rotate(120deg);} input[name="hue-rotate"]#hue-rotate13:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(130deg);filter:hue-rotate(130deg);} input[name="hue-rotate"]#hue-rotate14:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(140deg);filter:hue-rotate(140deg);} input[name="hue-rotate"]#hue-rotate15:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(150deg);filter:hue-rotate(150deg);} input[name="hue-rotate"]#hue-rotate16:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(160deg);filter:hue-rotate(160deg);} input[name="hue-rotate"]#hue-rotate17:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(170deg);filter:hue-rotate(170deg);} input[name="hue-rotate"]#hue-rotate18:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(180deg);filter:hue-rotate(180deg);} input[name="hue-rotate"]#hue-rotate19:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(190deg);filter:hue-rotate(190deg);} input[name="hue-rotate"]#hue-rotate20:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(200deg);filter:hue-rotate(200deg);} input[name="hue-rotate"]#hue-rotate21:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(210deg);filter:hue-rotate(210deg);} input[name="hue-rotate"]#hue-rotate22:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(220deg);filter:hue-rotate(220deg);} input[name="hue-rotate"]#hue-rotate23:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(230deg);filter:hue-rotate(230deg);} input[name="hue-rotate"]#hue-rotate24:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(240deg);filter:hue-rotate(240deg);} input[name="hue-rotate"]#hue-rotate25:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(250deg);filter:hue-rotate(250deg);} input[name="hue-rotate"]#hue-rotate26:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(260deg);filter:hue-rotate(260deg);} input[name="hue-rotate"]#hue-rotate27:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(270deg);filter:hue-rotate(270deg);} input[name="hue-rotate"]#hue-rotate28:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(280deg);filter:hue-rotate(280deg);} input[name="hue-rotate"]#hue-rotate29:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(290deg);filter:hue-rotate(290deg);} input[name="hue-rotate"]#hue-rotate30:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(300deg);filter:hue-rotate(300deg);} input[name="hue-rotate"]#hue-rotate31:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(310deg);filter:hue-rotate(310deg);} input[name="hue-rotate"]#hue-rotate32:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(320deg);filter:hue-rotate(320deg);} input[name="hue-rotate"]#hue-rotate33:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(330deg);filter:hue-rotate(330deg);} input[name="hue-rotate"]#hue-rotate34:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(340deg);filter:hue-rotate(340deg);} input[name="hue-rotate"]#hue-rotate35:checked~#filter #hue-rotate{-webkit-filter:hue-rotate(350deg);filter:hue-rotate(350deg);} input[name="invert"]#invert0:checked~#filter #invert{-webkit-filter:invert(0%);filter:invert(0%);} input[name="invert"]#invert1:checked~#filter #invert{-webkit-filter:invert(10%);filter:invert(10%);} input[name="invert"]#invert2:checked~#filter #invert{-webkit-filter:invert(20%);filter:invert(20%);} input[name="invert"]#invert3:checked~#filter #invert{-webkit-filter:invert(30%);filter:invert(30%);} input[name="invert"]#invert4:checked~#filter #invert{-webkit-filter:invert(40%);filter:invert(40%);} input[name="invert"]#invert5:checked~#filter #invert{-webkit-filter:invert(50%);filter:invert(50%);} input[name="invert"]#invert6:checked~#filter #invert{-webkit-filter:invert(60%);filter:invert(60%);} input[name="invert"]#invert7:checked~#filter #invert{-webkit-filter:invert(70%);filter:invert(70%);} input[name="invert"]#invert8:checked~#filter #invert{-webkit-filter:invert(80%);filter:invert(80%);} input[name="invert"]#invert9:checked~#filter #invert{-webkit-filter:invert(90%);filter:invert(90%);} input[name="invert"]#invert10:checked~#filter #invert{-webkit-filter:invert(100%);filter:invert(100%);} input[name="opacity"]#opacity0:checked~#filter #opacity{-webkit-filter:opacity(0%);filter:opacity(0%);} input[name="opacity"]#opacity1:checked~#filter #opacity{-webkit-filter:opacity(10%);filter:opacity(10%);} input[name="opacity"]#opacity2:checked~#filter #opacity{-webkit-filter:opacity(20%);filter:opacity(20%);} input[name="opacity"]#opacity3:checked~#filter #opacity{-webkit-filter:opacity(30%);filter:opacity(30%);} input[name="opacity"]#opacity4:checked~#filter #opacity{-webkit-filter:opacity(40%);filter:opacity(40%);} input[name="opacity"]#opacity5:checked~#filter #opacity{-webkit-filter:opacity(50%);filter:opacity(50%);} input[name="opacity"]#opacity6:checked~#filter #opacity{-webkit-filter:opacity(60%);filter:opacity(60%);} input[name="opacity"]#opacity7:checked~#filter #opacity{-webkit-filter:opacity(70%);filter:opacity(70%);} input[name="opacity"]#opacity8:checked~#filter #opacity{-webkit-filter:opacity(80%);filter:opacity(80%);} input[name="opacity"]#opacity9:checked~#filter #opacity{-webkit-filter:opacity(90%);filter:opacity(90%);} input[name="opacity"]#opacity10:checked~#filter #opacity{-webkit-filter:opacity(100%);filter:opacity(100%);} input[name="saturate"]#saturate0:checked~#filter #saturate{-webkit-filter:saturate(0%);filter:saturate(0%);} input[name="saturate"]#saturate1:checked~#filter #saturate{-webkit-filter:saturate(10%);filter:saturate(10%);} input[name="saturate"]#saturate2:checked~#filter #saturate{-webkit-filter:saturate(20%);filter:saturate(20%);} input[name="saturate"]#saturate3:checked~#filter #saturate{-webkit-filter:saturate(30%);filter:saturate(30%);} input[name="saturate"]#saturate4:checked~#filter #saturate{-webkit-filter:saturate(40%);filter:saturate(40%);} input[name="saturate"]#saturate5:checked~#filter #saturate{-webkit-filter:saturate(50%);filter:saturate(50%);} input[name="saturate"]#saturate6:checked~#filter #saturate{-webkit-filter:saturate(60%);filter:saturate(60%);} input[name="saturate"]#saturate7:checked~#filter #saturate{-webkit-filter:saturate(70%);filter:saturate(70%);} input[name="saturate"]#saturate8:checked~#filter #saturate{-webkit-filter:saturate(80%);filter:saturate(80%);} input[name="saturate"]#saturate9:checked~#filter #saturate{-webkit-filter:saturate(90%);filter:saturate(90%);} input[name="saturate"]#saturate10:checked~#filter #saturate{-webkit-filter:saturate(100%);filter:saturate(100%);} input[name="saturate"]#saturate11:checked~#filter #saturate{-webkit-filter:saturate(110%);filter:saturate(110%);} input[name="saturate"]#saturate12:checked~#filter #saturate{-webkit-filter:saturate(120%);filter:saturate(120%);} input[name="saturate"]#saturate13:checked~#filter #saturate{-webkit-filter:saturate(130%);filter:saturate(130%);} input[name="saturate"]#saturate14:checked~#filter #saturate{-webkit-filter:saturate(140%);filter:saturate(140%);} input[name="saturate"]#saturate15:checked~#filter #saturate{-webkit-filter:saturate(150%);filter:saturate(150%);} input[name="saturate"]#saturate16:checked~#filter #saturate{-webkit-filter:saturate(160%);filter:saturate(160%);} input[name="saturate"]#saturate17:checked~#filter #saturate{-webkit-filter:saturate(170%);filter:saturate(170%);} input[name="saturate"]#saturate18:checked~#filter #saturate{-webkit-filter:saturate(180%);filter:saturate(180%);} input[name="saturate"]#saturate19:checked~#filter #saturate{-webkit-filter:saturate(190%);filter:saturate(190%);} input[name="saturate"]#saturate20:checked~#filter #saturate{-webkit-filter:saturate(200%);filter:saturate(200%);} input[name="sepia"]#sepia0:checked~#filter #sepia{-webkit-filter:sepia(0%);filter:sepia(0%);} input[name="sepia"]#sepia1:checked~#filter #sepia{-webkit-filter:sepia(10%);filter:sepia(10%);} input[name="sepia"]#sepia2:checked~#filter #sepia{-webkit-filter:sepia(20%);filter:sepia(20%);} input[name="sepia"]#sepia3:checked~#filter #sepia{-webkit-filter:sepia(30%);filter:sepia(30%);} input[name="sepia"]#sepia4:checked~#filter #sepia{-webkit-filter:sepia(40%);filter:sepia(40%);} input[name="sepia"]#sepia5:checked~#filter #sepia{-webkit-filter:sepia(50%);filter:sepia(50%);} input[name="sepia"]#sepia6:checked~#filter #sepia{-webkit-filter:sepia(60%);filter:sepia(60%);} input[name="sepia"]#sepia7:checked~#filter #sepia{-webkit-filter:sepia(70%);filter:sepia(70%);} input[name="sepia"]#sepia8:checked~#filter #sepia{-webkit-filter:sepia(80%);filter:sepia(80%);} input[name="sepia"]#sepia9:checked~#filter #sepia{-webkit-filter:sepia(90%);filter:sepia(90%);} input[name="sepia"]#sepia10:checked~#filter #sepia{-webkit-filter:sepia(100%);filter:sepia(100%);} /*ラジオボタン*/ input[name="blur"], input[name="brightness"], input[name="contrast"], input[name="grayscale"], input[name="hue-rotate"], input[name="invert"], input[name="opacity"], input[name="saturate"], input[name="sepia"] {display:none;} /*ラベルボタン*/ label.filter { display:inline-block; width:20px; height:20px; border-radius:50%; vertical-align:top; text-align:center; line-height:20px; color:white; margin-bottom:3px; } label.blur, label.contrast, label.hue-rotate, label.opacity, label.sepia { background-color:chocolate; } label.brightness, label.grayscale, label.invert, label.saturate { background-color:olive; } /*ラベルボタン　未加工*/ label.blur0, label.brightness10, label.contrast10, label.grayscale0, label.hue-rotate0, label.invert0, label.opacity10, label.saturate10, label.sepia0 {background-color:dodgerblue;} /*ラベルボタン　適用中*/ input#blur0:checked~label.blur0, input#blur1:checked~label.blur1, input#blur2:checked~label.blur2, input#blur3:checked~label.blur3, input#blur4:checked~label.blur4, input#blur5:checked~label.blur5, input#blur6:checked~label.blur6, input#blur7:checked~label.blur7, input#blur8:checked~label.blur8, input#blur9:checked~label.blur9, input#blur10:checked~label.blur10, input#blur11:checked~label.blur11, input#blur12:checked~label.blur12, input#blur13:checked~label.blur13, input#blur14:checked~label.blur14, input#blur15:checked~label.blur15, input#blur16:checked~label.blur16, input#blur17:checked~label.blur17, input#blur18:checked~label.blur18, input#blur19:checked~label.blur19, input#blur20:checked~label.blur20, input#brightness0:checked~label.brightness0, input#brightness1:checked~label.brightness1, input#brightness2:checked~label.brightness2, input#brightness3:checked~label.brightness3, input#brightness4:checked~label.brightness4, input#brightness5:checked~label.brightness5, input#brightness6:checked~label.brightness6, input#brightness7:checked~label.brightness7, input#brightness8:checked~label.brightness8, input#brightness9:checked~label.brightness9, input#brightness10:checked~label.brightness10, input#brightness11:checked~label.brightness11, input#brightness12:checked~label.brightness12, input#brightness13:checked~label.brightness13, input#brightness14:checked~label.brightness14, input#brightness15:checked~label.brightness15, input#brightness16:checked~label.brightness16, input#brightness17:checked~label.brightness17, input#brightness18:checked~label.brightness18, input#brightness19:checked~label.brightness19, input#brightness20:checked~label.brightness20, input#contrast0:checked~label.contrast0, input#contrast1:checked~label.contrast1, input#contrast2:checked~label.contrast2, input#contrast3:checked~label.contrast3, input#contrast4:checked~label.contrast4, input#contrast5:checked~label.contrast5, input#contrast6:checked~label.contrast6, input#contrast7:checked~label.contrast7, input#contrast8:checked~label.contrast8, input#contrast9:checked~label.contrast9, input#contrast10:checked~label.contrast10, input#contrast11:checked~label.contrast11, input#contrast12:checked~label.contrast12, input#contrast13:checked~label.contrast13, input#contrast14:checked~label.contrast14, input#contrast15:checked~label.contrast15, input#contrast16:checked~label.contrast16, input#contrast17:checked~label.contrast17, input#contrast18:checked~label.contrast18, input#contrast19:checked~label.contrast19, input#contrast20:checked~label.contrast20, input#grayscale0:checked~label.grayscale0, input#grayscale1:checked~label.grayscale1, input#grayscale2:checked~label.grayscale2, input#grayscale3:checked~label.grayscale3, input#grayscale4:checked~label.grayscale4, input#grayscale5:checked~label.grayscale5, input#grayscale6:checked~label.grayscale6, input#grayscale7:checked~label.grayscale7, input#grayscale8:checked~label.grayscale8, input#grayscale9:checked~label.grayscale9, input#grayscale10:checked~label.grayscale10, input#hue-rotate0:checked~label.hue-rotate0, input#hue-rotate1:checked~label.hue-rotate1, input#hue-rotate2:checked~label.hue-rotate2, input#hue-rotate3:checked~label.hue-rotate3, input#hue-rotate4:checked~label.hue-rotate4, input#hue-rotate5:checked~label.hue-rotate5, input#hue-rotate6:checked~label.hue-rotate6, input#hue-rotate7:checked~label.hue-rotate7, input#hue-rotate8:checked~label.hue-rotate8, input#hue-rotate9:checked~label.hue-rotate9, input#hue-rotate10:checked~label.hue-rotate10, input#hue-rotate11:checked~label.hue-rotate11, input#hue-rotate12:checked~label.hue-rotate12, input#hue-rotate13:checked~label.hue-rotate13, input#hue-rotate14:checked~label.hue-rotate14, input#hue-rotate15:checked~label.hue-rotate15, input#hue-rotate16:checked~label.hue-rotate16, input#hue-rotate17:checked~label.hue-rotate17, input#hue-rotate18:checked~label.hue-rotate18, input#hue-rotate19:checked~label.hue-rotate19, input#hue-rotate20:checked~label.hue-rotate20, input#hue-rotate21:checked~label.hue-rotate21, input#hue-rotate22:checked~label.hue-rotate22, input#hue-rotate23:checked~label.hue-rotate23, input#hue-rotate24:checked~label.hue-rotate24, input#hue-rotate25:checked~label.hue-rotate25, input#hue-rotate26:checked~label.hue-rotate26, input#hue-rotate27:checked~label.hue-rotate27, input#hue-rotate28:checked~label.hue-rotate28, input#hue-rotate29:checked~label.hue-rotate29, input#hue-rotate30:checked~label.hue-rotate30, input#hue-rotate31:checked~label.hue-rotate31, input#hue-rotate32:checked~label.hue-rotate32, input#hue-rotate33:checked~label.hue-rotate33, input#hue-rotate34:checked~label.hue-rotate34, input#hue-rotate35:checked~label.hue-rotate35, input#invert0:checked~label.invert0, input#invert1:checked~label.invert1, input#invert2:checked~label.invert2, input#invert3:checked~label.invert3, input#invert4:checked~label.invert4, input#invert5:checked~label.invert5, input#invert6:checked~label.invert6, input#invert7:checked~label.invert7, input#invert8:checked~label.invert8, input#invert9:checked~label.invert9, input#invert10:checked~label.invert10, input#opacity0:checked~label.opacity0, input#opacity1:checked~label.opacity1, input#opacity2:checked~label.opacity2, input#opacity3:checked~label.opacity3, input#opacity4:checked~label.opacity4, input#opacity5:checked~label.opacity5, input#opacity6:checked~label.opacity6, input#opacity7:checked~label.opacity7, input#opacity8:checked~label.opacity8, input#opacity9:checked~label.opacity9, input#opacity10:checked~label.opacity10, input#saturate0:checked~label.saturate0, input#saturate1:checked~label.saturate1, input#saturate2:checked~label.saturate2, input#saturate3:checked~label.saturate3, input#saturate4:checked~label.saturate4, input#saturate5:checked~label.saturate5, input#saturate6:checked~label.saturate6, input#saturate7:checked~label.saturate7, input#saturate8:checked~label.saturate8, input#saturate9:checked~label.saturate9, input#saturate10:checked~label.saturate10, input#saturate11:checked~label.saturate11, input#saturate12:checked~label.saturate12, input#saturate13:checked~label.saturate13, input#saturate14:checked~label.saturate14, input#saturate15:checked~label.saturate15, input#saturate16:checked~label.saturate16, input#saturate17:checked~label.saturate17, input#saturate18:checked~label.saturate18, input#saturate19:checked~label.saturate19, input#saturate20:checked~label.saturate20, input#sepia0:checked~label.sepia0, input#sepia1:checked~label.sepia1, input#sepia2:checked~label.sepia2, input#sepia3:checked~label.sepia3, input#sepia4:checked~label.sepia4, input#sepia5:checked~label.sepia5, input#sepia6:checked~label.sepia6, input#sepia7:checked~label.sepia7, input#sepia8:checked~label.sepia8, input#sepia9:checked~label.sepia9, input#sepia10:checked~label.sepia10 {background-color:black;} /*ラベルボタン　ツールチップ*/ label.filter {position:relative;} label.filter:hover::before { content:attr(data-tooltip); width:160px; background-color:black; color:white; padding:5px 10px; position:absolute; top:-57px; left:-5px; } label.filter:hover::after { content:""; display:block; width:0; height:0; border-top:28px solid black; border-right:3px solid transparent; border-left:3px solid transparent; position:absolute; top:-28px; left:0; }

HTML <div id="photoshop"> <input checked="checked" id="blur0" name="blur" type="radio" /> <input id="blur1" name="blur" type="radio" /> <input id="blur2" name="blur" type="radio" /> <input id="blur3" name="blur" type="radio" /> <input id="blur4" name="blur" type="radio" /> <input id="blur5" name="blur" type="radio" /> <input id="blur6" name="blur" type="radio" /> <input id="blur7" name="blur" type="radio" /> <input id="blur8" name="blur" type="radio" /> <input id="blur9" name="blur" type="radio" /> <input id="blur10" name="blur" type="radio" /> <input id="blur11" name="blur" type="radio" /> <input id="blur12" name="blur" type="radio" /> <input id="blur13" name="blur" type="radio" /> <input id="blur14" name="blur" type="radio" /> <input id="blur15" name="blur" type="radio" /> <input id="blur16" name="blur" type="radio" /> <input id="blur17" name="blur" type="radio" /> <input id="blur18" name="blur" type="radio" /> <input id="blur19" name="blur" type="radio" /> <input id="blur20" name="blur" type="radio" /> <input id="brightness0" name="brightness" type="radio" /> <input id="brightness1" name="brightness" type="radio" /> <input id="brightness2" name="brightness" type="radio" /> <input id="brightness3" name="brightness" type="radio" /> <input id="brightness4" name="brightness" type="radio" /> <input id="brightness5" name="brightness" type="radio" /> <input id="brightness6" name="brightness" type="radio" /> <input id="brightness7" name="brightness" type="radio" /> <input id="brightness8" name="brightness" type="radio" /> <input id="brightness9" name="brightness" type="radio" /> <input checked="checked" id="brightness10" name="brightness" type="radio" /> <input id="brightness11" name="brightness" type="radio" /> <input id="brightness12" name="brightness" type="radio" /> <input id="brightness13" name="brightness" type="radio" /> <input id="brightness14" name="brightness" type="radio" /> <input id="brightness15" name="brightness" type="radio" /> <input id="brightness16" name="brightness" type="radio" /> <input id="brightness17" name="brightness" type="radio" /> <input id="brightness18" name="brightness" type="radio" /> <input id="brightness19" name="brightness" type="radio" /> <input id="brightness20" name="brightness" type="radio" /> <input id="contrast0" name="contrast" type="radio" /> <input id="contrast1" name="contrast" type="radio" /> <input id="contrast2" name="contrast" type="radio" /> <input id="contrast3" name="contrast" type="radio" /> <input id="contrast4" name="contrast" type="radio" /> <input id="contrast5" name="contrast" type="radio" /> <input id="contrast6" name="contrast" type="radio" /> <input id="contrast7" name="contrast" type="radio" /> <input id="contrast8" name="contrast" type="radio" /> <input id="contrast9" name="contrast" type="radio" /> <input checked="checked" id="contrast10" name="contrast" type="radio" /> <input id="contrast11" name="contrast" type="radio" /> <input id="contrast12" name="contrast" type="radio" /> <input id="contrast13" name="contrast" type="radio" /> <input id="contrast14" name="contrast" type="radio" /> <input id="contrast15" name="contrast" type="radio" /> <input id="contrast16" name="contrast" type="radio" /> <input id="contrast17" name="contrast" type="radio" /> <input id="contrast18" name="contrast" type="radio" /> <input id="contrast19" name="contrast" type="radio" /> <input id="contrast20" name="contrast" type="radio" /> <input checked="checked" id="grayscale0" name="grayscale" type="radio" /> <input id="grayscale1" name="grayscale" type="radio" /> <input id="grayscale2" name="grayscale" type="radio" /> <input id="grayscale3" name="grayscale" type="radio" /> <input id="grayscale4" name="grayscale" type="radio" /> <input id="grayscale5" name="grayscale" type="radio" /> <input id="grayscale6" name="grayscale" type="radio" /> <input id="grayscale7" name="grayscale" type="radio" /> <input id="grayscale8" name="grayscale" type="radio" /> <input id="grayscale9" name="grayscale" type="radio" /> <input id="grayscale10" name="grayscale" type="radio" /> <input checked="checked" id="hue-rotate0" name="hue-rotate" type="radio" /> <input id="hue-rotate1" name="hue-rotate" type="radio" /> <input id="hue-rotate2" name="hue-rotate" type="radio" /> <input id="hue-rotate3" name="hue-rotate" type="radio" /> <input id="hue-rotate4" name="hue-rotate" type="radio" /> <input id="hue-rotate5" name="hue-rotate" type="radio" /> <input id="hue-rotate6" name="hue-rotate" type="radio" /> <input id="hue-rotate7" name="hue-rotate" type="radio" /> <input id="hue-rotate8" name="hue-rotate" type="radio" /> <input id="hue-rotate9" name="hue-rotate" type="radio" /> <input id="hue-rotate10" name="hue-rotate" type="radio" /> <input id="hue-rotate11" name="hue-rotate" type="radio" /> <input id="hue-rotate12" name="hue-rotate" type="radio" /> <input id="hue-rotate13" name="hue-rotate" type="radio" /> <input id="hue-rotate14" name="hue-rotate" type="radio" /> <input id="hue-rotate15" name="hue-rotate" type="radio" /> <input id="hue-rotate16" name="hue-rotate" type="radio" /> <input id="hue-rotate17" name="hue-rotate" type="radio" /> <input id="hue-rotate18" name="hue-rotate" type="radio" /> <input id="hue-rotate19" name="hue-rotate" type="radio" /> <input id="hue-rotate20" name="hue-rotate" type="radio" /> <input id="hue-rotate21" name="hue-rotate" type="radio" /> <input id="hue-rotate22" name="hue-rotate" type="radio" /> <input id="hue-rotate23" name="hue-rotate" type="radio" /> <input id="hue-rotate24" name="hue-rotate" type="radio" /> <input id="hue-rotate25" name="hue-rotate" type="radio" /> <input id="hue-rotate26" name="hue-rotate" type="radio" /> <input id="hue-rotate27" name="hue-rotate" type="radio" /> <input id="hue-rotate28" name="hue-rotate" type="radio" /> <input id="hue-rotate29" name="hue-rotate" type="radio" /> <input id="hue-rotate30" name="hue-rotate" type="radio" /> <input id="hue-rotate31" name="hue-rotate" type="radio" /> <input id="hue-rotate32" name="hue-rotate" type="radio" /> <input id="hue-rotate33" name="hue-rotate" type="radio" /> <input id="hue-rotate34" name="hue-rotate" type="radio" /> <input id="hue-rotate35" name="hue-rotate" type="radio" /> <input checked="checked" id="invert0" name="invert" type="radio" /> <input id="invert1" name="invert" type="radio" /> <input id="invert2" name="invert" type="radio" /> <input id="invert3" name="invert" type="radio" /> <input id="invert4" name="invert" type="radio" /> <input id="invert5" name="invert" type="radio" /> <input id="invert6" name="invert" type="radio" /> <input id="invert7" name="invert" type="radio" /> <input id="invert8" name="invert" type="radio" /> <input id="invert9" name="invert" type="radio" /> <input id="invert10" name="invert" type="radio" /> <input id="opacity0" name="opacity" type="radio" /> <input id="opacity1" name="opacity" type="radio" /> <input id="opacity2" name="opacity" type="radio" /> <input id="opacity3" name="opacity" type="radio" /> <input id="opacity4" name="opacity" type="radio" /> <input id="opacity5" name="opacity" type="radio" /> <input id="opacity6" name="opacity" type="radio" /> <input id="opacity7" name="opacity" type="radio" /> <input id="opacity8" name="opacity" type="radio" /> <input id="opacity9" name="opacity" type="radio" /> <input checked="checked" id="opacity10" name="opacity" type="radio" /> <input id="saturate0" name="saturate" type="radio" /> <input id="saturate1" name="saturate" type="radio" /> <input id="saturate2" name="saturate" type="radio" /> <input id="saturate3" name="saturate" type="radio" /> <input id="saturate4" name="saturate" type="radio" /> <input id="saturate5" name="saturate" type="radio" /> <input id="saturate6" name="saturate" type="radio" /> <input id="saturate7" name="saturate" type="radio" /> <input id="saturate8" name="saturate" type="radio" /> <input id="saturate9" name="saturate" type="radio" /> <input checked="checked" id="saturate10" name="saturate" type="radio" /> <input id="saturate11" name="saturate" type="radio" /> <input id="saturate12" name="saturate" type="radio" /> <input id="saturate13" name="saturate" type="radio" /> <input id="saturate14" name="saturate" type="radio" /> <input id="saturate15" name="saturate" type="radio" /> <input id="saturate16" name="saturate" type="radio" /> <input id="saturate17" name="saturate" type="radio" /> <input id="saturate18" name="saturate" type="radio" /> <input id="saturate19" name="saturate" type="radio" /> <input id="saturate20" name="saturate" type="radio" /> <input checked="checked" id="sepia0" name="sepia" type="radio" /> <input id="sepia1" name="sepia" type="radio" /> <input id="sepia2" name="sepia" type="radio" /> <input id="sepia3" name="sepia" type="radio" /> <input id="sepia4" name="sepia" type="radio" /> <input id="sepia5" name="sepia" type="radio" /> <input id="sepia6" name="sepia" type="radio" /> <input id="sepia7" name="sepia" type="radio" /> <input id="sepia8" name="sepia" type="radio" /> <input id="sepia9" name="sepia" type="radio" /> <input id="sepia10" name="sepia" type="radio" /> <label class="filter blur blur0" data-tooltip="0px" for="blur0">b</label> <label class="filter blur blur1" data-tooltip="1px" for="blur1">l</label> <label class="filter blur blur2" data-tooltip="2px" for="blur2">u</label> <label class="filter blur blur3" data-tooltip="3px" for="blur3">r</label> <label class="filter blur blur4" data-tooltip="4px" for="blur4"></label> <label class="filter blur blur5" data-tooltip="5px" for="blur5"></label> <label class="filter blur blur6" data-tooltip="6px" for="blur6"></label> <label class="filter blur blur7" data-tooltip="7px" for="blur7"></label> <label class="filter blur blur8" data-tooltip="8px" for="blur8"></label> <label class="filter blur blur9" data-tooltip="9px" for="blur9"></label> <label class="filter blur blur10" data-tooltip="10px" for="blur10"></label> <label class="filter blur blur11" data-tooltip="11px" for="blur11"></label> <label class="filter blur blur12" data-tooltip="12px" for="blur12"></label> <label class="filter blur blur13" data-tooltip="13px" for="blur13"></label> <label class="filter blur blur14" data-tooltip="14px" for="blur14"></label> <label class="filter blur blur15" data-tooltip="15px" for="blur15"></label> <label class="filter blur blur16" data-tooltip="16px" for="blur16"></label> <label class="filter blur blur17" data-tooltip="17px" for="blur17"></label> <label class="filter blur blur18" data-tooltip="18px" for="blur18"></label> <label class="filter blur blur19" data-tooltip="19px" for="blur19"></label> <label class="filter blur blur20" data-tooltip="20px" for="blur20"></label>　ぼかし<br /> <label class="filter brightness brightness0" data-tooltip="0%" for="brightness0">b</label> <label class="filter brightness brightness1" data-tooltip="10%" for="brightness1">r</label> <label class="filter brightness brightness2" data-tooltip="20%" for="brightness2">i</label> <label class="filter brightness brightness3" data-tooltip="30%" for="brightness3">g</label> <label class="filter brightness brightness4" data-tooltip="40%" for="brightness4">h</label> <label class="filter brightness brightness5" data-tooltip="50%" for="brightness5">t</label> <label class="filter brightness brightness6" data-tooltip="60%" for="brightness6">n</label> <label class="filter brightness brightness7" data-tooltip="70%" for="brightness7">e</label> <label class="filter brightness brightness8" data-tooltip="80%" for="brightness8">s</label> <label class="filter brightness brightness9" data-tooltip="90%" for="brightness9">s</label> <label class="filter brightness brightness10" data-tooltip="100%" for="brightness10"></label> <label class="filter brightness brightness11" data-tooltip="110%" for="brightness11"></label> <label class="filter brightness brightness12" data-tooltip="120%" for="brightness12"></label> <label class="filter brightness brightness13" data-tooltip="130%" for="brightness13"></label> <label class="filter brightness brightness14" data-tooltip="140%" for="brightness14"></label> <label class="filter brightness brightness15" data-tooltip="150%" for="brightness15"></label> <label class="filter brightness brightness16" data-tooltip="160%" for="brightness16"></label> <label class="filter brightness brightness17" data-tooltip="170%" for="brightness17"></label> <label class="filter brightness brightness18" data-tooltip="180%" for="brightness18"></label> <label class="filter brightness brightness19" data-tooltip="190%" for="brightness19"></label> <label class="filter brightness brightness20" data-tooltip="200%" for="brightness20"></label>　明度（明るさ）<br /> <label class="filter contrast contrast0" data-tooltip="0%" for="contrast0">c</label> <label class="filter contrast contrast1" data-tooltip="10%" for="contrast1">o</label> <label class="filter contrast contrast2" data-tooltip="20%" for="contrast2">n</label> <label class="filter contrast contrast3" data-tooltip="30%" for="contrast3">t</label> <label class="filter contrast contrast4" data-tooltip="40%" for="contrast4">r</label> <label class="filter contrast contrast5" data-tooltip="50%" for="contrast5">a</label> <label class="filter contrast contrast6" data-tooltip="60%" for="contrast6">s</label> <label class="filter contrast contrast7" data-tooltip="70%" for="contrast7">t</label> <label class="filter contrast contrast8" data-tooltip="80%" for="contrast8"></label> <label class="filter contrast contrast9" data-tooltip="90%" for="contrast9"></label> <label class="filter contrast contrast10" data-tooltip="100%" for="contrast10"></label> <label class="filter contrast contrast11" data-tooltip="110%" for="contrast11"></label> <label class="filter contrast contrast12" data-tooltip="120%" for="contrast12"></label> <label class="filter contrast contrast13" data-tooltip="130%" for="contrast13"></label> <label class="filter contrast contrast14" data-tooltip="140%" for="contrast14"></label> <label class="filter contrast contrast15" data-tooltip="150%" for="contrast15"></label> <label class="filter contrast contrast16" data-tooltip="160%" for="contrast16"></label> <label class="filter contrast contrast17" data-tooltip="170%" for="contrast17"></label> <label class="filter contrast contrast18" data-tooltip="180%" for="contrast18"></label> <label class="filter contrast contrast19" data-tooltip="190%" for="contrast19"></label> <label class="filter contrast contrast20" data-tooltip="200%" for="contrast20"></label>　明暗差<br /> <label class="filter grayscale grayscale0" data-tooltip="0%" for="grayscale0">g</label> <label class="filter grayscale grayscale1" data-tooltip="10%" for="grayscale1">r</label> <label class="filter grayscale grayscale2" data-tooltip="20%" for="grayscale2">a</label> <label class="filter grayscale grayscale3" data-tooltip="30%" for="grayscale3">y</label> <label class="filter grayscale grayscale4" data-tooltip="40%" for="grayscale4">s</label> <label class="filter grayscale grayscale5" data-tooltip="50%" for="grayscale5">c</label> <label class="filter grayscale grayscale6" data-tooltip="60%" for="grayscale6">a</label> <label class="filter grayscale grayscale7" data-tooltip="70%" for="grayscale7">l</label> <label class="filter grayscale grayscale8" data-tooltip="80%" for="grayscale8">e</label> <label class="filter grayscale grayscale9" data-tooltip="90%" for="grayscale9"></label> <label class="filter grayscale grayscale10" data-tooltip="100%" for="grayscale10"></label>　灰色度<br /> <label class="filter hue-rotate hue-rotate0" data-tooltip="0deg" for="hue-rotate0">h</label> <label class="filter hue-rotate hue-rotate1" data-tooltip="10deg=-350deg" for="hue-rotate1">u</label> <label class="filter hue-rotate hue-rotate2" data-tooltip="20deg=-340deg" for="hue-rotate2">e</label> <label class="filter hue-rotate hue-rotate3" data-tooltip="30deg=-330deg" for="hue-rotate3">-</label> <label class="filter hue-rotate hue-rotate4" data-tooltip="40deg=-320deg" for="hue-rotate4">r</label> <label class="filter hue-rotate hue-rotate5" data-tooltip="50deg=-310deg" for="hue-rotate5">o</label> <label class="filter hue-rotate hue-rotate6" data-tooltip="60deg=-300deg" for="hue-rotate6">t</label> <label class="filter hue-rotate hue-rotate7" data-tooltip="70deg=-290deg" for="hue-rotate7">a</label> <label class="filter hue-rotate hue-rotate8" data-tooltip="80deg=-280deg" for="hue-rotate8">t</label> <label class="filter hue-rotate hue-rotate9" data-tooltip="90deg=-270deg" for="hue-rotate9">e</label> <label class="filter hue-rotate hue-rotate10" data-tooltip="100deg=-260deg" for="hue-rotate10"></label> <label class="filter hue-rotate hue-rotate11" data-tooltip="110deg=-250deg" for="hue-rotate11"></label> <label class="filter hue-rotate hue-rotate12" data-tooltip="120deg=-240deg" for="hue-rotate12"></label> <label class="filter hue-rotate hue-rotate13" data-tooltip="130deg=-230deg" for="hue-rotate13"></label> <label class="filter hue-rotate hue-rotate14" data-tooltip="140deg=-220deg" for="hue-rotate14"></label> <label class="filter hue-rotate hue-rotate15" data-tooltip="150deg=-210deg" for="hue-rotate15"></label> <label class="filter hue-rotate hue-rotate16" data-tooltip="160deg=-200deg" for="hue-rotate16"></label> <label class="filter hue-rotate hue-rotate17" data-tooltip="170deg=-190deg" for="hue-rotate17"></label>　色相回転<br /> <label class="filter hue-rotate hue-rotate35" data-tooltip="-10deg=350deg" for="hue-rotate35"></label> <label class="filter hue-rotate hue-rotate34" data-tooltip="-20deg=340deg" for="hue-rotate34"></label> <label class="filter hue-rotate hue-rotate33" data-tooltip="-30deg=330deg" for="hue-rotate33"></label> <label class="filter hue-rotate hue-rotate32" data-tooltip="-40deg=320deg" for="hue-rotate32"></label> <label class="filter hue-rotate hue-rotate31" data-tooltip="-50deg=310deg" for="hue-rotate31"></label> <label class="filter hue-rotate hue-rotate30" data-tooltip="-60deg=300deg" for="hue-rotate30"></label> <label class="filter hue-rotate hue-rotate29" data-tooltip="-70deg=290deg" for="hue-rotate29"></label> <label class="filter hue-rotate hue-rotate28" data-tooltip="-80deg=280deg" for="hue-rotate28"></label> <label class="filter hue-rotate hue-rotate27" data-tooltip="-90deg=270deg" for="hue-rotate27"></label> <label class="filter hue-rotate hue-rotate26" data-tooltip="-100deg=260deg" for="hue-rotate26"></label> <label class="filter hue-rotate hue-rotate25" data-tooltip="-110deg=250deg" for="hue-rotate25"></label> <label class="filter hue-rotate hue-rotate24" data-tooltip="-120deg=240deg" for="hue-rotate24"></label> <label class="filter hue-rotate hue-rotate23" data-tooltip="-130deg=230deg" for="hue-rotate23"></label> <label class="filter hue-rotate hue-rotate22" data-tooltip="-140deg=220deg" for="hue-rotate22"></label> <label class="filter hue-rotate hue-rotate21" data-tooltip="-150deg=210deg" for="hue-rotate21"></label> <label class="filter hue-rotate hue-rotate20" data-tooltip="-160deg=200deg" for="hue-rotate20"></label> <label class="filter hue-rotate hue-rotate19" data-tooltip="-170deg=190deg" for="hue-rotate19"></label> <label class="filter hue-rotate hue-rotate18" data-tooltip="-180deg=180deg" for="hue-rotate18"></label><br /> <label class="filter invert invert0" data-tooltip="0%" for="invert0">i</label> <label class="filter invert invert1" data-tooltip="10%" for="invert1">n</label> <label class="filter invert invert2" data-tooltip="20%" for="invert2">v</label> <label class="filter invert invert3" data-tooltip="30%" for="invert3">e</label> <label class="filter invert invert4" data-tooltip="40%" for="invert4">r</label> <label class="filter invert invert5" data-tooltip="50%" for="invert5">t</label> <label class="filter invert invert6" data-tooltip="60%" for="invert6"></label> <label class="filter invert invert7" data-tooltip="70%" for="invert7"></label> <label class="filter invert invert8" data-tooltip="80%" for="invert8"></label> <label class="filter invert invert9" data-tooltip="90%" for="invert9"></label> <label class="filter invert invert10" data-tooltip="100%" for="invert10"></label>　階調反転<br /> <label class="filter opacity opacity0" data-tooltip="0%" for="opacity0">o</label> <label class="filter opacity opacity1" data-tooltip="10%" for="opacity1">p</label> <label class="filter opacity opacity2" data-tooltip="20%" for="opacity2">a</label> <label class="filter opacity opacity3" data-tooltip="30%" for="opacity3">c</label> <label class="filter opacity opacity4" data-tooltip="40%" for="opacity4">i</label> <label class="filter opacity opacity5" data-tooltip="50%" for="opacity5">t</label> <label class="filter opacity opacity6" data-tooltip="60%" for="opacity6">y</label> <label class="filter opacity opacity7" data-tooltip="70%" for="opacity7"></label> <label class="filter opacity opacity8" data-tooltip="80%" for="opacity8"></label> <label class="filter opacity opacity9" data-tooltip="90%" for="opacity9"></label> <label class="filter opacity opacity10" data-tooltip="100%" for="opacity10"></label>　不透明度<br /> <label class="filter saturate saturate0" data-tooltip="0%" for="saturate0">s</label> <label class="filter saturate saturate1" data-tooltip="10%" for="saturate1">a</label> <label class="filter saturate saturate2" data-tooltip="20%" for="saturate2">t</label> <label class="filter saturate saturate3" data-tooltip="30%" for="saturate3">u</label> <label class="filter saturate saturate4" data-tooltip="40%" for="saturate4">r</label> <label class="filter saturate saturate5" data-tooltip="50%" for="saturate5">a</label> <label class="filter saturate saturate6" data-tooltip="60%" for="saturate6">t</label> <label class="filter saturate saturate7" data-tooltip="70%" for="saturate7">e</label> <label class="filter saturate saturate8" data-tooltip="80%" for="saturate8"></label> <label class="filter saturate saturate9" data-tooltip="90%" for="saturate9"></label> <label class="filter saturate saturate10" data-tooltip="100%" for="saturate10"></label> <label class="filter saturate saturate11" data-tooltip="110%" for="saturate11"></label> <label class="filter saturate saturate12" data-tooltip="120%" for="saturate12"></label> <label class="filter saturate saturate13" data-tooltip="130%" for="saturate13"></label> <label class="filter saturate saturate14" data-tooltip="140%" for="saturate14"></label> <label class="filter saturate saturate15" data-tooltip="150%" for="saturate15"></label> <label class="filter saturate saturate16" data-tooltip="160%" for="saturate16"></label> <label class="filter saturate saturate17" data-tooltip="170%" for="saturate17"></label> <label class="filter saturate saturate18" data-tooltip="180%" for="saturate18"></label> <label class="filter saturate saturate19" data-tooltip="190%" for="saturate19"></label> <label class="filter saturate saturate20" data-tooltip="200%" for="saturate20"></label>　彩度（鮮やかさ）<br /> <label class="filter sepia sepia0" data-tooltip="0%" for="sepia0">s</label> <label class="filter sepia sepia1" data-tooltip="10%" for="sepia1">e</label> <label class="filter sepia sepia2" data-tooltip="20%" for="sepia2">p</label> <label class="filter sepia sepia3" data-tooltip="30%" for="sepia3">i</label> <label class="filter sepia sepia4" data-tooltip="40%" for="sepia4">a</label> <label class="filter sepia sepia5" data-tooltip="50%" for="sepia5"></label> <label class="filter sepia sepia6" data-tooltip="60%" for="sepia6"></label> <label class="filter sepia sepia7" data-tooltip="70%" for="sepia7"></label> <label class="filter sepia sepia8" data-tooltip="80%" for="sepia8"></label> <label class="filter sepia sepia9" data-tooltip="90%" for="sepia9"></label> <label class="filter sepia sepia10" data-tooltip="100%" for="sepia10"></label>　セピア度<br /> <div id="filter"> <div id="blur"> <div id="brightness"> <div id="contrast"> <div id="grayscale"> <div id="hue-rotate"> <div id="invert"> <div id="opacity"> <div id="saturate"> <div id="sepia"> 🔷🔷🔷ここに画像や動画などを貼る🔷🔷🔷 </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>