CSS Archive


30 Amazing Resources for Sass Lovers


Despite the predictions of countless skeptics, Sass hasn’t proved to be a fad at all, but rather a remarkably robust set of tools that genuinely improve CSS authoring.

I’m a huge Sass fan and I know many of you are too, so I’ve compiled this list of thirty amazing resources for Sass lovers. In it you’ll find all kinds of goodies built on and for Sass: frameworks, plugins, apps and a lot more.

November 26th, 2012 Posted in CSS

Easel: A WYSIWYG Bootstrap Page Builder


Twitter Bootstrap makes creating complex page layouts a breeze. Drop in a few lines of HTML, apply a few classes and you’ve got yourself a decent looking, minimal working mockup.

Wouldn’t it be nice if things were even easier though? What if Bootstrap had a visual interface? What if you could build Bootstrap pages by dragging and dropping elements onto an empty canvas? With Easel.io, you can do exactly that. Let’s see how it works.

November 20th, 2012 Posted in CSS

A Beginner’s Guide to Zurb Foundation 3: The Grid


In the past, we’ve discussed Twitter Bootstrap quite a bit. Much more so than its most worthy competitor: Zurb’s Foundation. Now on its third iteration, Foundation is a robust and responsive front end framework used by hundreds of developers every day.

Over the course of several articles, we’re going to jump in and take a look at its various aspects from a complete beginner’s perspective. Today’s topic is my favorite part: the grid. Follow along to see how it works!

November 8th, 2012 Posted in CSS

Battle of the LESS Mixin Libraries: LESS Elements vs. LESS Hat vs. Bootstrap


LESS is a friendly, easily-approachable CSS preprocessor. Though ultimately, Sass and Stylus are more powerful and robust, LESS has a certain charm that keeps it as a forerunner in the battle of the preprocessors.

If you’re a Sass fan, then you can take advantage of Compass, an incredible framework that makes coding with complex CSS3 properties a breeze. But what about LESS users? Where’s their Compass? Today we’ll look at three awesome mixin libraries that will help fill that void.

October 8th, 2012 Posted in CSS

How to Use Adobe Edge Web Fonts on Your Site


Adobe recently launched a free web font service to complement Typekit, their amazing premium service. Adobe Edge Web Fonts currently gives you around 500 free font families that you can use on your site today with little effort. How great is that?

The process for implementing these fonts isn’t quite as straightforward as some of the other services that you might be used to, so today we’re going to dive in and take a look at how it all works.

October 4th, 2012 Posted in CSS

Inner Shadows in CSS: Images, Text and Beyond


Shadows in CSS are quick and easy, whether you’re slapping on a box-shadow or a text-shadow. But how comfortable are you with inner shadows? Can you pull off an inset box-shadow? How do you do the same thing on some text?

Today we’re going to learn some really simple inset shadow techniques that you can pull off with just a few lines of code. I’ll walk you through both the box-shadow and text-shadow syntax and how to change them to pull off an inset shadows.

September 13th, 2012 Posted in CSS

Toggle a Page’s Color and Content With Pure CSS


Today’s project is going to be a fun one. We’re going to build a basic HTML/CSS demo page, then add in a button that allows the user to toggle the page’s color scheme between to states: day and night. As the colors switch, so will various other elements on the page.

The really awesome part is that we can pull all of this off using only CSS. Along the way we’ll learn how to create a CSS-powered click event as well as how to wield pseudo elements to manipulate page content.

September 6th, 2012 Posted in CSS

Build a Fun Photo Swap Animation With CSS Keyframes


CSS keyframe animations open up a vast range of possibilities for what can be accomplished with CSS. Much more than simple, one-step transitions, keyframes can be used to achieve complex, multi-step animations that are quite impressive.

In today’s project, we’re going to start from scratch and build a stack of two photos that spread out and swap their stacking order when you hover over them. Along the way we’ll learn all about how to wield keyframes like a pro and juggle all of those head-spinning prefixes!

September 5th, 2012 Posted in CSS

A Beginner’s Guide to Leaner CSS


Don’t repeat yourself (DRY). It’s a simple concept with the ability to completely change the way you write code. If I look back to my early days with CSS though, I don’t think the concept meant much to me. Sure, all right, don’t repeat myself, thanks for the advice. How does that translate to applicable advice though?

Today we’re going to look at the very core concepts for how to rethink the CSS you’ve been writing by trimming the fat and reducing the redundancy. The result will be leaner CSS that’s easier to author and maintain.

September 4th, 2012 Posted in CSS

Code a Mountain Lion Style Notification Window With CSS


This one is for my fellow Mac nerds. Apple’s newest desktop operating system, OS X Mountain Lion, has a built-in notification system similar to what we’ve had on iOS for years. Today we’re going to build one of the notification windows using CSS.

To pull this off, we’ll use some basic HTML and a little bit of fancy CSS3. To finish it off, we’ll add a touch of jQuery magic to allow the user to drag the window around. It’ll be tons of fun, so boot up your favorite coding app and follow along!

September 3rd, 2012 Posted in CSS