CSS Tutorials
I recently posted an awesome (if I may say so myself) CSS3 / MooTools tutorials called Create a Photo Stack Effect with Pure CSS Animations or MooTools. The post presented two ways, a pure CSS method or MooTools-powered class, to duplicate Google+'s elegant photo stack animation. The MooTools method took a bit of Fx exploration since MooTools doesn't animate CSS transform out of the box, and this exploration reminded me of just how amazing MooTools' Fx classes are. We all know MooTools features the smoothest effects of any JavaScript toolkit, and now I'm confident in saying the Fx class is as flexible or more flexible than any toolkit available. Let me show you how simple it is to override a Fx instance's set method to animate any CSS property you'd like!
Remove Input Shadows on iPad
I was recently tasked with testing an existing web application on the iPad. I was fairly certain the app would work without issues, but my larger concern was styling. One undesirable style I found was that all text INPUT elements had a hideous top shadow effect. After a bit of research, I discovered that the -webkit-appearance property was the key:
Create a Photo Stack Effect with Pure CSS Animations or MooTools
My favorite technological piece of Google Plus is its image upload and display handling. You can drag the images from your OS right into a browser's DIV element, the images upload right before your eyes, and the albums page displays a sexy photo deck animation when you hover over them. Outstanding! I've researched the effect a bit and was able to pull it off with both pure CSS and some MooTools JavaScript.
Compile LESS CSS Files with the LESS App
Last week I showed you how you can easily create your own Dijit theme with LESS CSS. The process of creating LESS files is simple, as is compilation of said files, but I was frequently forgetting to compile the .less files before checking the style changes in the browser. When I did have the sense to compile, I found myself completely annoyed at having to run the same command over and over. Enter LESS.app: a Mac app which allows you to add folders containing .less files and automatically compiles them when a file is saved!
Create Your Own Dijit CSS Theme with LESS CSS
The Dojo Toolkit seems to just get better and better. One of the new additions in Dojo 1.6 was the use of LESS CSS to create Dijit themes. The move to using LESS is a brilliant one because it makes creating your own Dijit theme much easier. Let's take a look at how Dojo leverages LESS to create Dijit themes and create our own theme.
Convert PNGs to CSS Gradients with pngtocss
CSS gradients are a hot topic right now and why shouldn't they be? CSS gradients save time by not making you create an image, they save a request to that image, and the code to create them is smaller than the image's file size. If you've been using image-based gradients and are looking to move your web apps to CSS-based gradients, there's a great new project aimed at automating PNG gradients into CSS gradients called pngtocss. pngtocss is easy to obtain, configure, and use!
Duplicate DeSandro’s CSS Effect
I recently stumbled upon David DeSandro's website when I saw a tweet stating that someone had stolen/hotlinked his website design and code, and he decided to do the only logical thing to retaliate: use some simple JavaScript goodness to inject unicorns into their page. A brilliant idea, if I may say so myself (and I may). David's design is simplistic but features a few classy CSS effects, one of the most impressive being the footer "made this" animation. Let me show you how David accomplished this effect.
CSS Gradients
With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements. CSS gradients are another step in that direction. Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome, we can safely implement them in our websites. Let's look at the basics of CSS gradients: their syntax, browser support, and fallbacks.
CSS Rounded Corners
The ability to create rounded corners with CSS opens the possibility of subtle design improvements without the need to include images. CSS rounded corners thus save us time in creating images and requests to the server. Today, rounded corners with CSS are supported by all of the major browsers: Safari, Chrome, Internet Explorer, Opera, and Firefox. Let's look at border-radius syntax, caveats, and Internet Explorer support.
Background Animations Using MooTools
Updated 4/25/2011: The background animation has been updated to work well with Internet Explorer 7 and 8, and more efficiently with every other browser. This was accomplished by adding the wait property to the animation, and using an initial setStyle assignment to work around an IE8 background-position bug.