Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Posted by Roland Shen
Roland Shen
7,628 Points

Rainbow bar/header commonly seen?

On many sites like blog.teamtreehouse.com and gumroad.com, I've noticed a common design trend. That rainbow bar they use was something that I always thought was pretty cool, does anybody know the name of this design element, and how to make my own?

Thank you!

1 Answer

Joshua Gassett
Joshua Gassett
6,741 Points

If your using code you can inspect the coding elements by going to view > developer > view source

this is what I found after inspecting the code on blog.teamtreehouse.com

it looks like a bunch of colored stripes probably edited with css in a separate stylesheet contained in this div. with the span tag it allows it to resize dynamically with the size of the browser. pretty neat design element.

```<div class="stripes"> <span class="stripe item1"></span> <span class="stripe item2"></span> <span class="stripe item3"></span> <span class="stripe item4"></span> <span class="stripe item5"></span> <span class="stripe item6"></span> <span class="stripe item7"></span> <span class="stripe item8"></span> <span class="stripe item9"></span> <span class="stripe item10"></span> <span class="stripe item11"></span> <span class="stripe item12"></span> <span class="stripe item13"></span> <span class="stripe item14"></span> <span class="stripe item15"></span> <span class="stripe item16"></span> <span class="stripe item17"></span> <span class="stripe item18"></span> <span class="stripe item19"></span> <span class="stripe item20"></span> <span class="stripe item21"></span> <span class="stripe item22"></span> <span class="stripe item23"></span> <span class="stripe item24"></span> <span class="stripe item25"></span> <span class="stripe item26"></span> <span class="stripe item27"></span> <span class="stripe item28"></span> <span class="stripe item29"></span> <span class="stripe item30"></span> <span class="stripe item31"></span> <span class="stripe item32"></span> <span class="stripe item33"></span> <span class="stripe item34"></span> <span class="stripe item35"></span> <span class="stripe item36"></span> <span class="stripe item37"></span> <span class="stripe item38"></span> <span class="stripe item39"></span> <span class="stripe item40"></span> <span class="stripe item41"></span> <span class="stripe item42"></span> <span class="stripe item43"></span> <span class="stripe item44"></span> <span class="stripe item45"></span> <span class="stripe item46"></span> <span class="stripe item47"></span> <span class="stripe item48"></span> <span class="stripe item49"></span> <span class="stripe item50"></span> </div>