CSS Archive


Mobile First Design: Why It’s Great and Why It Sucks


Historically, most web designers and their clients have approached the desktop side of any project first, while leaving the mobile part as a secondary goal that gets accomplished later. Even with the rise of responsive design, many of us begin with the “full size” site and work our way down.

There’s a growing trend in the industry though to flip this workflow on its head and actually begin with mobile considerations and then work up to a larger desktop version. Why would you ever approach a project this way? What are some of the pros and cons of this strategy? Read on to find out!

April 5th, 2013 Posted in CSS

Using Checkboxes to Toggle CSS and Create Click Events


More and more lately I’ve seen developers utilizing tricks to create toggle states using pure CSS. This allows you to skip the JavaScript without sacrificing the interaction. How does this work? Is it an acceptable practice?

Today we’re going to examine two distinct methods for utilizing a checkbox to create a click event that swaps between two images using good old HTML and CSS. We’ll finish off with a brief discussion on semantics and the pros/cons of this technique.

March 24th, 2013 Posted in CSS

How to Center Anything With CSS


Recently, we took a dive into the very core concepts behind CSS layout and explored the differences between absolute and relative positioning. We’re going to follow that up with another CSS layout talk, this time based around a fundamental question that almost every new developer asks: how do you center something?

There are a bunch of different types of web elements and layout situations, each calling for a unique solution for centering (both vertically and horizontally). Today we’ll go over a bunch of these scenarios so you can wrap your mind around how they work and come away with the confidence to center anything!

March 6th, 2013 Posted in CSS

Unique CSS3 Header Styles for Copyfitting Typography

Unique CSS3 Header Typography Styles tutorial

All of the newer properties emerging from CSS3 specifications have been immensely helpful in constructing more advanced UI designs. Webpages have been seeing a dramatic overhaul in the methods used to build typical layout styles. Notably typography and buttons/form elements are seeing the largest makeover – and with more developers launching open source projects there appears to be no end in sight.

For this tutorial I want to demonstrate how we can build a few sample headings into a basic webpage. I am using mostly CSS3 effects on the top navigation bar, along with the typography in the page. All of these techniques should carry over into the newer standards-compliant web browsers. Plus there are so many various design techniques you may duplicate and apply into any project. Be sure and check out my live demo to get an idea of what we are trying to build!

March 4th, 2013 Posted in CSS

Zen Grids: A Responsive Grid System Built on Sass


Building grids was moderately complicated before responsive design, these days they can be downright intimidating. When you dive into a complex layout, it’s easy to get lost in all of the math and percentages. Sure, the hardcore nerds among us love to play with this stuff, but some developers just want to get to work!

Today we’re going to look at an awesome grid system that will help you set up your responsive grids with very little effort. It’s semantic, built for responsive design, completely flexible to the way you work, and powered by Sass. Meet Zen Grids.

February 27th, 2013 Posted in CSS

5 Simple and Practical CSS List Styles You Can Copy and Paste


Who doesn’t love a good list? We use them constantly in our markup for a variety of different situations. Today we’re going to take a look at a few simple and practical examples that you can steal and use in your own work.

We start off with a fun animated vertical list, then style up a list with thumbnails and text, another with just images and finally an ordered list where the numbers are styled differently than the rest of the type. There’s a ton of great things to learn here so let’s jump in!

February 22nd, 2013 Posted in CSS

Code a Fantastic Animated Circular Thumbnail Gallery With CSS


Thumbnail galleries are a constant source of fascination for me. There’s so much more fun to be had than simply creating a grid of squares and calling it a day. Especially since CSS3 gives us so many powerful new tools to work with.

Today we’re going to mix up the boring old standard image gallery by turning it into a series of animated circles. Along the way we’ll learn a ton of helpful CSS knowledge that will help you in all manner of future projects.

February 15th, 2013 Posted in CSS

Creating a CSS Thumbnail Grid With a Dynamic Flyout Menu


When presenting data in a grid you often lose the ability to include extra information. Aside from appending dynamic menus or hover effects there is very little room to include metadata on each item. I want to use this tutorial as a thought process into the user experience of image thumbnail grids.

We will create a small flyout menu holding additional information on the image. This includes the image name, original source URL, and author URL. The beauty of this example is that we will be creating the dynamic effect using only CSS3 properties. Mostly all standards-compliant browsers will support dynamic CSS3 animations and these look fantastic! But even without animations, the flyout content will still work properly and degrade naturally for an all-around enjoyable user experience.

February 4th, 2013 Posted in CSS

Gridpak Revisited: A Closer Look at the Responsive Grid Generator


One of the most interesting and useful responsive grid generators around is a tool called Gridpak, which allows you to use a simple and fun UI to create fluid, media-query driven grids. We reviewed Gridpak around a year ago and came to the conclusion that, although useful, it came up short in the area of user friendliness when it came to implementing the code.

The developers have made some progress in this area and I think it’s about time we took another look. Join us as we dive into how Gridpak has improved its code offering and structure to provide a better, more streamlined experience for users.

February 1st, 2013 Posted in CSS

Build a Fun True or False Quiz With CSS


I’m constantly surprised by what you can achieve using only HTML, CSS and a little ingenuity. I love to think outside the box and attempt creative experiments just to see if I can pull it off.

Today’s random challenge is to create a fun little true/false quiz. Questions will be presented to the user and answers will be revealed only on click. To make the magic happen, we’ll turn to some pretty crazy methods and use features like active, focus and even tabindex! You’re bound to learn some quirky stuff so hit the jump and follow along.

January 21st, 2013 Posted in CSS