Learn the latest tips, techniques, and approaches for working with CSS.

CSS / 2 Jan 2012

Mastering Mouse Enter and Exit Events With CSS Transitions

While working on a recent post that utilized CSS transitions, I stumbled upon some interesting revelations completely by accident. Switching up where you place the transition syntax can have a dramatic effect on how the transition is carried out.

Today we’re going to go over the various options for CSS transition syntax and how each affects the animation given whether your mouse is entering or exiting a hover.

CSS / 29 Dec 2011

Journey Into Mordor With CSS

Today’s project is silly and fun, but it does have a real point and educational purpose. In a recent article, I explored five ways to use multiple CSS background images to create cool hover effects. I had one idea in that article that I didn’t get to simply because its complexity merited a standalone explanation.

This article then is an extension of that previous discussion. We’ll be using multiple backgrounds to create a cool cinematic effect where someone traverses a map while the vantage point zooms out. The best and most nerd-tastic way to show this off is of course to use the familiar tale of Frodo crossing Middle Earth to arrive at Mount Doom in Mordor. Let’s get started.

CSS / 21 Dec 2011

5 Incredibly Useful Tools Built Into Twitter Bootstrap

Bootstrap is an interesting framework or “toolkit” offered up to developers completely free of charge by none other than Twitter.com. According to Twitter, Bootstrap is “designed to kickstart development of webapps and sites.”

Today we’re going to jump into Bootstrap and take a quick look at some of the things that it has to offer. This should help you decide whether this is just another bloated framework or an incredibly useful tool that you should use to kickstart your next project.

CSS / 20 Dec 2011

Make It Snow on Your Website With CSS Keyframe Animations

The holiday season is at its peak and for some lucky people in weather appropriate climates, winter is in full swing. I live in Phoenix so real winter, and consequently snow, is really just a distant dream. Thus I am forced to turn to nerdery to get my fix!

Today we’re going to go over a super simple CSS technique that you can use to make it snow on your website. It’ll only take you a few minutes at the most and it serves as a great introduction to using multiple background images and keyframe animations in CSS.

CSS / 14 Dec 2011

Four Simple and Fun CSS Button Hover Effects for Beginners

Today we’re going to take a step back from advanced discussions about CSS preprocessors and return to some good old basics. We’ll work up four super simple CSS buttons, each with a unique animated hover effect.

Follow along with me and create your own fun button styles. Also feel free to grab my code and use it on your projects. If you’re a CSS newbie looking for a good way to make your buttons more interesting, this article is for you!

CSS / 13 Dec 2011

Extends and Control Directives: Two Crazy Things Sass Can Do That LESS Can’t

LESS and Sass are aimed at accomplishing the same thing, and are indeed so similar that you could easily confuse the two, but are they really created equal? Is there anything that one can do that the other can’t?

On a feature to feature basis, each syntax has one or two things that the other doesn’t. However, despite the fact that I was initially drawn to LESS’ simplicity, in the long run I couldn’t help but be sucked in by a few key features that make Sass really powerful. Follow along as I blow your mind with some of the amazing and unique features of Sass.

CSS / 6 Dec 2011

3 Things You Never Thought to Do With Media Queries

You already know how to use media queries to create a responsive design, but have you tried to use them for anything else? Is it possible that media queries can be used natively to improve your workflow?

Follow along as we completely break from tradition and hijack media queries to help us test and tweak a design. You’ve never seen media queries like this before!

CSS / 5 Dec 2011

10 LESS CSS Examples You Should Steal for Your Projects

LESS, Sass and other CSS preprocessors represent an awesome way to extend CSS to be everything a programmer ever wanted. Variables, mathematical operations, mixins and a lot more make these tools invaluable to coders who can appreciate the benefits of typing less while accomplishing more.

One of the most major hurdles to getting started with these tools is simply figuring out just what the heck you’re going to do with them. We’ll help you out in a big way today by hooking you up with ten incredibly useful LESS snippets that you can drop into your projects today.

CSS / 29 Nov 2011

Create Five Awesome Hover Effects Using CSS Multiple Backgrounds

Today we’re going to have all kinds of fun with the CSS multiple backgrounds feature. You’ll learn how to use multiple backgrounds in a simple way and how to go much further by combining the technique with hover actions and CSS transitions to create some really cool effects.

Follow along as we code five different applications of this idea that you can copy and paste to create your own awesome hovers.

CSS / 23 Nov 2011

How to Build a Responsive Frankenstein Framework With LESS

CSS layout frameworks are super helpful, but they can be a mess. You always have to conform to someone else’s system, whether or not it makes sense to you.

Today we’re going to ditch this notion and build an ultra-lightweight framework that can be implemented wherever and however you want to achieve complex multi-column layouts in seconds flat. You build this Frankenstein Framework as you go so there are zero unused classes and absolutely no code bloat. Did I mention that it’s also easy to make to make it responsive? Read on to see the monster come to life.

CSS / 15 Nov 2011

6 Things I Learned About Print Stylesheets From HTML5 Boilerplate

Print stylesheets can be a pain if you don’t know what you’re doing. Before you even approach one you need to make sure to do some solid research into how to go about it.

Today we’re going to help you along by first discussing the conceptual considerations that you need to keep in mind when creating a print stylesheet. Then we’ll dive into some code from the famous HTML5 Boilerplate to see some modern solutions for addressing the problems that arise when printing from the web.

CSS / 27 Oct 2011

Build an Animated Sliding Menu With Pseudo Selectors and CSS3

Today we’re going to have all kinds of fun. First we’ll build an animated menu using some shiny new CSS3 while learning how to implement pseudo selectors in a practical way on a real project. Then we’ll follow that up with how to build the same thing without pseudo selectors for better browser support. Finally, we’ll end with a look at how to scrap all that fancy CSS in favor of some good old fashioned jQuery.

Join us as we examine not one but three ways to tackle a CSS sliding navigation menu!