background preloader

CSS

Facebook Twitter

The Z-Index CSS Property: A Comprehensive Look - Smashing Magazine. Most CSS properties are quite simple to deal with.

The Z-Index CSS Property: A Comprehensive Look - Smashing Magazine

Often, applying a CSS property to an element in your markup will have instant results — as soon as you refresh the page, the value set for the property takes effect, and you see the result immediately. Other CSS properties, however, are a little more complex and will only work under a given set of circumstances. The z-index property belongs to the latter group. z-index has undoubtedly caused as much confusion and frustration as any other CSS property. Ironically, however, when z-index is fully understood, it is a very easy property to use, and offers an effective method for overcoming many layout challenges. In this article, we’ll explain exactly what z-index is, how it has been misunderstood, and we’ll discuss some practical uses for it. What is it? The z-index property determines the stack level of an HTML element. 3-dimensional representation of the Z axis: The Natural Stacking Order Link Why Does it Cause Confusion?

Syntax Link. CSS Sprites: Image Slicing’s Kiss of Death. Back when video games were still fun (we’re talking about the 8-bit glory days here), graphics were a much simpler matter by necessity.

CSS Sprites: Image Slicing’s Kiss of Death

Bitmapped 2-dimensional character data and background scenery was individually drawn, much like today’s resurgent pixel art. Hundreds and later thousands of small graphics called sprites were the building blocks for all things visual in a game. Article Continues Below As game complexity increased, techniques developed to manage the multitude of sprites while keeping game play flowing. Understanding vertical-align, or "How (Not) To Vertically Center Content"

A FAQ on various IRC channels I help out on is How do I vertically center my stuff inside this area?

Understanding vertical-align, or "How (Not) To Vertically Center Content"

This question is often followed by I'm using vertical-align:middle but it's not working! The problem here is three-fold: HTML layout traditionally was not designed to specify vertical behavior. By its very nature, it scales width-wise, and the content flows to an appropriate height based on the available width. Traditionally, horizontal sizing and layout is easy; vertical sizing and layout was derived from that. Vertical-align in table cells When used in table cells, vertical-align does what most people expect it to, which is mimic the (old, deprecated) valign attribute. <td valign="middle"><! Shown in your browser, the above (with appropriate wrappers) display as: <div> using display:table-cell; vertical-align:middle <div> using display:table-cell; vertical-align:bottom vertical-align on inline elements When vertical-align is applied to inline elements, however, it's a whole new ballgame.

And. Code Snippets.