top of page arrow
Ribbons

If you are a web designer from the 90's (like someone I know), you are familiar with ribbons and banners. If you are a web designer in the 21st century, you hate how hokey they are. Sometimes they may still be used to get the point across, so it's important that they work on every device. Here are some responsive ribbons using CSS and a little trigonometry.

Original design by Temani Afif for Smashing Magazine.
Read the 2-part article for a comprehensive explanation.

No way was I going to recreate the math. I hurt myself just reading it.

A responsive ribbon using a single line of text

A responsive title ribbon
using multiple lines
of text

An angled title ribbon
with multiple lines
of text

A responsive ribbon
using
multiple lines
of text

Yet another
ribbon using
multiple lines

11/16/2023