Of H1 Images, Opacity, and Other Curios
Posted by Kurt on Friday, May 8, 2009 in category:
I am starting a blog. This may seem like an odd move to a lot of you for a couple reasons:
- I don’t update the blog I have because I stopped being emo forever ago
- I already sorta have a blog?
But I want to start a real blog. One in which I can chronicle my development revelations and tribulations. Strictly technical junk here, no personal life stuff. It all starts with this post about the development of said blog…
You see, I am not a designer. I have often been praised for my design sense, and I admit I may have some aesthetic sense about me, but I do not enjoy designing and creating designs from the bottom up, and coming up with even the most meagre of layouts causes me great mental anguish. I really like to focus on the backend of my projects. I cram as many neat gizmos and features as I can think of into each one (the mcguffins I have completed here thus far will be detailed below), but each is a slave to the design, not a driving force.
This site has to be my own. I have to design it, I have to pump up the design, and in this case, I have to make it Disco Shiny. So here I am, I’ve started down the path, and I am about 40% of the way to the point where I feel my own ability to embellish existing design can kick in and make it awesome. Anyway, let’s get into the things I’ve done so far on the technical side.
The first order of business was to make this content div semi-transparent. The silly way is to use the opacity CSS attribute which is undesirable for a couple reasons:
- Does not work in IE.
- Everything inside an opacity-adjusted element is itself rendered at lower opacity, at least in Firefox.
The solution is to use an image that is a strip of 80% opacity white. Some versions of IE hate on the alpha channel in PNGs powerhard, but the fix for it is easy and in JavaScript. All I had to do was include jQuery and the pngFix plugin, and I’m set! It feels a bit hackish, but it also fixes the second issue there, so I feel it’s good, clean fun all around.
I was just slightly pleased with myself after that, but I realized that I could do more. I’m still getting used to jQuery and JavaScript in general, but I’m loving every minute of it. I decided I wanted to use my own font for header images, but that it’s certainly not a font the average user would have on his computer. The solution to that is typically to use an image, but that’s messy and time-consuming, so I wrote a script to do it for me using PHP’s GD image functions (they are awful and clunky but that’s a rant for another post). It accepts some parameters, the least of which is the text you want to make into an image. The JavaScript is a piece of cake after that.
var color = "333333";
if($(this).hasClass('red')) color = "CC2233";
else if($(this).hasClass('blue')) color = "223399";
var size = "18";
if($(this).hasClass("huge")) size = "35";
$(this).html('<img src="<?php bloginfo("template_directory"); ?>/futura.php?text='+$(this).html()+'&color='+color+'&size='+size+'" alt="'+$(this).html()+'" />');
This is wrapped in an each() function that iterates over all H1 tags in the page. It replaces the text in each with an image of the text in my font of the moment which is Futura. The ramifications of this are that it has great accessibility while maintaining a comfortable viewing experience for the majority of my readers. Have an example:
Here is some header text that is NO LONGER plain
And that’s about it for tonight I’m bushed. Development continues tomorrow.
I like where this is going
This is a great , can’t wait to see more of what you can do!
I think the timestamp should go under the sender’s message here, not above it. Or else make the timestamp tiny.
Hello, can you please post some more information on this topic? I would like to read more.