Liven up design

Headline Banners

screenshot

Want a fun way to liven up a headline? Stick it on a banner. This is another trend that is quite popular in web design today, you can find this idea all over the web.

As you can see in the image above, there are three main variations of your typical banner, all of which can be used in conjunction across a site. The first is a freestanding banner, which sort of folds back on itself on the ends.

If you’re wondering how to make the 3D effect, it couldn’t be easier. First, choose a color for the main or front part of the banner. Then choose a slightly darker shade for the side portions. Finally, create a tiny triangle and make it yet another shade darker. The three pieces are shown separated and then together in the image below.

screenshot

The other two versions of the banner are a variation on this theme. This time though, the idea is to wrap the banner around some content. You can make the banner peek out from one side as with the second example or wrap around the full object as with the third example.

The website WPCoder actually uses all three variations of the banner in its design. Here are a few screenshots of some of the elements.

screenshot

These have been created with images but it’s becoming quite common to achieve a similar effect using only HTML5 and CSS3. Check out this tutorial from WebDesignTuts for a walkthrough of this process.

Advertisements
Posted in 1. Leave a Comment »

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: