CSS - Page 4

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

How to Build a Responsive Slide-Down Navigation Menu
CSS / 1 May 2013

How to Build a Responsive Slide-Down Navigation Menu

After a long period of researching mobile responsive layouts, I’m spent quite a bit of time experimenting with various UI designs. One major hotspot on the page is often the website’s main navigation. Users want quick access to your content pages — and this will always be the case, either on a full monitor or a smaller mobile responsive screen.

For this tutorial I want to demonstrate how we can use a combination of CSS3 media queries along with some jQuery to manage a sliding navigation menu. The links will appear as normal on the frontend but drop into a hidden menu after resizing below 600px. Instead we see a little menu pull-down icon which will toggle open and closed on command.

Creating Content List Columns Using Entypo Font Icons
CSS / 24 Apr 2013

Creating Content List Columns Using Entypo Font Icons

There’s a general trend towards smaller “column listings” in homepage layouts. Specifically, tech startups and landing pages use this effect for promoting features in their products. But it’s a neat little design layout style for any purpose, and using icons in your design will break away from the normal template designs for an intriguing list display.

In this tutorial I want to demonstrate how we can use custom CSS3 webfonts as an icon inside the HTML. We will create a very basic startup website using the two-column list approach. All of the CSS is very straightforward, although you may need to do a bit of research on some of the properties. This effect is native to all standards-compliant browsers and renders perfectly on OS X or Windows.

Focal Point: Intelligent Cropping of Responsive Images
CSS / 12 Apr 2013

Focal Point: Intelligent Cropping of Responsive Images

The practice of implementing responsive images is still in its infancy. We’ve seen a lot of ideas and suggestions for how it should be done and we’re bound to see a lot more.

Today we’re going to look at a fascinating little framework that allows you to not only automatically resize your images when the viewport changes, but also crop the images with a specific important focal point in mind. Amazingly enough, it does all this with pure CSS. Read on to see how it works.

Helpful HTML Form Feedback With CSS3 Transitions
CSS / 8 Apr 2013

Helpful HTML Form Feedback With CSS3 Transitions

Designers may have noticed an ever-increasing use of CSS3 transition properties. Website interfaces have been dramatically improved with custom animation styles, all without the need for JavaScript (when used sensibly, of course!)

In this tutorial I want to demonstrate how we can build animation effects in HTML5 input fields. I’ll be designing a simple contact form with a couple of fields and a textarea. Using the CSS3 :valid pseudo class it is easier than ever to customize text inputs. Check out my live demo example to get an idea of what the final product looks like.

Mobile First Design: Why It’s Great and Why It Sucks
CSS / 5 Apr 2013

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!

Using Checkboxes to Toggle CSS and Create Click Events
CSS / 24 Mar 2013

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.

How to Center Anything With CSS
CSS / 6 Mar 2013

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!

Unique CSS3 Header Styles for Copyfitting Typography
CSS / 4 Mar 2013

Unique CSS3 Header Styles for Copyfitting Typography

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!

Zen Grids: A Responsive Grid System Built on Sass
CSS / 27 Feb 2013

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.

5 Simple and Practical CSS List Styles You Can Copy and Paste
CSS / 22 Feb 2013

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!

Code a Fantastic Animated Circular Thumbnail Gallery With CSS
CSS / 15 Feb 2013

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.

Creating a CSS Thumbnail Grid With a Dynamic Flyout Menu
CSS / 4 Feb 2013

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.