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.
Hey, subtle must be your midlde name. Great post!
zOA9LA zdycymterobp
WOX6AS , [url=http://xcremikilaqz.com/]xcremikilaqz[/url], [link=http://hxkfspadbcng.com/]hxkfspadbcng[/link], http://ykmnxpiatoiz.com/
Superior tihnikng demonstrated above. Thanks!
Never seen a betetr post! ICOCBW
simply just have to mention you aid make a lot of good points and should put up several concepts to add on as soon as a day or two.
Can I simply say what a reduction to search out somebody who truly knows what theyre speaking about on the internet. You definitely know tips on how to convey an issue to mild and make it important. More people must read this and perceive this side of the story. I cant believe youre no more common because you positively have the gift.
I wanted to compose a brief word in order to say thanks to you for some of the fantastic tricks you are placing here. My extensive internet search has at the end been rewarded with professional concept to go over with my visitors. I ‘d believe that many of us readers actually are undoubtedly fortunate to live in a wonderful network with so many brilliant people with interesting tactics. I feel quite grateful to have encountered your web pages and look forward to some more awesome times reading here. Thanks once again for everything.
Would love to perpetually get updated great blog ! .
Slighty off topic but I enjoyed reading your weblog
Hey, have been searching on Bing for that topic and took some hours to finally find a blog that provides the needed infos – and that not in boring way, quite opposite. Rarely to find and the design is cool as well. Maybe just change the link colour to pink, but that just besides. Thanks again and I’ll check this blog more often now. Site bookmarked! Many thanks for sharing it up! Happy Blogging
I have been absent for some time, but now I remember why I used to love this blog. Thanks , I will try and check back more frequently. How frequently you update your website?
Excellent weblog here! Additionally your website a lot up fast! What host are you the usage of? Can I get your associate link on your host? I want my website loaded up as quickly as yours lol
Hi, terrific website you’ve place together right here. I totally enjoyed scanning this page. I noticed it tonight and soon observed that it was very worthwhile, so it motivated me to give a reply. I believe several will most likely have the identical view in reference to this theme. So, I’ll return soon when I make additional time to view additional. This is strange, but I was just calling my sister regarding this problem, so this info was effectively time. I’m pumped I stumbled across this page, it made my day. I’ll bookmark this site and research to the feed in addition. Thank you and see you later.
I really wanted to write down a quick comment in order to say thanks to you for all of the superb concepts you are giving out on this website. My incredibly long internet lookup has now been honored with pleasant tips to talk about with my best friends. I ‘d assert that many of us readers are very lucky to dwell in a great website with very many lovely people with beneficial ideas. I feel very blessed to have used your entire website and look forward to tons of more exciting times reading here. Thank you once more for everything.
Hey ho, have been looking on Google for that topic and took a long time to finally find a blog that provides the needed infos – and that not in boring way, quite opposite. Rarely to find and the design is cool as well. Maybe just change the link colour to blue, but that just besides. Thanks again and I’ll check this blog more often now. Site bookmarked! Thank you so much for sharing it up! See you
Wow! cool post dude!
Super! Keep writing such well researched entries
I haven¡¦t checked in here for a while because I thought it was getting boring, but the last several posts are good quality so I guess I will add you back to my daily bloglist. You deserve it my friend
I might not be the most perceptive person on this planet but I can clearly see that people are hurting for money, all around the world. Okay, I have been doing online marketing for about 12 years now. Over the years, I have tried every product that I could get my hands on. If there is a money making method out there that I have not tried, I would be quite surprised. There have been some good years and there have been some years that were… not so good. I’ll get right to the point. If you are will to think outside the box, break away from the traditional GURU crap and see a WORKING method that you can implement right away, you need to check this out. It was put together by someone that I highly respect. I think that you will find his approach quite refreshing. He is obviously very rich and after you take a look at this program you will be able to see why. After you watch the videos, you will see why he has made this an invitation only program (don’t worry, I have the invite for you). The system is set up so that you would only need to work one hour a day but if you’re like me, you would probably work it to death in order to maximize your profits. The payments on this thing are $200 to $300 a shot. Experienced marketers will be slapping their foreheads while complete newbies will be getting an even chance at success. I can’t give too much away here but it would be a good idea to get in on this earlier rather than waiting. Time is burning so I suggest that you take a look as soon as possible. I really think that this will make a huge difference for you so go take a look at the video. -> http://cash411.info/go/239
Excellent site, I learn many things from here…
Would you be occupied with exchanging links?