User:JPxG/sandboxcss/sand.css

.img-wrap { position: relative; image-rendering: pixelated; /* CSS property for pixelation */ } .overlay { position: absolute; left: 0; top: 0; image-rendering: pixelated; /* CSS property for pixelation */ } .rot030 { filter: hue-rotate(30deg); } .rot060 { filter: hue-rotate(60deg); } .rot090 { filter: hue-rotate(90deg); } .rot120 { filter: hue-rotate(120deg); } .rot150 { filter: hue-rotate(150deg); } .rot180 { filter: hue-rotate(180deg); } .rot210 { filter: hue-rotate(210deg); } .rot240 { filter: hue-rotate(240deg); } .rot270 { filter: hue-rotate(270deg); } .rot300 { filter: hue-rotate(300deg); } .rot330 { filter: hue-rotate(330deg); } .rot360 { filter: hue-rotate(360deg); }

.rot030none { filter: hue-rotate(30deg); display: none; } .rot060none { filter: hue-rotate(60deg); display: none; } .rot090none { filter: hue-rotate(90deg); display: none; } .rot120none { filter: hue-rotate(120deg); display: none; } .rot150none { filter: hue-rotate(150deg); display: none; } .rot180none { filter: hue-rotate(180deg); display: none; } .rot210none { filter: hue-rotate(210deg); display: none; } .rot240none { filter: hue-rotate(240deg); display: none; } .rot270none { filter: hue-rotate(270deg); display: none; } .rot300none { filter: hue-rotate(300deg); display: none; } .rot330none { filter: hue-rotate(330deg); display: none; } .rot360none { filter: hue-rotate(360deg); display: none; }

.tone1 { filter: sepia(100%) hue-rotate(-15.0deg) saturate(1.30) brightness(0.20); } .tone2 { filter: sepia(100%) hue-rotate(-18.0deg) saturate(3.00) brightness(0.25); } .tone3 { filter: sepia(100%) hue-rotate(-24.0deg) saturate(2.70) brightness(0.50); } .tone4 { filter: sepia(100%) hue-rotate(-15.0deg) saturate(2.00) brightness(0.75); } .tone5 { filter: sepia(100%) hue-rotate(-0.00deg) saturate(1.00) brightness(1.05); } .tone6 { filter: sepia(100%) hue-rotate(-15.0deg) saturate(1.25) brightness(1.20); } .tone7 { filter: sepia(100%) hue-rotate(-34.0deg) saturate(1.90) brightness(1.10); } .tone8 { filter: sepia(100%) hue-rotate(-30.0deg) saturate(1.10) brightness(1.20); }

.blk { filter: sepia(100%) hue-rotate(-15.0deg) saturate(0.00) brightness(0.20); }

.pnk { filter: hue-rotate(322deg) saturate(1.8) brightness(1.2); }

.sep { filter: sepia(100%); }

.grs { filter: grayscale(100%); }

.des { filter: saturate(0%); }

label { display: inline; }