CSS Tutorials

  • CSS JavaScript

    Stylus PX to REM Mixin

    The REM unit is the hottest thing since Christina Ricci ... it's hot.  And it's especially hot when it comes to font size.  Rather than paraphrase a bunch of documentation as to why REM is important, I'd like to point you to Jonathan Snook's outstanding Font sizing with rem post, where he explains sizing with PX, EM, and how REM comes into the picture.  Here's how I implemented REM sizing within Stylus with a PX fallback!

    Read Post
  • CSS Node.js

    uncss: Find Unused CSS

    You know what's better than adding features to a website or app, from a code perspective?  Removing stuff you don't need.  Whether it be code, images, or dependencies, getting rid of the crap stale code is like the first sip of a big glass of wine after a long day of stressful work.  Running a directory of images through ImageOptim is a euphoric experience, am I right?  What if there was a tool, however, which would allow you to find unused CSS for a given website?  There is, and it's called uncss, a NodeJS powered utility.  Let's take a look at how uncss works!

    Read Post
  • Lazy Load Resources Based on Element Presence

  • CSS

    CSS Vertical Text

    Almost every HTML element we create is thought of in the frame of horizontal.  We pay much more attention to widths than we do heights, especially when it comes to text within them. Sometimes we do, however, want to display element text in a vertical fashion.  In the old days of crippled Internet Explorers, this was mostly a losing battle.  These days, however, vertical text is a breeze.  Here's how to do it!

    Read Post View Demo
  • CSS CSS Animations Guest Blogger Markup

    How Nesting 3D Transformed Elements Works

    Ana Tudor is one of those people whose CodePen profiles you check out and go "holy shit." She's that good. She creates incredible visual effects with CSS, on of my favorites being this infinitely unpacked prism. Below she shares her expertise detailing how to create beautiful, nested 3D transforms!

    Read Post
  • CSS JavaScript Markup

    Startup Framework: Website Builder, Bootstrap Themes and More

    One conclusion that I've come to when evaluating my skills is that I'm not a designer.  Each time I redesign this blog, I identify a few sites I like and then meld them together.  Of course that means I end up with UI components that don't look uniform, and so I iterate on those over and over and in doing so create a massive code mess.  Of course there are UI frameworks out there but everyone uses them and sites start looking way too similar.  I was recently able to check out Startup Framework, a new product created for startups to quickly develop a mobile-friendly, semantically correct, and stylish site.  A few highlights of Startup Framework include...

    Read Post
  • CSS CSS Animations JavaScript

    Detecting CSS Animation Completion with JavaScript

    One fact of web development life in 2014 that's been difficult for me to admit is that the traditional JavaScript toolkit is mostly dead.  For years we relied on them for almost everything but now that JavaScript and CSS has caught up with what we need, we can often avoid using JavaScript toolkits if we take the time to research new native capabilities.  One argument for sticking with toolkits that I often hear is that CSS animations don't provide callback abilities.

    Read Post View Demo
  • CSS JavaScript

    Tweet For Code #2

    You don't need a thousand lines of code to make a big difference in any coding language.  Oftentimes it's quite the opposite:  a few tiny code snippets can do a world of good and accomplish big things.  I asked my Twitter followers to tweet to me their favorite tiny snippets of code — that's a bit difference to try to pack into 140 characters!  Here are my favorites from this round!

    Read Post
  • CSS

    Style External Links with CSS

    Styling external links is a common practice on most informational sites likes Wikipedia.  As a user, it's nice to know when you're being sent to another resource.  Many sites do the external links check on the server side, adding a `rel=external` attribute value or `external` class to external links.  In some cases that isn't possible or plausible.  After trolling around the interwebs, I found the following useful CSS snippet for styling external links...

    Read Post
  • CSS CSS Animations Demos Features Markup

    Create a CSS Flipping Animation

    You've all asked for it and now I've added it: Internet Explorer support! Annoyingly enough, the change involves rotate the front and back elements instead of just the container. Skip to this section if you'd like the latered Internet Explorer code. IE10+ is supported; IE9 does not support CSS animations.

    Read Post View Demo