CSS Tutorials

• By David WalshOctober 3, 2011

  CSS4 Preview – Selectors

  CSS is one probably the best bridge between web designers and developers so updates to the CSS spec are very exciting. The W3C recently posted an update to the working Selectors Level 4 spec, and there are many useful updates to be found.

• By David WalshSeptember 26, 2011

  Change Mobile Safari Highlight Color with CSS

  I love the amount of extra customization afforded to us by WebKit. That also makes me love the fact that, for the most part, WebKit Mobile is the choice renderer used by mobile devices. One rarely used style property is -webkit-tap-highlight-color, which allows developers...

• 

  
• By David WalshSeptember 22, 2011

  Elegant Overflow with CSS Ellipsis

  Overflow with text is always a big issue, especially in a programmatic environment. There's always only so much space but variable content to add into that space. I was recently working on a table for displaying user information and noticed that longer strings were...

• By David WalshAugust 22, 2011

  JavaScript and CSS Spinners with spin.js

  I think it's safe to say the days of using images to provide the "small touches" are over.  We can now safely create gradients, drop shadows, rounded corners, and scaled, rotated, transformed animations.  It seems we've now moved on to replacing...

• By David WalshAugust 19, 2011

  Cross Browser CSS Box Shadows

  Box shadows have been used on the web for quite a while, but they weren't created with CSS -- we needed to utilize some Photoshop game to create them.  For someone with no design talent, a.k.a me, the need to use Photoshop sucked.  Just because we...

• 

  
• By David WalshAugust 10, 2011

  Drag and Drop MooTools File Uploads

  Honesty hour confession:  file uploading within the web browser sucks.  It just does.  Like the ugly SELECT element, the file input is almost unstylable and looks different on different platforms.  Add to those criticism the fact that we're all used to drag and drop operations...

• By David WalshAugust 4, 2011

  MooTools Wall Plugin

  One of the more impressive MooTools plugins to hit the Forge recently was The Wall by Marco Dell'Anna.  The Wall creates an endless grid of elements which can be grabbed and dragged, fading in elements as they are encountered.  Let me show...

• By David WalshJuly 28, 2011

  Animating CSS3 Transforms with MooTools Fx

  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...

• 
• By David WalshJuly 27, 2011

  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.

• By David WalshJuly 19, 2011

  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...