I was recently visiting MooTools Developer Christoph Pojer’s website and noticed a sexy link hover effect: when you hover the link, the the link animates and tilts to the left or the right. To enhance the effect, the background color of the link is changed. I scoped out his JavaScript file to see how he created the effect but there were no link effects in it — the effects were being created with just CSS!
Having thrust myself into the world of JavaScript and JavaScript Libraries, I’ve often wondered: When are browser vendors going to see the helper methods/libraries created by the JavaScript toolkits and implement these functionalities natively within the browser? I realize that standards are important and browser vendors can’t afford to half-ass these implementations but I do believe they could be…expedited. The good news is that one of these functionalities has been add to the HTML5 API; classList.
The classList object, added to all nodes within the DOM, provides developers methods by which to add, remove, and toggle CSS classes on a node. classList also allows developers to check if a CSS class has been assigned to a given node.
Google recently debuted a new web service called the Font API. Google’s Font API provides developers a means by which they may quickly and painlessly add custom fonts to their website. Let’s take a quick look at the ways by which the Google Font API can be used.
Many of the fonts within Google’s font archive are available not only in standard format but also in Italic, Bold, and Italic Bold. The format for requesting a given font variant is:
{font}:{variant1},{variant2}
Here are a few examples of requesting each variant:
We all joke about the days of Web yesteryear. You remember them: stupid animated GIFs (flames and “coming soon” images, most notably), lame counters, guestbooks, applets, etc. Another “feature” we thought we had gotten rid of was the marquee. The marquee was a rudimentary, javascript-like effect to move text from one side of a block to another. I was recently looking at WebKit’s CSS specs and found that Safari has implemented CSS marquees.
.marquee {
overflow-x: -webkit-marquee;
-webkit-marquee-direction: ahead|auto|backwards|down|forwards|inherit|left|reverse|right|up;
-webkit-marquee-increment: small|medium|large;
-webkit-marquee-repetition: {number};
-webkit-marquee-speed: slow|normal|fast;
-webkit-marquee-style: alternate|inherit|none|scroll|slide;
font-size:1.4em;
}
There are five pieces to the marquee puzzle:
I was recently scoping out the horrid source code of the Google homepage when I noticed the “Google Search” and “I’m Feeling Lucky” buttons had a style definition I hadn’t seen before: -webkit-appearance. The value assigned to the style was “push-button.” They are buttons so that makes sense but I was curious as to the possible values available for that style. What I found was that there are a *ton* and that you can set any HTML element to look like a completely different element.