Blending Modes for Easy to Edit Images

Combining images and text used to be the domain of the graphic designer.  Say you wanted an graphic where the image interacted with the text like this:

Using Difference Mode

You would need to send it to the designer to be created.  If you wanted to change the text, back to the designer.

Now in Chrome 41+, FireFox 36+, Safari 8+, and Chrome for Android you can use mix-blend-mode to create these images on the fly.  You can see a live demo here of all of the images on this page that were combined solely with CSS.  Here is the HTML for the above image:


<div id="water1"><p>Splashing</p></div>

and here is the CSS:


#water1{
background:url(berry.png) no-repeat center bottom;
width: 417px;
height: 279px;
margin:auto;
}
#water1 p{
mix-blend-mode: difference;
font-size: 72px;
color: #fff;
padding: 50px 0 0 40px;
}

How could this be used?  You could make a WordPress template where the post title floats over, and becomes part of the featured image.

soft light mode

Or how about adding some javascript that changed the text, but not the image?

If you are interested in something like this for your site, Diane@beyond-paper.com.

Diane Ensey
Follow me

Diane Ensey

Programming Diva and CEO at Beyond Paper
For more than 10 years I've been making websites work for clients world-wide using WordPress, Google Maps, forms and custom applications. You can see my work portfolio and case studies at Beyond Paper.
Diane Ensey
Follow me

Submit a Comment