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.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag