CSS Tutorials

Clearing Floats: Why is it Necessary Even in “Modern” Browsers?

Clearing Floats: Why is it Necessary Even in The other day, someone asked me the following question: “If I understand it right clear float is automatic in most modern browsers right?”

If you’re new to CSS, then it would seem that the answer to this question should be “yes, of course — modern browsers don’t have these types of bugs!” But the necessity to clear floats is not a browser bug; it’s actually, well, more of a CSS feature. And it’s still needed in so-called “modern” browsers (assuming you’re using floats for layout).

Default CSS Display Values for Different HTML Elements

on | 17 Comments

Default Display Values for Different HTML ElementsEvery element in an HTML document accepts a value for the CSS display property. The possible values you can use for display are many.

The three most commonly used values are none, block, and inline. But what if you don’t define a display value for an element? Well, all elements have an initial or default state for their display value. Let’s consider some of these and see some interesting things you might not have known.

The CSS Clip Property

The CSS Clip PropertyYou’ve probably heard of CSS’s clip property. It has some unique features and syntax, and in this post I’ll outline how it’s used.

At the end of the post you’ll find a link to a demo page where some photos are used to animate the clip property, just to visually demonstrate what this property does.

Animating CSS3 Gradients

Animating CSS3 GradientsThe CSS3 Transitions spec maintains a list of properties that are animatable. This list, as far as I know, covers animatable properties for both transitions and keyframe animations.

But that’s a list of properties. And so, since CSS3 gradients are not really properties, but are actually images created by the browser, they aren’t in that list of animatable properties. But that doesn’t mean you can’t animate gradients.

Gradients, just like standard images, are subject to certain background-related properties that are animatable. These include background-size and background-position.

Mimic ‘onmouseout’ with CSS3 Transitions

on | 8 Comments

Mimic 'onmouseout' with CSS3 TransitionsHere’s a crazy and ridiculous tip that probably has limited uses, but illustrates some quirky possibilities with CSS3 transitions. I’ve written something about this before and Chris Coyier explained the basic concept on his site.

But in this quick post I’ll show you how to make an element have a “mouseout” or “mouseleave” transition with no “mouseover” or “mouseenter” transition.

CSS3 Structural Pseudo-class Expressions Explained

CSS Structural Pseudo-class Expressions ExplainedYou probably know that the CSS3 spec includes a number of structural pseudo-classes. Four of these pseudo-classes use function-like syntax that allow an argument to be passed in using parentheses. These are: nth-child(), nth-last-child(), nth-of-type(), and nth-last-of-type().

The purpose of the parentheses is to allow one or more elements to be selected based on a keyword (either odd or even), an integer, or an expression.

Alternative Units for CSS3 Rotation Transforms

Alternative Units for CSS3 Rotation TransformsCustomarily, the unit being used to rotate elements with CSS3 transforms is the “degrees” unit, declared by appending the string “deg” at the end of the unit value.

But “degrees” isn’t the only unit available when rotating elements with transforms. You can also use other units, namely gradians, radians, and turns.

Pure CSS Tool Tips Revisited

Pure CSS Tool Tips RevisitedCreating tool tips with pure CSS and no images or JavaScript is nothing new. I’ve never personally written anything on the topic, but there are plenty of examples and tutorials to choose from.

For a recent project, I had to research the concept and find something that suited my needs. I didn’t spend too many hours researching but, from what I could see, most (if not all) solutions available were satisfactory for most cases, but had a few minor flaws.

So in this post I’ll address these minor weaknesses and present what I think might be a more bulletproof solution.

CSS3 Attribute Selectors: Substring Matching

on | 7 Comments

CSS3 Attribute Selectors: Substring MatchingThree of the attribute selectors in the CSS3 spec allow you to check the value the specified attribute for a string match. These attribute selectors are referred to as substring matching attribute selectors.

These can open endless possibilities, so I think it’s useful to have them in mind. And as a bonus, these selectors have strong support as far back as IE7, so pending thorough tests I think they are quite safe to use in many current projects.

Here’s a brief outline of each one, with some examples.

Understanding em Units in CSS

Understanding em Units in CSSDue to developers’ habitual reliance on pixel values, I think some of us may not have a full understanding of what the em unit is, and how it works in CSS.

As is the case with many topics I write about, I’ll probably learn a thing or two while writing this. So I hope this will serve as a nice summary of what em units are all about and how you can use them in your designs.