CSS Blend Modes

Blend Modes is one of the new specifications coming to CSS, you can test this in certain recent builds of webkit with:

-webkit-blend-mode

Values include traditional blend modes like multiply, screen, overlay, and more. This brings natively to the web effects that could previously only be done in flash or with pre-rendered images from photoshop. Allowing the potential to transition the colors being blended on top or the position and size of the elements involved. This allows a great deal of creative potential for artists to play with interactive elements within HTML. It allows elements to share common textures with background images when multiplied instead of relying solely on opacity. This creates more dramatic effects and matches better the capabilities of design tools so developers can better fully realize designs without having to hack things together or bake in effects.

Check out this demo I threw together showcasing some of these applications: blend mode photo gallery.

Read more about it here.

Leave a Reply

Your email address will not be published. Required fields are marked *