Ian James Cox - Interactive designer in web and print

Web Trends - Clever PNG masks 1

Filed in Code / Design

One smart trick thats creeped into my designs/builds lately is the clever PNG mask trick. With all the modern browsers supporting transparent pngs they are now the lynchpin of future thinking web designers. Learning how to manipulate them creatively will give your design a modern edge. Using them well gives a visual treat that is sure to stick in the head. I’ve collected some examples and I’ve done a demo of how you can creating the effect for yourself in your own designs.

“The concept is to use png transparency to mask layers. With the aid of scrolling and Jquery movement you can create some really interesting effects.”

Achieving the effect

After you have viewed the live examples of the above (vital) you should have an idea of how it works. I've knocked up three examples below to demonstrate.

Example A

View Demo - Download files

Example B

View Demo - Download files

Download the examples here.

Know any other websites that use similar effects to these? Let me know in the comments.