Monthly Archives: October 2011

Lea Verou’s Animatable

by

Lea Verou publishes some really great stuff. Her latest work is Animatable. A tool to showcase the variety of things you can do with CSS3 animations. And it’s awesome.

Some weeks ago I had this article about rotating images like I use in the footer of this page. There is an animation in Lea’s demos that makes use of the same properties.

You will find some nice cutting edge CSS3-techniques in the demos so make sure to check out the source-code on GitHub. You can also contribute and check in a pull request if you want to.

Edit: And by the way… Lea writes about her idea :)


How to Build an Accordion-Menu using CSS and a bit of jQuery

by

We’re doing a project these days where we use an accordion-menu to show some content. I want to share with you how I did this using jQuery and CSS. This is pretty easy and I want to encourage you not to use any plugin or so but to write the code yourself and learn a bit more about how to use CSS and jQuery and save some microseconds on your loading type. The HTML This is kinda straightforward I think. We don’t need a wrapper for the accordion-menu. Check it: <section id="experts" class="accordion-item"> <h1><a href="#experts">Experts</a></h1> <div class="content"></div> </section> This is

Read more


Resize Elements with CSS3

by

The CSS3-spec is full of wonderful things. Sometimes things that are not so desperately needed as others but anyway… good to have them. One of these more or less needed properties might be resize. It is part of the CSS3 Basic User Interface Module. What is really useful with resize is the ability to restrict the resizing of textarea for example. But it is possible to resize every element you’d like to as this demo by Simurai shows. There are four values for resize that are kinda logical: none: no resizing at all horizontal: resizing only horizontal vertical: resizing only…

Read more


Wo sind meine abgerundeten Ecken?

by

Sorry for this german post. For more information on this topic please check out the post “Where Are My Rounded Corners?”. Thanks to Daniel and Steffen at /gebrüderheitz. Manchmal sind unsere Kunden verwirrt, wenn sie sich ihre neue Website im Browser anschauen und sie anders aussieht, als das Design, dass sie freigegeben hatten. In diesem Merkblatt erklären wir, warum es viele Vorteile gibt, diese Unterschiede zu akzeptieren und dass diese Vorteile die Nachteile überwiegen. Lange Zeit haben wir die Gestaltung von Websites so gehandhabt, als ob es Printmedien seien. Hier findet nun ein Umdenken statt, denn das Internet unterscheidet sich

Read more


“Where Are My Rounded Corners?” – German Translation

by

Some weeks ago Paul Irish published his article about TAFEE (Tiered, Adaptive Front-end Experiences) and shares Paul Boag’s booklet called “Where are my rounded corners?” which tries to describe why it is better to design for the future and modern browsers and not spending too much time trying to get the website’s design working in older browsers (namely Internet Explorer 7 and 8). The booklet was originally published in Paul Boag’s blog. Paul describes why he did this this: One of the biggest areas of confusion among our clients is progressive enhancement. They wonder why the beautiful design they signed off

Read more


CSS3: Rotate Images on Click

by

With CSS3 be get some great new functions to use that are now accessible pretty easy. These are not only rounded corners or shadows but also transitions and full animations that let you do things that were only possible with JavaScript some time ago. In the footer of this website I use CSS3 3D-transitions for rotating two images. There is a front- and a back-site for that image. Through animation on click it looks like these images are rotating. I’m not the first one using this technique. I got inspired by Google+. They are using it for rotation of the

Read more