Picture of Michael Lee
:wave: Hey hey, I'm Michael Lee and this is my site about being a developer, being a dad and making side projects.

Stop Using Corner Banners

Written on May 2, 2014

Once in a while I come across a site that uses a corner banner to link elsewhere. This is a problem. Depending on the size of my browser, the banner will get in the way of my interaction with the site.

Shows how image based banners interfere content

I want to click the DOCS button but I can’t because the GitHub banner is in the way. Not cool…

The reason why this happens, is that graphic is bound to a square space. Although the graphic is just a banner, the graphic that encases the banner has a bounding box that takes up space to the furthest pixels.

A quick solution I thought up was just styling a link element and rotating it with some CSS. I’ve also created a GitHub repo that shares a pure CSS solution.

See the Pen Stop Using Corner Banners by Michael Lee (@michaellee) on CodePen.

Thanks for taking the time to read this article. I'd love to stay in touch and share more tips on programming and design and side projects. Sign up and I'll send you my articles straight to your email.
Previous post: Sass Directives and Maps
Next post: Native Haus