You may have seen them appearing here and there. I couldn’t find any better name and no one seems to talk about this so I’ve made my own denomination: the 3D Ribbon.
Sometimes used has title background or as full container background they’ve appeared over the last few month, maybe late last year. Some big sites have use them in their design. The “3D” effect brakes the flat surface of the page and gives some depth to the content.
Let’s have a look at some examples:
Jepser Bernardino uses them on the sidebar titles, post dates and categories
On Popupon, the menu bar and posts dates get the treatment
Sell My House Quick tool on the homepage is placed inside a 3d ribbon to make it stand out more
On Hipsterist ribbons are everywhere, from the site banner to menu buttons and widgets titles
Yoast is a good example of multi layered page using ribbons to get the perspective right
And last but not least, on CSS-Ttricks Chris uses ribbons to hilight sidebar titles and advert banners
Quick ribbon design in photoshop
Create a new document in photoshop and draw a rectangle using the rectangle shape tool.
Draw a second rectangle with the same height but thinner and give it a darker colour then the first rectangle. This is gonna be our “folded” parts on each sides.
Move the rectangle behind the first one. With the layer still selected press cmd+T or ctrl+T to enter the free transform mode. Right click on the layer and select perspective.
Drag the middle right anchor point down to get the 3d effect. It should look like the first rectangle has been folded on the side.
Keep this layer selected and press ctrl+J or cmd+J to duplicate it. Then ctrl+T or cmd+T, right click on it and select “Flip Horizontal”.
Now drag the layer to the other side of the big rectangle. You should end up with something like this:
Now it is up to you to mae it look good. I choose to add a light subtle gradient and a 1px white border inside the shape.
Et voila!
Hammocks here
If your looking for Cannon Professional come to us.
Loading ...
Great post! Now how do you code it?
Well I guess I would use it as a background of a div or something. I’ll write a quick tut about that soon
a solution could be a position absolute for the div container of the ribbon. So you can write something like this:
#ribbon{
position:absolute;
background:url(blabla.jpg);
top:0; //here the top offset
left:-15px; //for example
}
remember that the container of the ribbon div has to have a position:relative/absolute to reset the position parent. I hope it can help
Thanks looks great
Good observation.