Tag: example

Controlling width with CSS3 box-sizing

An incredibly useful CSS3 feature when you’re creating columns with floats is box-sizing. It lets you choose which box sizing model to use – whether or not an element’s width and height include padding and border or not.This is useful since it makes it much easier to define flexible widths where you also need padding […]
csshead 0 Comments

CSS properties that affect type rendering

When it comes to type rendering on the web, there’s not much web designers can do. The way fonts appear on screen is mostly due to operating systems, browsers, typeface designs, font files, and how those font files are (or are not) augmented with instructions for the most unforgiving rendering scenarios. But in some cases, […]
csshead 0 Comments

Make CSS3 buttons like a boss

High-quality interface elements are a great way to add that extra bit of refinement to a website. I’ve been maintaining a repo of CSS3 buttons for the past few months and I’m starting to see them slowly make their way out into the real world. This tutorial is going to give you a deeper understanding […]
csshead 0 Comments

Pure CSS GUI Icons Experimental

An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set…
csshead 0 Comments

Understanding CSS3 Transitions

We can start to use CSS3 transitions right now as long as we carefully choose the situations in which to use them. They certainly won’t replace existing technologies like Flash, JavaScript, or SVG (especially without broader browser support)—but they can be used to push the experience layer a notch higher. And most importantly, they’re relatively […]
csshead 0 Comments

KEYS.css

A simple stylesheet for rendering beautiful keyboard-style elements…
csshead 0 Comments

Fun With CSS Text-Shadow

I used 100 text-shadows to make the graphic below happen. Sure, it’s excessive, ridiculous and just plain silly. But why, at times, can’t the web be all of those things? I’m all for sensible, well-reasoned CSS, but let’s keep things in perspective. We’re not surgeons. We can experiment without causing anyone bodily injury…
csshead 0 Comments

CSS Counters: counter-increment and Friends

The CSS2.1 spec introduced a new technique allowing developers to combine three CSS properties and a pseudo-element to create auto-incrementing counters – similar to what is displayed in an ordered list. While counters for lists are limited to <ol> or <ul> elements and only with simple incrementation, the new counter method introduced in CSS2.1 allows […]
csshead 0 Comments

Word-Wrap: A CSS3 Property That Works in Every Browser

Okay, this is not exactly the kind of CSS property that’s going to be used in every design. But it is a very useful one when you need it, and some might say it’s much more practical than some of the fluffy new CSS3 features like transitions and whatnot.The property I’m talking about is the […]
csshead 0 Comments

Understanding CSS3 border-image

The new CSS3 property border-image is a little tricky, but it can allow you to create flexible boxes with custom borders (or drop shadows, if that’s your thing) with a single div and a single image. In this article I explain how the border-image shorthand property works in today’s browsers…
csshead 0 Comments
« Previous Page — Next Page »