Transparent WordPress Semiomantics XO

Devel­op­ing a trans­par­ent Word­Press Based Photo Blog, I got inspired to use some ele­ments in a Grunge envi­ron­ment. It’s cre­ative, it’s fun, it’s the Semi­oman­tics XO Theme for WordPress.

The first step is to cre­ate a grunge background:

Grunge Back­ground for WP

This back­ground is 1680 x 1250 pix­els big and has a weight of 130 kb only.

Step 2: make your back­grounds trans­par­ent and set opac­ity to 70 %.

Add some fancy fonts for h1 and h2 using the Font­burner plugin.

It is not easy to read con­tent on col­ored back­grounds, there­fore we add a hover func­tion to show white back­grounds on left con­tent and sidebar.

No ver­ti­cal tiling is needed, also on long blog posts when the con­tent scrolls over the back­ground. We fix the back­ground attach­ment (back­ground image).

To get the header effect I have loaded a trans­par­ent header png with no con­tent and added a top mar­gin to adjust the posi­tion of the content.

The blog title is painted on the back­ground with posi­tion top left to allow dis­play on any mon­i­tor irre­spec­tive of res­o­lu­tion and size.

Your cre­ativ­ity is the  limit. You could cre­ate an over­lay look by adding a black back­ground with 80% opacity:

Try and enjoy!

• word­press backgrounds
• word­press transparent
• grunge wall backgrounds
• back­ground word­press blog
• grunge header
• trans­par­ent twit­ter sidebar
• web con­tent back­ground image
• theme word­press grunge
• wall­pa­per grunge wall
• grunge cre­ative backgrounds

Related posts:

1. Block­quote, Pul­lquote and Code
2. Fancy Fonts Headers
3. Yorgo Nestoridis Design Brand Header
4. Design Brand­ing
5. Gene Line Grunge Background

Tags: Background, Design, Design Workshop, Fonts, Graphic, Graphics Design, grunge, Header, on, Theme, Transparent, Web Design, Web Site Design, WP, XO, Yorgo Nestoridis, Yorgo Nestoridis Design

This entry was posted on October 4, 2009 at 12:54 pm and is filed under Design, Semiomantics, Web Design, WordPress. You can follow any responses to this entry through the RSS 2.0 feed.