CSS Tutorials
Creating Scrolling Parallax Effects with CSS
Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...
Display Images as Grayscale with CSS Filters
CSS filters aren't yet widely supported but they are indeed impressive and a modern need for web imagery. CSS filters allow you to modify the display of images in a variety of ways, one of those ways being displaying images as grayscale. Doing so requires the...
Wrapping Code Samples on Mobile Devices
One part of being a technical blogger that I've had to come to grips with is code samples and small mobile device screens. I was amazed when I saw a double-digit percentage of visits to this blog were from mobile phones -- mental! I started paying more attention to...
How to Handle Deferred Objects in DoCSSa
Introduction DoCSSa is a Sass based architecture and methodology. You can read about it at docssa.info and get the source code of that documentation on the GitHub page. The source code makes use of the concepts, so it's a good starting point. In this article, we...
Sass Color Variables That Don’t Suck
One of the best reasons to use Sass is variables. They help keep your code DRY, which makes it easy to maintain and change. However, with colors, it's easy for your variables to get out of hand. In this article, I'll show you an...
7 Things You Didn’t Know You Could Do with CSS
CSS and JavaScript, believe it or not, are starting to overlap as CSS adds more functionality. When I wrote 5 Ways that CSS and JavaScript Interact That You May Not Know About, people were surprised at how CSS and JavaScript have come to overlap.
CSS vs. JS Animation: Which is Faster?
How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...
Preview: Element Queries, From the Feet Up
Element Queries, what are they? Have you ever wanted to style an element using something like Media Queries, but based on *its own* dimensions instead of the browser's viewport? That's what Element Queries would provide. Having this ability would make responsive styling of layouts and components easier...
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 outstandinguncss: 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...