Blink! Stack
Marquee! Stack

Marquee! Stack

Mimic the old school <marquee> element with CSS3

As the old-timers among us may remember, the <blink> and <marquee> elements were very popular in the nineties to spice up your home page. Many of those home pages were on Geocities, a very popular web hosting service back then. Personal home pages often looked something like this (OK, my nostalgia may make me exaggerate a little).
Here’s what Wikipedia says about the <blink> element:
Despite its initial popularity among home users in the 1990s, it has since fallen out of favor due to its overuse and the difficulty it presents in reading. The tag achieved notoriety for being user-unfriendly in the opinion of many designers. Lou Montulli, often credited as the inventor of the blink element, has said that he considers "the blink tag to be the worst thing I've ever done for the Internet" […]. (source)

And about the <marquee> element:
The marquee tag is a non-standard HTML element which […] was first introduced in early versions of Microsoft's Internet Explorer, and was compared to Netscape's blink element, as a proprietary non-standard extension to the HTML standard with usability problems. The W3C advises against its use in HTML documents. […] Marquee can be distracting.The human eye is attracted to movement, and marquee text is constantly moving. (source)

TL;DR: both elements are now obsolete and their use is not advised.
Calling these elements user-unfriendly and distracting is a little oversimplified to my taste. There’s a reason CSS3 animations and keyframes are becoming more and more popular (see my Morphext and Morphist Stacks for example)! As long as they are used in moderation, they can do just what the W3C considers undesirable: attract the human eye, thus emphasizing elements on a page (a time limited offer for example).

And what about vintage design? I have a nostalgic mind, so I enjoy retro elements in a design, and I’m sure I’m not alone in this.

Reason enough to bring back the <blink> and <marquee> elements for RapidWeaver users – with stacks that use the latest technology (CSS3 animations and keyframes).

Demo
See above, next to the icons; and below, under Usage. And: in case you missed it, the ‘Geocities’ page shows an abundant use of both stacks.

Usage
Blink! stack:
  • Drag any stack that can contain text (or HTML) into the dropzone of the stack.
  • Mark the text you want to blink with underline (Format > Underline, cmd-U or manually with <u>…</u>).
  • By default, the underlining will be removed. Use the option remove underlining to prevent this.
Optionally, add some animated GIFs, blinking text and/or primary colors to your page to complete the nostalgic nineties look.

Need help using one of these stacks on a non-stacks page? Here’s a tutorial.

Background
These stacks were mainly made for practicing CSS3 animations and keyframes.

Limitations
  • In Internet Explorer worse than version 10 there’s no blinking or scrolling.
  • The U.S. government (and others) recommend that Web pages avoid blinking images at between 2 hertz and 55 hertz to avoid triggering epileptic seizures among users (more info). Use the Blink! Stack at your own risk!
  • Especially with big text, the letters in the Marquee! Stack may appear a little shaky. CSS3 animations are not perfect (yet), so live with it…

Please use this form to report all issues, questions and comments.

These stacks requires the Stacks plugin by YourHead (version 2 or higher).
Do you like these stacks? Please consider leaving a review in the RapidWeaver Community’s Addons section [Blink! Stack] [Marquee!].
Blink! HUD

Marquee! HUD
© 2012-2017 Marathia Web Design | Contact