UNPKG

liquid-css

Version:

Refractive chromatic aberration effects in CSS.

github.com/electrikmilk/liquid-css

electrikmilk/liquid-css

2 lines (1 loc) • 6.63 kB
1
2
.material{transition:.3s ease all;background-blend-mode:darken;border:1px solid;background-color:transparent;border-color:#99999980 #77777780 #55555580;box-shadow:0 .5rem 1rem #00000080,inset 0 4px 1rem #ffffff4d;border-radius:.75rem}.material.glass{background-color:#f3f3f34d;-webkit-backdrop-filter:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs> <filter id="chromatic-aberration" color-interpolation-filters="sRGB"> <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" /> <feOffset dx="2" dy="0"/> <feGaussianBlur stdDeviation="0" result="redChannel"/> <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0" /> <feOffset dx="1" dy="0"/> <feGaussianBlur stdDeviation="0" result="greenChannel"/> <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0" /> <feGaussianBlur stdDeviation="0" result="blueChannel"/> <feBlend in="redChannel" in2="greenChannel" mode="screen" result="redGreen" /> <feBlend in="redGreen" in2="blueChannel" mode="screen"/> </filter> </defs></svg>#chromatic-aberration') url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs> <filter id="refract"> <feTurbulence baseFrequency="0.001,0.001" result="a95d582b-b790-45f7-88dc-0ce41bf612b3"/> <feDisplacementMap scale="15" xChannelSelector="A" yChannelSelector="A" result="65d8088a-cd06-4721-b9d8-50e84ab39476" in="SourceGraphic" in2="a95d582b-b790-45f7-88dc-0ce41bf612b3"/> </filter> </defs></svg>#refract') saturate(180%);backdrop-filter:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs> <filter id="chromatic-aberration" color-interpolation-filters="sRGB"> <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" /> <feOffset dx="2" dy="0"/> <feGaussianBlur stdDeviation="0" result="redChannel"/> <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0" /> <feOffset dx="1" dy="0"/> <feGaussianBlur stdDeviation="0" result="greenChannel"/> <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0" /> <feGaussianBlur stdDeviation="0" result="blueChannel"/> <feBlend in="redChannel" in2="greenChannel" mode="screen" result="redGreen" /> <feBlend in="redGreen" in2="blueChannel" mode="screen"/> </filter> </defs></svg>#chromatic-aberration') url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs> <filter id="refract"> <feTurbulence baseFrequency="0.001,0.001" result="a95d582b-b790-45f7-88dc-0ce41bf612b3"/> <feDisplacementMap scale="15" xChannelSelector="A" yChannelSelector="A" result="65d8088a-cd06-4721-b9d8-50e84ab39476" in="SourceGraphic" in2="a95d582b-b790-45f7-88dc-0ce41bf612b3"/> </filter> </defs></svg>#refract') saturate(180%)}.material.ice,.material.black-ice{-webkit-backdrop-filter:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs> <filter id="chromatic-aberration" color-interpolation-filters="sRGB"> <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" /> <feOffset dx="2" dy="0"/> <feGaussianBlur stdDeviation="2" result="redChannel"/> <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0" /> <feOffset dx="2" dy="0"/> <feGaussianBlur stdDeviation="0.5" result="greenChannel"/> <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0" /> <feGaussianBlur stdDeviation="2" result="blueChannel"/> <feBlend in="redChannel" in2="greenChannel" mode="screen" result="redGreen" /> <feBlend in="redGreen" in2="blueChannel" mode="screen"/> </filter> </defs></svg>#chromatic-aberration') url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs> <filter id="distort"> <feGaussianBlur in="SourceGraphic" stdDeviation="1,2" edgeMode="wrap" result="feGaussianBlur-a95d582b"/> <feGaussianBlur in="feGaussianBlur-a95d582b" stdDeviation="2,1" edgeMode="wrap" result="feGaussianBlur-8384c3d2"/> <feTurbulence baseFrequency="0.001,0.001" stitchTiles="stitch" result="a95d582b-b790-45f7-88dc-0ce41bf612b3"/> <feDisplacementMap scale="15" xChannelSelector="A" yChannelSelector="A" result="65d8088a-cd06-4721-b9d8-50e84ab39476" in="feGaussianBlur-8384c3d2" in2="a95d582b-b790-45f7-88dc-0ce41bf612b3"/> </filter> </defs></svg>#distort') saturate(180%);backdrop-filter:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs> <filter id="chromatic-aberration" color-interpolation-filters="sRGB"> <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" /> <feOffset dx="2" dy="0"/> <feGaussianBlur stdDeviation="2" result="redChannel"/> <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0" /> <feOffset dx="2" dy="0"/> <feGaussianBlur stdDeviation="0.5" result="greenChannel"/> <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0" /> <feGaussianBlur stdDeviation="2" result="blueChannel"/> <feBlend in="redChannel" in2="greenChannel" mode="screen" result="redGreen" /> <feBlend in="redGreen" in2="blueChannel" mode="screen"/> </filter> </defs></svg>#chromatic-aberration') url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs> <filter id="distort"> <feGaussianBlur in="SourceGraphic" stdDeviation="1,2" edgeMode="wrap" result="feGaussianBlur-a95d582b"/> <feGaussianBlur in="feGaussianBlur-a95d582b" stdDeviation="2,1" edgeMode="wrap" result="feGaussianBlur-8384c3d2"/> <feTurbulence baseFrequency="0.001,0.001" stitchTiles="stitch" result="a95d582b-b790-45f7-88dc-0ce41bf612b3"/> <feDisplacementMap scale="15" xChannelSelector="A" yChannelSelector="A" result="65d8088a-cd06-4721-b9d8-50e84ab39476" in="feGaussianBlur-8384c3d2" in2="a95d582b-b790-45f7-88dc-0ce41bf612b3"/> </filter> </defs></svg>#distort') saturate(180%)}.material.ice{background-color:#e0e9fdb3}.material.black-ice{background-color:#303137b3}