Transparent background and opaque text

On a totally off-topic-to-the-title note:

My new theme is done and up (I like to state the obvious), and many thanks to Lani who let me use her adorable Pokemon artwork in my designs!
UMD kicked Duke’s ass in basketball tonight, 79-72! Sorry Duke fans, but Terps > Blue Devils. ALWAYS.
It’s almost Friday!

These things made my otherwise miserably long and omg-I-want-to-kill-myself week somewhat more tolerable. Again, let me know if you find bugs or errors of any sort with this theme. I wouldn’t be surprised if you did, since it was design + coded on a semi-functional brain that was in desperate need of sleep. Anyways, back on topic.

I haven’t done any tutorials/tips in a while, and as I was designing this new theme, I learned something I want to share with you all. With the arrival of CSS3, there are now so many things you can do with your designs without having to rely on images. One of these things is the opacity function. You can apply this property to pretty much any CSS selector: image, div, h2, etc. by using:
div { opacity: 0.5; }
This would give you a div with an opacity of 50%.

One problem with using opacity is that everything nested in the div becomes transparent. Text, images, whatnots will all inherit an opacity of whatever %. To counter this problem, you’ll need to change the background property instead, and scrap opacity all together. So instead of:
div { opacity: 0.5; }
You should use:
div { background: rgba(255, 255, 255, 0.5); }
This will give you a div with a white¹ background at 50% opacity.

But since IE² is dysfunctional when it comes to a lot of things, your background won’t show up at all if you just use the above CSS. So as a safety net, pick a color that is similar to the transparency result, and you get:
div { background: rgb(242, 241, 230); background: rgba(255, 255, 255, 0.5); }³
The order is important: rgb MUST come before rgbaEither that, or my browser testings were giving me funky results. Of course, there is always the traditional transparent png background method, which I won’t go into details about. You can easily find a tutorial on that through Google. Hope this helps! Now back to studying…Error processing request

You can easily figure out a color’s rgb through Photoshop or any image editor. ↩
Even IE8, God knows why people still use this dying breed of browser. ↩
This is the CSS I used for this theme. ↩

written on March 4, 2010 in Tutorials, WWW

34 Comments

You might like these posts:

6 day weekend

Blogging pet peeves

Who are you designing for?

Would you like a bookmark?

Is this what you are looking for?

http://kre8tivity.nu Emma

I love this layout and I love Pokemon too! Pikachu is a little cutie

I love what can be achieved with CSS3, I wish all browsers would just support the same things, life would be so much easier.

http://riyuu.org Jenny

Yay for another Pokemon fan!
The new features in CSS3 allows us to do so much more using just code and no images! But you're right, it's a shame that certain browsers just refuse to go with the flow. *cough*DIE IE DIE*cough*

http://essencious.org Krystal

I love CSS3, my favourite feature is round corners which I've used on my site (in Firefox) I'm so annoyed that none of the stuff works in IE 7, not that I use IE.

I've been experimenting with CSS3 at work a lot lately, shame we can't use it much because of the incompactabity with some browsers and older browsers as some clients are still using IE6!

http://riyuu.org Jenny

I've been waiting forever for CSS to come out with the rounded corner feature, since the idea of having to use images to achieve the effect in the past annoyed me. Though I know I should still take IE users into account, the fact that a lot of the CSS3 features don't work on it (not even IE8, the hell?) just irks me. If they can't be bothered to use a better browser, then I can't be bothered to make my site work for them.

http://we-loved.info Ariel

Thanks for the tutorial! I wish I had known this before, haha.

The new theme is so pretty! I love the header fonts for the names a lot :-O I wonder how you make them so?

http://riyuu.org Jenny

There are many ways to use custom fonts on your website (is this what you're talking about? I'm a little confused), but I use Cufon. I wrote a tutorial on it on my old portfolio's blog, but you can find it here at http://riyuu.org/using-custom-fonts-on-your-site/
Hope that helps!

http://www.sushi-box.org Anna

Awesomeeee layout!

I just have to survive through my midterms today and it's spring break for me baby! Oh I so need to catch up on my sleep.

Thanks for the tip! I suck at css

http://riyuu.org Jenny

Lucky you! A lot of my friends are going on spring break this coming week (like you), yet my school decides to be a butt and make ours the week after. FAIL.

http://me.battalglia.org Jennifer

Oh my gosh! This is so useful! I can't tell you how many times I wanted to shake my computer because whenever I changed the opacity of my div, it also changed the opacity of my text which is not always a good thing.

Thank you so much for this! CSS3, you're my hero.

http://riyuu.org Jenny

Yay, glad I could help! Yeah, at first I was like "Whee! Opacity with CSS3!" too, until I saw my text turn transparent. But CSS3, you did not disappoint me!

http://www.infektia.net Malin

I love your new theme! It's awesome

I haven't bothered using CSS3 yet since it doesn't work on all browsers, such a shame, there are so many awesome things you can do with it!

http://riyuu.org Jenny

Yeah, it's a shame not all browser support it. Well, mostly IE and old versions. But I don't see why people wouldn't update their browsers to the latest version, and I don't even want to think about why people still use disgusting IE (unless they're on a work or school computer, then that can't be helped). Even MY mom who still has a hard time finding the letters on the keyboard knows how awful IE is, now that's saying something.

http://sweet-essence.com ash

aww i love this layout it's too cute.

Never used the CSS3 but will try to anyways. hehehe.

http://riyuu.org Jenny

Thanks! You should definitely look into CSS3, especially features like rounded corners and opacity – mad useful!

http://dragonrain.com Jay

I haven't actually started my dive into CSS3 yet. Though what I've heard of it so far sounds pretty phenomenal…I'm just worried about cross-browser compatibility (and of course, the older versions of those browsers ._.).

http://riyuu.org Jenny

Cross-browser compatibility is a big issue, which is why I often include what I call "backup" CSS so that should CSS3 now work, then at least my site won't look dreadful.

http://www.silent-white.com/ Cat

Such a cute layout! I love it

I've messed with some border radius stuff with CSS3 but haven't tried opacity yet. Thanks for the tips!

http://riyuu.org Jenny

Thanks! So far I've tried border radius, drop shadow and opacity, but I'm definitely going to look into CSS3 some more to see what else I can do.

http://www.carnelianvalley.com/blog Charlie

I read the title and immediately thought of the iframe trend . I didn't know transparency was part of CSS3, am way behind with keeping up to date on what'd been changed.

Love the theme, what font are you using for the headers? I expected you'd had to use an image for them.

http://riyuu.org Jenny

Lol, I remember that trend! That was a LONG time ago, if I recall correctly. CSS3 comes with a lot of new features, not just transparency, and I myself am still looking into it as well.

The font I used for the header is called Sketch Rockwell. I actually use a script, not an image, and I've wrote a tutorial here if you're interested

http://blog.oridusartic.com/ Oridusartic

This theme is nicely done! Really cute. Hopefully no one will cause a trouble with your theme again.

Hmm.. btw, I should try the magic of CSS3 too next time. Thanks for the quick tips.

http://riyuu.org Jenny

Yeah, I sure hope so too. So far so good though, but we'll see

http://justjennifer.me Jenny

that is so awesome I'll have to remember this when I touch up my layout

http://riyuu.org Jenny

I already like your current layout (it's so cute!), but I'd love to see what touch ups you'll add to it

http://justjennifer.me Jenny

awww thank you!! ♥

http://dorkinheels.com Thao

Opacity always pissed me off because it was so fidgety amongst the different browsers. I haven't tried it in awhile because of that, but I might now with your new method, thanks!

http://riyuu.org Jenny

My opacity isn't that obvious, so even if the CSS doesn't work and it ends up showing a plain color background, it won't be that noticeable. However, that might be an issue if your opacity is more evident. But just try it out and see

http://ipeedalittle.com Justin

The new layout looks great! You have the full evolution of pichu. So cute!! (I'm an uber pokemon nerd)

Nice tutorial, too. Whenever I use opacity, I just create the transparent thing as a png in photoshop and do it that way. Screw all that coding… haha I'm lazy.

http://riyuu.org Jenny

Yes! Pokemon nerds unite! Speaking of Pokemon and nerdism, I'm uber excited about Pokemon HeartGold and SoulSilver coming out

Haha, I thought about the png option as well, but I got lazy and was like "screw that image editing!" Also, I'm not sure how it would work either since my divs have rounded corners. But the png method would definitely be more reliable, for sure.

http://www.panikku.com Ongaku

The new layout looks really nice. You have mad wordpress template skills.

http://riyuu.org Jenny

Practice, practice, practice! Though I do notice that once I stop blogging/designing for a while, I find it a lot harder to create themes again.

http://unspokenwords.org Bonnie

TOTALLY adorable layout PIKACHUU

http://riyuu.org Jenny

Yes! I felt that since I claim myself to be a Pikachu lover, it would just be bs if I never created a layout with Pikachu in it. So ta da!

http://www.blog.beatbox-bandits.org Aranie

Omgosh, this layout is so cute!! and thanks for the opacity tips, when I get time I'm going to try them out!