fazlurr
6/22/2014 - 2:32 PM

Color tinting images

Color tinting images

settings.json
content_copyfile_download
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
dabblet.js
content_copyfile_download
// alert('Hello world!');
dabblet.html
content_copyfile_download
<!-- content to be placed inside <body>…</body> -->
dabblet.css
content_copyfile_download
/**
 * Color tinting images 
 * Important: Blending modes need to be enabled (Chrome: Experimental Web Platform Features flag, Firefox: layout.css.background-blend-mode.enabled pref)
 * Photo: https://flickr.com/photos/tangledcontrolpads/246642987
 */

height: 100vh;
background: url('https://c1.staticflickr.com/1/85/246642987_df591a5a33_b.jpg') no-repeat center hsl(335, 100%, 50%);
background-size: cover;
background-blend-mode: luminosity;

/* With filters (not as good):
-webkit-filter: grayscale() sepia() saturate(3) hue-rotate(295deg);
filter: grayscale() sepia() saturate(3) hue-rotate(295deg); */