Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40

Big CSS Rollover Links


Randsco News

It takes time to create blog entries and not everything that happens, merits an entry. So, we've created this 'news' section, to keep readers up-to-date with our misadventures and accomplishments. Read about it here FIRST, before it makes it into a blog entry.

Filed in:News

Big CSS Rollover Links

November 28th, 2010  · stk

NewsBrief: [Big CSS Rollover Links] Randsco Labs unveils a new pure-CSS technique. The new technique utilizes large CSS rollover images to be combined with small target areas. (It inverts normal link behavior and provides for a multitude of innovative and new ways to style traditional links.

Big CSS Rollovers for Little Links

Randsco Labs Develops Amazing pure-CSS Technique

Randsco Labs - Reporters learned Friday that the rumors were true. Randsco Laboratories has indeed developed an amazing, breakthrough pure-CSS technique that combines large rollover elements with graphical links.

"Rollover links are nothing new," said Scott Kimler, Vice President of Research and Development at Randsco, "What is new are combining large rollovers with small target areas."

css rollover splatcss rollover for paintball store

Scott then demonstrated the technique and the assembled crowd clapped.

"The magic of this lightweight CSS code is achieved by harnessing the power of CSS directives in a unique way, taking advantage of built-in specificity hierarchy, natural z-index order and the ability of modern browsers to apply hover styling to any element," Scott explained.

The code was developed (and is currently deployed) on a Randsco Canadian-sponsor website - Nicol Street Pawnbrokers. On that website, the image is twice as large as the demonstration here and has a much more colorful "pop".

The technique is difficult to describe in words and much easier to show in a demonstration, like the one here. When you hover your mouse over the paintball graphic, an astonishingly large "splat" pops up, completely covering the graphic and surrounding elements (i.e., sidebar, adjacent links, images, etc).

"But ... and here's the tricky part," said Scott, "the link target area doesn't change. When you move your mouse outside of the paintball graphic, the splat disappears. That's the opposite of what normally happens and is the key to this newly-developed technique."

"This CSS technique allows an almost unlimited ability of developers and designers to style links, without interfering with neighboring links and other hover-able elements," said Scott.

Several reporters wanted to know when the technique would be available to the general public and Scott replied, "Soon. Right now our technical team is quite excited about the potential of this code and are eager to develop some uniquely-styled examples."

"Basically," Scott continued, "The geeks at Randsco Labs want to play with it a bit, before they release it into the public domain. They are hoping to transfer the technique to text links and utilize the code in some stunning slide-shows and other graphical displays. Once this work is done, Randsco Labs will summarize the technique in a White Paper and release it on the main company website. We're hoping to have this work finalized sometime during the first two quarters of the new year."

About Randsco Labs

Founded in 2004, Randsco Labs is the technical research laboratory for Randsco, specializing in XHTML and CSS web techniques.

Randsco Labs is responsible for popular pure-CSS techniques such as Photo Caption Zoom, popInfo and @font-face tutorials and more.

Randsco Labs occupies a small portion of the 5-acre Randsco campus, which is located on beautiful Vancouver Island in British Columbia. Randsco moved operations from Alberta to British Columbia in 2006.

Views: 10364 views
Leave a Comment · GuestBook
default pin-it button
Updated: 29-Nov-2010
Web View Count: 10364 viewsLast Web Update: 29-Nov-2010

Your Two Sense:

XHTML tags allowed. URLs & such will be converted to links.

Subscribe to Comments

Auto convert line breaks to <br />

No Comments or trackbacks for this post yet ...