We embark upon the great journey that is the footer! CSS-Tricks has always had a big fancy footer and this design will be no exception. It's not purely gratuitous though. We have lots of things that really deserve at least a link on the site (e.g. social media links, contact links, other projects I work on, etc) and the footer is a perfect place for those.

We incorporate the classic CSS-Tricks asterisk logo down there instead of the header which is busy enough. But first, we set off the footer with kind of a darkening and drop shadow effect to set it off from the top area.

We end up using the shape of the asterisk as a mask to reveal a photo of myself below it. We black and white my photo and go through Photoshop's tool for doing that which can result in far nicer black and white results than simply removing color information. Then we apply a very heavy brand colored photo filter over the top of it to extend the brand and consistency of the design.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.