O'Reilly

CSS Tutorials

  • Sara Soueidan’s Favorite CodePen Demos

    A few months ago, Chris Coyier shared his favourite CodePen demos right here on David’s blog. A while back David asked me to share some of my favourite pens too, so here are some of the demos that have blown my mind in the past...

  • Ana Tudor’s Favorite CodePen Demos

    Cocoon I love canvas, I love interactive demos and I don't think I have ever been more impressed by somebody's work than when I discovered what Tiffany Rayside has created on CodePen. So I had to start off with one of her interactive canvas pens, even though...

  • SVG Animations Using CSS and Snap.svg

    Today I wanted to share with you the ease of animation in SVG with the tools we have available to us today. SVG is still one of those subjects that can scare away a lot of developers, but I'm here to show you hopefully just...

  • Regular Expressions for the Rest of Us

    Sooner or later you’ll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

  • Font Smoothing in Webkit and Firefox

    I don't pretend to be a typography or design expert -- I just know what looks good and what doesn't.  A few years ago I saw a few CSS properties I didn't recognize and when I toggled them on and off, the text went from beautiful to...not...

  • Scoping CSS Animations to Media Queries

    When coding my blog's redesigns, I think and design the site in device width stages, and in the following order: Desktop:  all general styles, none wrapped in a media query Tablet:  media query, roughly popular tablet widths Phone:  media query, any width below tablet width Print:  media query, mostly a bunch display: none Since I focus on...

  • 5 Ways to Make Your Site Smaller and Faster

    Confession:  I'd say once a week I genuinely wish I was a kid who spent his work day cutting grass and doing landscaping.  Why?  Because at the end of the day, they are able to say "the grass is cut, the job is complete."  As Web Developers, we...

  • Create a 2 Column Layout with Flexbox

    Flexbox was supposed to be the pot of gold at the long, long rainbow of insufficient CSS layout techniques.  And the only disappointment I've experienced with flexbox is that browser vendors took so long to implement it.  I can't also claim to have pushed flexbox's limits, but...

  • CSS Vertical Center with Flexbox

    I'm 31 years old and feel like I've been in the web development game for centuries.  We knew forever that layouts in CSS were a nightmare and we all considered flexbox our savior.  Whether it turns out that way remains to be seen but flexbox does easily...

  • Write Simple, Elegant and Maintainable Media Queries with Sass

    I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...