Footer CSS design made easy

If headers are the bold, striking elements that lead a user into a site’s content and give the first impressions, then footers might well be seen as the ‘parting thoughts’ of a website; a graphical bookend to all of the other elements on the page. They might not be very noticeable, but they’re there to do an important job.

Yet in recent years, footers have grown beyond their meek roots as places to stuff the privacy policy, page links and contact details, to become fully featured and bold statements of intelligent web design in themselves.

Not only that, but it’s now common for them to contain a large quantity of information. This isn’t just laziness on the part of the coder, however. Footers have become a useful home for content that’s better suited to sitting out of the flow of the body copy.

1. Here’s one we made earlier

We want our CSS footer to have a similar look to the header we created in this tutorial, but we also want it to be unique. So consider what should change and what should be retained.

Hide the layer groups inner section, feed, and page content. We’ll make the larger repeating bar from scratch. To do this, create a new layer and fill a taller rectangle with black. Copy the Layer Effects from the bar layer and paste them into the new one.

3. Pick a tree

Move the glow bottom layer down to below your new bar layer. Now open tree.psd from your tutorial files. This image was obtained from There are three layers – the original, a copy and a layer of red in between. Start erasing from copy so that the red shows through.

4. A touch of magic

Use the Magic Wand tool to erase around the tree’s leaves. The deductions will be pixellated, but this doesn’t matter, as we’ll be reducing the image’s size. Don’t worry too much about parts of the blue sky showing through – we’ll deal with this in the next step.

5. Resize

Drag the copy layer onto footer_final.psd and rename it tree. Using Free Transform (Cmd+T/Ctrl+T), reduce the size of the image so that it extends from the bottom of the canvas to just under the top of the footer bar, holding Shift so that you retain the correct ratios.

6. The right balance

To delete the blue and get our ‘autumnal’ colours, use the Color Balance dialog (Image > Adjustments > Color Balance) – Shadows: +10 (R) +10 (G) -30 (B); Midtones: +100 (R) +50 (G) -60 (B); Highlights: +20 (R) +10 (G) -10 (B). Tick the Preserve Luminosity box.

7. Subtle glows

The tree’s edges are still a bit jagged. To soften them, double-click on the layer to invoke the Layer Effects and add a subtle black ‘inner glow’. Now add an even more subtle black ‘outer glow’. This should be just enough to make the tree stand out from the background.

8. Subtle changes

To make the tree appear more autumnal, invoke the Layer Effects panel once again and add a Colour Overlay. Choose the colour #333300 and set its blend mode to Soft Light. These subtle layer effects have significantly improved the appearance of our tree image.

9. Feed me!

Unhide the feed layer group and select the leaves layer within. Flip using the Edit > Transform > Flip Vertical menu and drag the layer group underneath the footer bar. Reposition the elements so that the leaves and feed icon appear as a reversed version of the header.

10. Plan the structure

As with the header, our footer will actually be made up of two footers – one within the other. The outer footer will span the entire width of the page, and the inner footer (with a fixed width) will sit inside, containing all of our content.

11. Prepare the images for the web

You only need three images: the tree, the feed icon (with the leaf) and a 1px wide repeater image for the main bar. As all of these images utilise full alpha transparency, you’ll need to save them all as PNG-24 files.

Open index.html in your browser to see that we’ve got the main footer bar in place, with the content on top of it. Get familiar with the code in index.html and style_12.css. We’ll gradually improve the appearance of the footer by using different style sheets.

13. Inside out

Before we can do anything with the footer, we need to pull the content into the inner footer. In the <head> of your HTML file, change the CSS reference from style_12.css to style_13.css. Refresh your browser to see the improvements in place.

To make room for our tree image, we’ll need to move our text. There are two <div> elements that contain text, so we’ll display each one as a column floated to the left. Change the style sheet reference to style_14.css. Note that we have a <br> element to clear the floats.

15. Place the tree

To place the image, we’re using a <div> element with the class of tree. Open style_15.css to see the code that defines the styles for this element. It’s positioned absolutely within the containing <div>, and shifted just outside the block with negative positioning.

16. Image replacement

The <a> element with the class of feed – containing the link to our RSS feed – is positioned similarly to the tree. Open style_16.css and make sure you set display:block for this element, as <a> tags are not block-level elements by default.

17. Nice typography

Our text looks rather horrible at the moment, as it’s based on browser defaults. Update your HTML file with a reference to style_17.css and you’ll notice the improved text once you refresh the file in your browser. The different font face and size helps add differentiation between the headings and paragraph text.

18. Credits

Lastly we need a style for the ‘Designed by’ credit. I’ve made a GIF of my logo the same width as one of the columns. Open style_final.css and notice it’s absolutely positioned so it sits exactly where we want it. The text is shifted off-screen using image replacement.

19. Finished!

Open final.html to see the end result: a visually appealing footer that reflects the style of the header, and stands up well on its own. The content matches the grid above, but we’ve made it interesting by shifting some of the visual elements outside the blocks.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.