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 white1 background at 50% opacity.
But since IE2 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); }3
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…
Emma says:
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.
Jenny says:
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*
Krystal says:
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!
Jenny says:
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. -_-
Ariel says:
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?
Jenny says:
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!
Anna says:
Awesomeeee layout!
Oh I so need to catch up on my sleep.
I just have to survive through my midterms today and it’s spring break for me baby!
Thanks for the tip! I suck at css
Jenny says:
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.
Jennifer says:
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.
Jenny says:
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!
Malin says:
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!
Jenny says:
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.
ash says:
aww i love this layout it’s too cute.
Never used the CSS3 but will try to anyways. hehehe.
Jenny says:
Thanks! You should definitely look into CSS3, especially features like rounded corners and opacity – mad useful!
Jay says:
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 ._.).
Jenny says:
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.
Cat says:
Such a cute layout! I love it =D
I’ve messed with some border radius stuff with CSS3 but haven’t tried opacity yet. Thanks for the tips!
Jenny says:
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.
Charlie says:
I read the title and immediately thought of the iframe trend lol. 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.
Jenny says:
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
Oridusartic says:
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.
Jenny says:
Yeah, I sure hope so too. So far so good though, but we’ll see
Jenny says:
that is so awesome
I’ll have to remember this when I touch up my layout 
Jenny says:
I already like your current layout (it’s so cute!), but I’d love to see what touch ups you’ll add to it
Jenny says:
awww thank you!! ♥
Thao says:
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!
Jenny says:
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
Justin says:
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.
Jenny says:
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.
Ongaku says:
The new layout looks really nice. You have mad wordpress template skills. XD
Jenny says:
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.
Bonnie says:
TOTALLY adorable layout
PIKACHUU
Jenny says:
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!
Aranie says:
Omgosh, this layout is so cute!! and thanks for the opacity tips, when I get time I’m going to try them out!