CSS Tutorials
![MooTools Star Ratings with MooStarRating]()
MooTools Star Ratings with MooStarRating
I've said it over and over but I'll say it again: JavaScript's main role in web applications is to enhance otherwise boring, static functionality provided by the browser. One perfect example of this is the Javascript/AJAX-powered star rating systems that have become popular over the...
![Link Nudging with CSS3 Animations]()
Link Nudging with CSS3 Animations
One of the more popular and simple effects I've featured on this blog over the past year has been linking nudging. I've created this effect with three flavors of JavaScript: MooTools, jQuery, and even the Dojo Toolkit. Luckily CSS3 (almost) allows us to ditch...
![Create an Exploding Logo with CSS3 and MooTools or jQuery]()
Create an Exploding Logo with CSS3 and MooTools or jQuery
When MooTools contributor and moo4q creator Ryan Florence first showed me his outstanding CSS animation post, I was floored. His exploding text effect is an amazing example of the power of CSS3 and a dash of JavaScript. I wanted to implement this...
![Conditional CSS with MooTools’ Browser Object]()
Conditional CSS with MooTools’ Browser Object
Whether we want to admit it or not, we all need a bit of browser-specific or even version-specific CSS sometimes. We try to follow standards but in the end we're at the mercy of browsers. And you know what? Browsers sometimes have bugs that cause us...
![Create Spinning, Fading Icons with CSS3 and jQuery]()
Create Spinning, Fading Icons with CSS3 and jQuery
Last week I debuted a popular blog post titled Create Spinning, Fading Icons with CSS3 and MooTools. The post detailed how you could leverage CSS3's transformations and opacity properties, as well as the magical MooTools JavaScript framework, to...
-
![Create Spinning, Fading Icons with CSS3 and MooTools]()
Create Spinning, Fading Icons with CSS3 and MooTools
A goal of my latest blog redesign was to practice what I preached a bit more; add a bit more subtle flair. One of the ways I accomplished that was by using CSS3 animations to change the display of my profile icons (RSS, GitHub, etc.) I...
![MooTools ScrollSpy, Mobile Devices, JavaScript Scroll Events, and CSS Positioning]()
MooTools ScrollSpy, Mobile Devices, JavaScript Scroll Events, and CSS Positioning
One question I've been asked often is why ScrollSpy and my Go To Top link functionality don't appear to work well on the iPhone, iPad, or any other mobile device. The problem is simple to identify and easy to fix. The issue comes down...
![HTML5 Placeholder Styling with CSS]()
HTML5 Placeholder Styling with CSS
Last week I showed you how you could style selected text with CSS. I've searched for more interesting CSS style properties and found another:
INPUTplaceholder styling. Let me show you how to style placeholder text withinINPUTelements with some unique CSS code. The CSS Firefox...
![Create Spinning Rays with CSS3 Animations & JavaScript]()
Create Spinning Rays with CSS3 Animations & JavaScript
Thomas Fuchs, creator of script2 (scriptaculous' second iteration) and Zepto.js (mobile JavaScript framework), creates outstanding animated elements with JavaScript. He's a legend in his own right, and for good reason: his work has helped to inspire developers everywhere to drop Flash and opt...
![Customize Textarea Resizing with CSS]()
Customize Textarea Resizing with CSS
Webkit-based web browsers like Safari and Chrome have led web innovation the past few years. Whether its implementing new JavaScript APIs, providing more CSS capabilities than other browsers, or simply providing blazing-fast page rendering, WebKit has been head and shoulders above other browsers in page control...
