CSS + H1 + jQuery = Logo?

[lookslikepat]

Hey! Thought I’d get some input on this logo I made, thought I’d share it with you, hopefully someone may find something in there useful ;)

I only used CSS ( well, And .append() and addClass() w/ JQuery ). Not sure if/when I’m gonna use it so I won’t be linking to a page, but here’s what it turned out looking like in all 5 diff browsers. (IE7 & IE8) looked so much the same I didn’t bother. Along the way I was really SHOCKED to see that it looked pretty much like I wanted it to in IE :/

Btw I’d LOVE it if someone notices something funky in the code! ( I’m a ttly greeeen novice on jQuery )

Chrome
[img]http://elundmark.se/filer/t-chrome.png[/img]
Firefox
[img]http://elundmark.se/filer/t-firefox.png[/img]
IE7 IE 8
[img]http://elundmark.se/filer/t-ie7-8.png[/img]
Opera
[img]http://elundmark.se/filer/t-opera.png[/img]
Safari
[img]http://elundmark.se/filer/t-safari.png[/img]

To do it I had to span and em the shiz out of a H1 tag. For SEO I replaced a clean version

Code:

…

…

the Average Viewport

…

with the one below using jQuery.

Code:

the Average Viewport

I had some problems with the rendering bug for IE, but what’s new about that right? Finally I removed the "fade on load" bit for IE, looked terrible… guess it’s hard to avoid that filter bug when it’s faded 2 ways; "tricking" the browser to delay showing it; fade it in when it’s ready by having it be visibility: hidden; to avoid the "Flash before Javascript has done it’s thing".
To my surprise it turned out looking pretty good, in all browsers! Even IE played along (7 & 8), BUT:

– Never have I noticed the diff so clearly before, Safari sure does it look small, small but Goood-lookin’. Well, thought I’d share this, I’m sure something in there will come in handy ;)

CSS

Code:

#main { float: left; width: 330px; }
h1 {
font: small-caps bold 80px/63px “Trebuchet MS”, Trebuchet, Arial, sans-serif;
color: #000;
padding: 30px;
text-shadow: 0px 1px 3px #CCC;
text-indent: 7px;
visibility: hidden; }
h1.visible {
visibility: visible; }
h1 span.decrease {
font-size: 56px; }
h1 span.increase {
color: #AAA;
text-shadow: 0px 2px 2px #000; }
h1 em {
line-height: 59px;
font-weight: bold;
font-style: normal; }

jQuery

Code:

function fadeinTitle() {
var replacedTitle = ‘the Average Viewport‘;
if ( !$.browser.msie ) {
$(“h1”).empty().append(replacedTitle).fadeTo(0, 0).addClass(‘visible’).fadeTo(1800, 1);
} else {
$(“h1”).empty().append(replacedTitle).addClass(‘visible’);
};
};
$(document).ready(function(){
fadeinTitle();
});

[vincent]

Looks pretty good, with the exception of IE, of course. Although it is creative, it might be defeating the purpose, which I’m guessing is SEO. If a tag gets degraded too much, search engines pretty much cancel it out because they think you are trying some black hat shit. For example, when people make nav bars with images and they do the text-indent: -9999px to get the text off the page, those text links no longer help with SEO, but they are helpful for screen readers and stuff. The reason search engines don’t pay attention to text with like huge margins and stuff is because the spiders think you are trying to hide content, like link farming off of the side of the page and stuff.

Anyway, that’s how it used to be. But, I haven’t really kept up with SEO much since I quit the SEO job I had, so it could have changed. But in my opinion, I don’t think it’s worth it.

[Author]

Posts