| <!DOCTYPE html> |
| <html> |
| <style> |
| html { |
| width: 100vw; |
| height: 100vh; |
| } |
| |
| body { |
| text-transform: uppercase; |
| text-align: center; |
| font-family: sans-serif; |
| letter-spacing: 0.1em; |
| font-size: 12pt; |
| padding-top: 12px; |
| } |
| |
| img { |
| width: 170px; |
| } |
| |
| #grayscale { -webkit-filter: grayscale(1) } |
| |
| #none { -webkit-filter: none } |
| |
| #brightness { -webkit-filter: brightness(.6) } |
| |
| #saturation { -webkit-filter: saturate(4) } |
| |
| #sepia { -webkit-filter: sepia(1) } |
| |
| #blur { -webkit-filter: blur(2px) } |
| |
| #opacity { -webkit-filter: opacity(.8) } |
| |
| #blurhue { -webkit-filter: blur(3px) saturate(3) } |
| |
| div { |
| display: inline-block; |
| padding: 8px 8px; |
| } |
| </style> |
| |
| <body> |
| <!-- The blue sector of the images should be at 12 o'clock --> |
| <div> |
| <img id="grayscale" src="resources/red-at-12-oclock-with-color-profile.jpg" /><p>Grayscale</p> |
| </div> |
| <div> |
| <img id="none" src="resources/red-at-12-oclock-with-color-profile.jpg" /><p>None</p> |
| </div> |
| <div> |
| <img id="brightness" src="resources/red-at-12-oclock-with-color-profile.jpg" /><p>Brightness</p> |
| </div> |
| <div> |
| <img id="saturation" src="resources/red-at-12-oclock-with-color-profile.jpg" /><p>Saturation</p> |
| </div> |
| <div> |
| <img id="sepia" src="resources/red-at-12-oclock-with-color-profile.jpg" /><p>Sepia</p> |
| </div> |
| <div> |
| <img id="blur" src="resources/red-at-12-oclock-with-color-profile.jpg" /><p>Blur</p> |
| </div> |
| <div> |
| <img id="opacity" src="resources/red-at-12-oclock-with-color-profile.jpg" /><p>Opacity</p> |
| </div> |
| <div> |
| <img id="blurhue" src="resources/red-at-12-oclock-with-color-profile.jpg" /><p>Blur+Hue</p> |
| </div> |
| </body> |
| </html> |
