CSS tutorial: creative PNG and transparency

IMAGE FORMATS FOR the web have been long been dominated by GIF and JPEG. However, with universal browser support for the PNG format now standard, web designers have an exciting and flexible alternative. The PNG (Portable Network Graphics) format is effectively available in two guises, PNG-8 and PNG-24. The PNG-8 option is the alternative to the GIF format but with the added advantage of providing better compression. This means that the format, in most cases, provides a smaller file size. The PNG-24 format brings transparency to images allowing web designers to be more creative and productive. File sizes are bigger but the finished product is well worth the compromise. The introduction of transparency immediately allows designers to become more productive. For example, designers can overlay an image on top of another without the need to resave every instance of an image. Here we demonstrate a number of techniques showing how to manage the PNG format and introduce it into webpages using HTML and CSS.

Originally appeared in Web Designer Issue 167 | Author: Steven Jenkins

01 Transparent text

Creating text on a transparent canvas allows it to be used in a variety of guises. In Photoshop create a new file, File>New, using the appropriate dimensions. Now select the Text tool, add text and style with a chosen font, colour, size etc. Now head to File>Save for Web and save the file using the PNG-24 format.

02 Position anywhere

The transparent text can now be used across a number of different scenarios. To use as a standalone element the image can be added inside an absolute positioned div tag. Go to Insert>Layout Objects>AP Div and drag into position. Now click inside the tag and add the transparent text (Insert>Image). Drag the div tag to position.

03 Overlay a background

Transparent text can be positioned over a background image, allowing you to add different background images while retaining the text. Create, or select, a current div tag, add an image, double-click Tag in the CSS Styles panel, select Background, click Browse and select the image. Insert the transparent text image into the tag.

04 Custom shape

To make text more prominent, a custom shape can be added as a background to the text. Create a new file with the appropriate dimensions and select the Custom Shape tool from the toolbar and select Custom Shape tool from the sub-menu. Now choose a custom shape, ie Stamp, and draw across the canvas to create the basic shape.

05 Style shape

Now go to Layer>Layer Style>Drop Shadow and modify the various options to create the desired shadow. Now select the Text tool and add any text to the custom shape. Alternatively, leave the shape blank to use as a background image. Now head to File>Save for Web & Devices and save with the PNG-24 format.

06 Insert shape

Now select the previously created AP Div tag and head to Insert>Image, select the newly created shape and insert. Now save the page and press F12 or go to File>Preview in Browser to see the PNG in action. Double-click the AP Div title in the CSS Panel and add the blank version as the background image.

07 Custom text

Now click inside the div tag and type in the appropriate text. This will be added with the default settings. Doubleclick the div tag in the CSS Panel and under Type select the desired font, size, colour and style. Now head to the Box category and add the necessary amount of padding to position the text correctly and resize the tag.

08 Corner ribbon

A popular graphic technique is to add a ribbon or flag, typically in a corner, often used for sites that are award winners. To create a ribbon open a new file with equal height and width dimensions. Select the Polygonal Lasso tool, create the basic shape and then add the background colour using the Paint Bucket or Gradient tool.

09 Ribbon text

To add the text to the ribbon the canvas needs to be shifted so it is horizontal. Go to Image>RotateCanvas>Arbitrary and add 45 and press OK. Adjust to get the exact angle. Now add in the text and select Image>Rotate Canvas>Arbitrary again and add the same angle but select CCW to get back.

10 Crop to size

The next step is to select the Horizontal Marquee tool and draw around the ribbon, making sure that there are no gaps at the edges of the image. You then need to go to Image>Crop to resize ready to add. Now go to File>Save for Web & Devices and save the image in the PNG-24 format.

11 Ribbon placement

To place in the top-left corner add an AP Div tag, Insert>Layout Objects>AP Div, and make sure that the L and T measurements in the Properties are both set to zero. Click inside the tag and insert the image just created. Adjust the tag to match the image using the resize handles and save.

12 Translucent overlay

Another popular technique is to create a translucent overlay that allows the image underneath to be seen. The first step is to create the image for the overlay. Create a new file, make this around ten by ten pixels as it will be repeated. Choose the base colour, add, set the Opacity to around 80% and save as a PNG-24.

13 Overlay tag

To create the overlay a standard Div tag or AP Div tag can be used. We have used an AP Div tag. Drag the tag into the desired position on the page and make sure that the L field in Properties is set to zero. Now set the Width to 100% to ensure that the tag stretches the entire width of the screen.

14 Opaque background

Locate the title of the div tag just created in the CSS Panel and then double-click it to open. Select the Background category and click the Browse button to locate the image that was created back in step 12. By default, the background image will repeat, filling the div tag. Save and Preview in Browser.

15 Add text

First type in the desired text, create a new class, Text>CSS Style>New, to style the text. Select the text and apply the new class. Add in any necessary padding. Alternatively, create a new PNG-24 file, add text and save. Now insert the image just created in the tag to create a two-layer transparency image.