Treehouse

CSS Tutorials

  • Tweet For Code #4

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

  • Element.offsetHeight for Visibility

    One of the (perceived) tricky tasks within front-end coding is checking if an element is visible or not.  The very naive way of checking if an element is visible (i.e. has presence or takes up space on the page) is by checking its display style value: Notice...

  • Write Better Media Queries with Sass

    Let's face facts: media queries can be a pain. They're difficult to write and they tend to get duplicated a lot. Sass includes a few helpful features that make media queries easier to work with. This article will show you these tricks and how you can...

  • Emulate the Invert Filter Effect with Sass

    After figuring out how to get the result of the invert filter for a solid background, the next idea that came to mind was naturally doing this with Sass in order to reproduce the filter effect for browsers not supporting filters. Sass already has...

  • Detect Inverted Color with CSS and JavaScript

    There was something that bugged me after reading David's article on the invert filter last week. It was this sentence: The values reported back by window.getComputedStyle(el) will be the original CSS values, however, so there's no way of getting the true inverted values of given properties. But...

  • Invert Colors Using CSS

    I've been obsessed lately with finding new or lesser known CSS properties and values and playing around when them.  Some of them are quite useful and others are seemingly only for a giggle.  CSS filters fall in the useful department:  grayscale, blur, sepia --...

  • The Truth About CSS

    Whether you call yourself a "full stack engineer" or not, most of us fashion ourselves able to dabble on each side of a website infrastructure.  Of course the same people who fancy themselves as capable would probably also tell you they're much stronger on client or server sides....

  • Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() – this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

  • CSS Custom Cursors

    Remember the Web 1.0 days where you had to customize your site in every way possible?  You abused the scrollbars in Internet Explorer, of course, but the most popular external service I can remember was CometCursor.  CometCursor let you create and use loads of custom cursors for...

  • Add Rules to Stylesheets with JavaScript

    Since we're using so much JavaScript in our web applications these days, we're looking for more ways to keep them fast.  We use event delegation to keep event listening efficient, we use function debouncing to limit the number a times a given method can...