Clever PNG use

Creative PNG Transparency Web Design Examples

Advertisement

Png transparency can be used to add creative effect to web-design. Though there are some accessibility issues with certain browsers (IE Mainly) which can be overcome with use of javascript fix.

Here we have collected 8 creative examples of web-design using png transparency one way or another. If you know any other website please let us know in comments.

Speaklight

Speaklight uses layers of png images to give a glassy look with vibrant colors in background. It uses 3 layers of divs first body background second wrapper or container background and using another background colors and images over that.

Blue Flavour

Bluflavor uses fixed background with content overlay over it. Everthing is designed with detail.

Strawpoll

The green surrounding images is fixed at bottom of page with content behind it which is kept scrollable. A very nice effect.

Trevor Saint

Extensive use of of Png transparency can be seen here from navidation menu to content background to logo all png.

Eleven3

A transparent gradient image is used for content background here. Which adds to uniqueness of the website.

Buffalo

Png transparency used for news section bubbles on right side.

Silverbackapp

Silverbackapp creates parallax using 3 layers of images which gives it effect of 3d. Thinkvitamin explained in detail how to create this effect. Css-Tricks also created a tutorial for it see Starry Night Tutorial

One another Tutorial is there for using png images to create fade out bottom effect using fixed position image.

Advertisements