| <!-- | |
| SVG filter to make your images look like its 1999! | |
| (Hi Dan!) | |
| --> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 160"> | |
| <defs> | |
| <linearGradient id="rainbow" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="100%" y2="0"> | |
| <stop offset="0" stop-color="#ff0000"></stop> | |
| <stop offset="0.2" stop-color="#ffff00"></stop> | |
| <stop offset="0.4" stop-color="#00ff00"></stop> | |
| <stop offset="0.6" stop-color="#00ffff"></stop> | |
| <stop offset="0.8" stop-color="#0000ff"></stop> | |
| <stop offset="1" stop-color="#ff00ff"></stop> | |
| </linearGradient> | |
| <filter id="websafe" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB"> | |
| <feComponentTransfer> | |
| <feFuncR type="discrete" tableValues="0 0.08333333333333333 0.16666666666666666 0.25 0.3333333333333333 0.4166666666666667 0.5 0.5833333333333334 0.6666666666666666 0.75 0.8333333333333334 0.9166666666666666 1 1"></feFuncR> | |
| <feFuncG type="discrete" tableValues="0 0.08333333333333333 0.16666666666666666 0.25 0.3333333333333333 0.4166666666666667 0.5 0.5833333333333334 0.6666666666666666 0.75 0.8333333333333334 0.9166666666666666 1 1"></feFuncG> | |
| <feFuncB type="discrete" tableValues="0 0.08333333333333333 0.16666666666666666 0.25 0.3333333333333333 0.4166666666666667 0.5 0.5833333333333334 0.6666666666666666 0.75 0.8333333333333334 0.9166666666666666 1 1"></feFuncB> | |
| </feComponentTransfer> | |
| </filter> | |
| <filter id="ultrasafe" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB"> | |
| <feComponentTransfer> | |
| <feFuncR type="discrete" tableValues="0 1"></feFuncR> | |
| <feFuncG type="discrete" tableValues="0 1"></feFuncG> | |
| <feFuncB type="discrete" tableValues="0 1"></feFuncB> | |
| </feComponentTransfer> | |
| </filter> | |
| </defs> | |
| <g font-weight="bold"> | |
| <text x="0" y="20">Default (8-bit)</text> | |
| <rect x="0" y="30" width="100%" height="20"></rect> | |
| <text x="0" y="70">Web Safe (4-bit)</text> | |
| <rect x="0" y="80" width="100%" height="20" style="filter:url(#websafe)"></rect> | |
| <text x="0" y="120">Ultra Safe! (1-bit)</text> | |
| <rect x="0" y="130" width="100%" height="20" style="filter:url(#ultrasafe)"></rect> | |
| </g> | |
| </svg> | |
| <div> | |
| <img src="https://images.unsplash.com/photo-1422493757035-1e5e03968f95?q=80&w=2816&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" /> | |
| <img class="websafe" src="https://images.unsplash.com/photo-1422493757035-1e5e03968f95?q=80&w=2816&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" /> | |
| <img class="ultrasafe" src="https://images.unsplash.com/photo-1422493757035-1e5e03968f95?q=80&w=2816&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" /> | |
| </div> |
| img { | |
| width: 400px; | |
| } | |
| rect { | |
| fill: url(#rainbow); | |
| } | |
| .websafe { | |
| filter: url(#websafe); | |
| } | |
| .ultrasafe { | |
| filter: url(#ultrasafe); | |
| } |
Tired of millions of colors in your images? In the good old days we had 4096 colors and glad of it! Here's a css filter to get retro web-safe 4-bit images back.
Bonus! Ultra-safe 1-bit images! 8 colors are the best colors!
A Pen by Spencer Bliven on CodePen.
Inspired by Dan Q