Category: Tutorials

Understanding the CSS Display Property

One of the most powerful and useful properties in all CSS is, without a doubt, the display property. And yet, it is also one of the least well understood, especially by those just starting out with CSS. So, in this post I’ll try to shed some light on this little CSS gem…
csshead 0 Comments

Flexible, Mobile-First Layouts with CSS3

Some experts are projecting mobile devices to become the dominant medium for web browsing within five years, overtaking browsing on desktop computers. Regardless of how accurate this projection turns out to be, it is clear that formatting websites for mobile-friendly viewing needs to become a staple of web design and development. There are many ways […]
csshead 0 Comments

CSS3 Minimalistic Navigation Menu

As you have probably heard by now, CSS3 animations are a powerful tool, which enables you to create animations which run without the need of applying additional scripting to the page. What is even better, in the next generation of browsers we will have even more powerful tools, including 3D transformations (already present in Safari). […]
csshead 0 Comments

What CSS3 Can Do For You: Animation and 3D effects

As CSS3 gains more buzz, more and more developers are finding great ways to utilize it. In my last post, I went over the great ways to develop buttons and how to effectively use imagery transitions. Now we will move on and talk about the great ways to use CSS3 for animation and 3D effects…
csshead 0 Comments

Body IDs – Making Life Easier for Yourself

One thing any good developer will tell you is that efficiency is key. Whether that be workflow, the code itself, or just achieving a single goal. Invest a little forethought at the beginning to save a lot of time later. I like to think of it as being cleverly lazy. One great example of this […]
csshead 0 Comments

How to Micro-Optimize Your CSS

In this article you’ll learn how to write leaner, cleaner CSS using 10+ micro-optimization techniques. The basic idea behind micro-optimizing your CSS involves writing clean code, eliminating extraneous characters, and reducing overall file size. And you don’t have to rely on an automated script to do everything for you. Instead of writing lazy, sloppy, bloated […]
csshead 0 Comments

A Complete Guide to CSS pseudo-classes

An in-depth article covering both CSS 2.1 and CSS 3 Pseudo Classes…
csshead 0 Comments

Sexy Tooltips with Just CSS

Providing supplementary information about potentially complex elements of a user interface is a central part of any website designer or developer’s workflow in creating usable and accessible websites. One of the most common mechanisms for providing extra details beyond what you can see on the page is the tooltip (a design pattern for showing tips […]
csshead 0 Comments

Creating Fancy Checkmark Icons with Pure CSS3

I was recently working on a personal project where I wanted to implement some cool “checkmark” icons like you see at left to spice up my unordered lists. I could’ve done it quite easily with the list-style-image property, but I was trying to keep my images and http requests to a minimum, so I wanted […]
csshead

CSS Image Replacement with pseudo-elements (NIR)

An accessible image replacement method using pseudo-elements and generated-content. This method works with images and/or CSS off; works with semi-transparent images; doesn’t hide text from screen-readers or search engines; and provides fallback for IE6 and IE7…
csshead 0 Comments
« Previous Page — Next Page »