.filter-contrast { -webkit-filter: contrast(4); filter: contrast(4); } .filter-blur { -webkit-filter: blur(5px); filter: blur(5px); } .filter-sepia { -webkit-filter: sepia(1); filter: sepia(1); } .filter-grayscale { -webkit-filter: grayscale(1); filter: grayscale(1); } .filter-brightness { -webkit-filter: brightness(2); filter: brightness(2); } .filter-drop-shadow { -webkit-filter: drop-shadow(10px 10px 7px rgba(0, 0, 0, .7)); filter: drop-shadow(10px 10px 7px rgba(0, 0, 0, .7)); } .filter-hue-rotate { -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); } .filter-invert { -webkit-filter: invert(.3); filter: invert(.3); } .filter-brightness { -webkit-filter: brightness(2); filter: brightness(2); } .filter-opacity { -webkit-filter: opacity(.5); filter: opacity(.5); } body { font: 20px arial; } p { width: 30%; margin-right: 1%; display: inline-block; text-align: center; vertical-align: middle; } p img { max-width: 100%; margin-top: 5px; } p small {font-size: 12px;}
<p> <strong>Contrast</strong> <img src="http://tableless.com.br/wp-content/uploads/2014/07/xIsiRLngSRWN02yA2BbK_submission-photo-7.jpg" class="filter-contrast"> <small>-webkit-filter: contrast(4);</small> </p> <p> <strong>Blur</strong> <img src="http://tableless.com.br/wp-content/uploads/2014/07/xIsiRLngSRWN02yA2BbK_submission-photo-7.jpg" class="filter-blur"> <small>-webkit-filter: blur(5px);</small> </p> <p> <strong>Sepia</strong> <img src="http://tableless.com.br/wp-content/uploads/2014/07/xIsiRLngSRWN02yA2BbK_submission-photo-7.jpg" class="filter-sepia"> <small>-webkit-filter: sepia(1);</small> </p> <p> <strong>Grayscale</strong> <img src="http://tableless.com.br/wp-content/uploads/2014/07/xIsiRLngSRWN02yA2BbK_submission-photo-7.jpg" class="filter-grayscale"> <small>-webkit-filter: grayscale(1);</small> </p> <p> <strong>Brightness</strong> <img src="http://tableless.com.br/wp-content/uploads/2014/07/xIsiRLngSRWN02yA2BbK_submission-photo-7.jpg" class="filter-brightness"> <small>-webkit-filter: brightness(2);</small> </p> <p> <strong>Dropshadow</strong> <img src="http://tableless.com.br/wp-content/uploads/2014/07/xIsiRLngSRWN02yA2BbK_submission-photo-7.jpg" class="filter-drop-shadow"> <small>-webkit-filter: drop-shadow(10px 10px 7px rgba(0, 0, 0, .7));</small> </p> <p> <strong>Hue-rotate</strong> <img src="http://tableless.com.br/wp-content/uploads/2014/07/xIsiRLngSRWN02yA2BbK_submission-photo-7.jpg" class="filter-hue-rotate"> <small>-webkit-filter: hue-rotate(90deg);</small> </p> <p> <strong>Invert</strong> <img src="http://tableless.com.br/wp-content/uploads/2014/07/xIsiRLngSRWN02yA2BbK_submission-photo-7.jpg" class="filter-invert"> <small>-webkit-filter: invert(.3);</small> </p> <p> <strong>Opacity</strong> <img src="http://tableless.com.br/wp-content/uploads/2014/07/xIsiRLngSRWN02yA2BbK_submission-photo-7.jpg" class="filter-opacity"> <small>-webkit-filter: opacity(.5);</small> </p>