This CSS Reference section displays the code for examples that illustrate the usage of CSS image filters.
<!DOCTYPE html> <html> <head> <title>XoaX.net</title> <style> #idFiltersTable { border: 2px solid #CFAA80; background-color:#E0C0A0; margin:34px; } #idFiltersTable th, #idFiltersTable td { padding: 5px; } #idFiltersTable tr { background-color:#FEFCFA; } img#idNone { filter: none; } img#idBlur { filter: blur(5px); } img#idBrightness { filter: brightness(150%); } img#idContrast{ filter: contrast(150%); } img#idDropShadow{ filter: drop-shadow(3px 3px 3px black); } img#idGrayScale{ filter: grayscale(100%); } img#idHueRotate{ filter: hue-rotate(180deg); } img#idInvert{ filter: invert(100%); } img#idOpacity{ filter: opacity(50%); } img#idSaturate{ filter: saturate(50%); } img#idSepia{ filter: sepia(100%); } </style> </head> <body> <table id="idFiltersTable"> <tr style="width:300px;background-color:#F8F4E8;"> <th>Filter</th> <th>Appearence</th> </tr> <tr> <td>none</td> <td><img id="idNone" src="EcceAgnusDei_AlbertChevalierTayler.png" /></td> </tr> <tr> <td>blur(5px)</td> <td><img id="idBlur" src="EcceAgnusDei_AlbertChevalierTayler.png" /></td> </tr> <tr> <td>brightness(150%)</td> <td><img id="idBrightness" src="EcceAgnusDei_AlbertChevalierTayler.png" /></td> </tr> <tr> <td>contrast(150%)</td> <td><img id="idContrast" src="EcceAgnusDei_AlbertChevalierTayler.png" /></td> </tr> <tr> <td>drop-shadow(3px 3px 3px black)</td> <td><img id="idDropShadow" src="EcceAgnusDei_AlbertChevalierTayler.png" /></td> </tr> <tr> <td>grayscale(100%)</td> <td><img id="idGrayScale" src="EcceAgnusDei_AlbertChevalierTayler.png" /></td> </tr> <tr> <td>hue-rotate(180deg)</td> <td><img id="idHueRotate" src="EcceAgnusDei_AlbertChevalierTayler.png" /></td> </tr> <tr> <td>invert(100%)</td> <td><img id="idInvert" src="EcceAgnusDei_AlbertChevalierTayler.png" /></td> </tr> <tr> <td>opacity(50%)</td> <td><img id="idOpacity" src="EcceAgnusDei_AlbertChevalierTayler.png" /></td> </tr> <tr> <td>saturate(50%)</td> <td><img id="idSaturate" src="EcceAgnusDei_AlbertChevalierTayler.png" /></td> </tr> <tr> <td>sepia(100%)</td> <td><img id="idSepia" src="EcceAgnusDei_AlbertChevalierTayler.png" /></td> </tr> </table> </body> </html>
© 20072024 XoaX.net LLC. All rights reserved.