Guymon

Fancy Scrolling

Chris Coyier hat einige sehr schicke Beispiele zusammengetragen für Webseiten die “Fancy Scrolling” einsetzen. activatedrinks.com und artofflightmovie.com fand ich sehr nett.

Fold Out Popups

Das ist auch mal ein schicker Effekt für moderne Browser.

The trick with using hidden checkboxes/radio buttons, the :checked pseudo class selector, and adjacent sibling (~) combinators really enables some neat functional possibility with pure CSS1.
Let’s exploit it again to build “fold out popups”. That is, links/buttons you can click to reveal tooltip-like rich HTML popup content.

CSS3 Flexible Box Model

Peter Gasston erklärt das Flexible Box Model.

I should reiterate that much of what is possible with Flex Box can already be achieved with existing CSS properties such as float, margin and position. The difference is that Flex Box has been created with the express intent of laying out web pages so it makes that task much, much easier.

Here’s a quick summary of what it does: equally distributes space between elements without the need for you to make complex calculations; enables you to make equal-height columns and to vertically align elements within their parent; enables you to change the order in which elements are displayed, regardless of their order in the DOM tree; removes the need to use the float property for layouts. In short, it enables you to do all of the stuff that you’ve had to hack around in the past. Sounds perfect!

Leider mangels Support im IE zur Zeit nur eingeschränkt nutzbar.

Liquid CSS Vorlagen

Wer zu faul ist sich seine Liquid CSS Layouts selbst zu bauen, oder einfach schnell ein CSS Grundgerüst braucht wird bei Devlounge fündig.

Not everyone is busy daily with CSS, which makes it understandable you don’t know CSS layout structure and code by memory. It’s good to have some good sources providing ready basic code to get started on a new website. The pro of using these layout is that they are already tested and bug free.

If you like fluid layouts and have difficulty with or no time for the math, ‘The Perfect 3 Column Liquid Layout (Percentage widths)’ is the right solution for you. Ethan Marcotte has a chapter in Handcrafted CSS dedicated to fluid layouts, if you have the book it is a good source to learn the math behind fluid layouts.

Elastic Grid Layouts

Steven Bradley erklärt Elastic CSS Layouts und die Unterschiede zu Fluid Layouts.

Developing flexible layouts with relative measurements should be a goal for web design as the format in which our designs live (the browser) will always be flexible.

Those measurements can be relative to the browser, which I’ve defined as fluid layouts or relative to something internal to the design, which I’ve defined as elastic layouts.

It’s quite simple to move from a fluid layout to an elastic one. All it takes is changing the measurement of the outermost container from % to ‘em.’ Everything inside that container will then be relative to the design instead of the browser window. Inner containers can continue to be measured in %..