ArchiveAbout MeTime RecursionA Technological enthusiast slash Web Developer's approach to lifeCSS4 Blend Modes, a family tripThe CSS specification is getting some more advanced rules for image manipulation. If you’re familiar with Photoshop Blend Modes, you’ll find CSS Blend Modes surprisingly similar. It’s still far from the flexibility the image editing tools offer, but we can already achieve some pretty amazing effects.Now, let’s get to the point. To make it more interesting, I’ll walk you through some of the possibilites, by taking you along our family trip from last month.The trip:We started by packing our things and strapping my son Filip into his hiking carrier. The image doesn’t really need a caption, but we can aswell add one, just for the sake of it. Since the blue color is a bit rough on the picture, we can smooth it by adding mix-blend-mode: color; on the h2 element in the second image box..image {background:url('gettingready.jpg');}.image h2 {color:blue;}.image2 h2 {mix-blend-mode: color;}Looks like I should have chosen a different color, but you get the point.It was cold, there was fresh fluffy snow everywhere and a warm sun shining on us through the day. A beautiful day. My wife took this picture of me and my son, just a few meters from our goal, the St. Jacob’s church.Now let’s try to darken a bit that shining snow on the ground. We could use a gradient for background, and nest our image within. Without the mix-blend-mode property, we would see only our picture, covering the gradient background. Now, if we set the picture to mix-blend-mode: multiply;, the gradient comes through..background {background: -moz-linear-gradient(top, #ffffff, #000000); /* this one is for Gecko browsers */}.background .image {background:url('ontheroad.jpg');}.background2 .image {mix-blend-mode: multiply;}And here’s the result:After this refreshing trip, Filip fell asleep almost immediately, not even waiting to be taken out of his carrier. So we just left him there for a couple of minutes, while we enjoyed the view and the warm sunrays.In the last picure I tried to give it a more “sunny” look, so I set a light yellow color as background, and set the mix-blend-mode on the picture to darken..background {background: #fff8a6;}.background .image {background:url('after.jpg');}.background2 .image {mix-blend-mode: darken;}These are just a few examples of what you can do with Blend Modes in CSS, pairing them with :hover effects for example, opens up some interesting possibilites. And surprisingly enough, the browser support is pretty good already, especially in Firefox and Safari: http://caniuse.com/#feat=css-mixblendmodeMore on CSS4css4cssprouddadblend modestripsunny dayJan 15th, 2015Open in appFacebookTweetMailPermalinkCSS4 Selectors :has()Last time we talked about the :not() pseudo-class selector and it’s improvements in CSS4 over it’s original design in CSS3. Today, we’re going