Welcome to the edge
What is this? It's a challenge, an experiment, an exploration, a rough map of where we haven't been. It's a search for new ways to approach Web-based design. It's a cry for creativity, and a stab at innovation. It's a playground and a proving ground. It's a rejection of what's practical in favor of what's possible.
Expanding our horizons
For the last seven years, we've been pushing Web design further and further down the same path. Once we found out that we could take tables and bend them into design, we jumped all over the idea. But at their heart, tables are grids, their rows and cells strict and confining. We could change their shapes, yes, but only in groups. We spanned the rows and columns in search of more flexibility, trying to sneak our way around the limitations. But there, in amongst those rows and cells, we got trapped into a certain way of thinking: this was possible and that was not; this could be done but that was too much effort to be worthwhile.
Like tables, there is another highly limiting structure that's composed of rows and cells: a prison. It's time for designers to break out.
css/edge is intended, first and foremost, to be as relentlessly creative with CSS as we have been practical all these years. It does not exist to present or explain safe cross-browser techniques; in fact, almost the opposite. The goal here is to find ways to make CSS live up to its fullest potential, with only minimal regard to browser limitations. For all the time we've spent using CSS, most of us have barely scratched the surface of the power CSS embodies, because we've been too caught up in recreating old-style table-based design ideas and worried about support limitations. No more. Now we start digging for treasure.
Inclusion Criteria
Any demonstration you see on css/edge will, unless otherwise noted, employ validated HTML and CSS and will not employ any proprietary extensions or flawed interpretations of the specifications by a browser. Any given demonstration will work as described in at least one freely available Web browser. Finally, the basic content of a demonstration (e.g., the explanatory text) should be perfectly readable and accessible, even if the intended effect isn't visible in your browser.
Copyright
The obligatory pseudo-legalese: The various works, images, and text found on this site are copyright Eric A. Meyer ("the author") unless otherwise noted. Images on this site may not be re-used unless permission is explicitly granted. The explanatory text found in these pages may not be copied or reproduced, except when quoting a portion of the work for review or similar purposes, without the written permission of the author. However, permission is granted by the author to freely re-use, in full or in derivative form, any general design technique, HTML markup, or CSS code you see on this site. Steal these ideas and use them yourself, or better yet, build on these ideas and do something better!