Up and coming web design trends
marquee and blink are back in
Anyone old enough to remember Geocities may likely also have fond memories the blink & marquee html tags. Using them on a site demonstrated an advanced level of technical proficiency with this new fangled ‘web’ thing to anyone brave enough to venture outside of safe confines of an AOL chatroom.
Marquee and blink are “depreciated” in HTML 5, because, apparently, the W3C hates cool looking websites that make the bottom of my laptop get really warm. Well I just want to say that I “depreciate” the W3C’s hatred of fun. So we here at CSS Perverts are going to do something about it.
A Better Solution
Fortunately, My compatriot and I have come up with a new method to ensure many more years of impressing relatives and local business owners. The answer involves CSS (California Style Sheets, for the uninitiated). CSS allows you to add styles and animations to bits of text on the web.
First lets take a look at the old way.
<body>
<marquee><blink>hi h8rs</blink></marquee>
</body>This does nothing in a “Modern” browser (Thanks Obama). But in IE 6 (with bonzai buddy installed), this generates a beautiful scrolly, blinky text. Now it only sits there and mocks us. Actually, marquee still works but it goes too slow.
Now What?
Copy and paste this in to anything with a hole.
<div class=”fuckfuck”>hi h8rs</div><style>
.fuckfuck {
display: block;
text-align: center;
margin: 50px;
font-size: 5em;
-webkit-animation-name: blink, marquee;
-webkit-animation-duration: .04s;
-webkit-animation-iteration-count: infinite;
}@-webkit-keyframes blink {
0% { color:#00FF00; }
25% { color:#FF00FF; }
50% { color:#FF0000; }
75% { color:#00FFFF; }
100% { color:#00FFFF; }
}@-webkit-keyframes marquee {
0% { -webkit-transform:translateX(1000px); }
50% { -webkit-transform:translateX(-1000px); }
100% { -webkit-transform:translateX(1000px); }
}
</style>
The first this I should note is that there is no real reason for me to name the class .fuckfuck but, unlike my mother, CSS doesn’t ground me for 2 weeks when I use a curse-word. Next you’ll notice that we replaced ‘scroll’ and ‘marquee’ with ‘div’. ‘div’ is what we in the biz call semantic markup. You aren’t in the biz so don’t call it that. Only I can call it that.
Now that we’ve cleared that up, let’s go over the CSS, which is everything between the opening and closing style tags. I’m actually not going to explain it cause I’m lazy but you can just click the link below to see it in action
If you’re wondering why your computer is screaming in agony, it’s because of that genius bit of javascript added by Pat Nakajima. He will go far.
Charles Barkley Approves
How do I know that? Well, I do work at the NBA, so we have a sort of spiritual connection. Anyway, keep an eye out for these emerging trends in WEB DESIGN.
Nicholas Ortenzio is a software developer who can bounce a check higher than he can bounce a ball.
