Notable | CSS Deconstruction: Atebits, Website Feedback.

1
2
3
4
5

CSS Deconstruction: Atebits

Comments on this Post

Leave website feedback on this page with a code, copy or screenshot note.

Sign up now

Created by Jonathan Smiley

Captured August 04, 2009 at 11:19PM

With the Notable Image Upload

A gorgeous page with some really clever uses of new, bleeding-edge CSS effects.

1
Not only are these icons big and beautiful, but through some cutting-edge CSS they have a really remarkable hover state. With the new @transform property they get larger and rotate on hover, all without any javascript.
2
This nice typography is cheating a little - it's a background image. Recreating this text treatment with the new @font-face attribute as well as new CSS gradients could very well be an article unto itself.
3
These are nice looking buttons - big targets, clear, and very clickable. Their active state is a particularly nice (and easy) touch, but we'll show you how we can do a little better still.
4
This text footer looks set into the page, using a very simple @text-shadow property.
5
Depth like you can see in this hr element is both easy to reproduce and an effective visual moment on the page.

7753 People viewed this public post.
Thumbnail Widget See example Post View Widget See example Annotate View Widget See example
Direct Link
Share on Twitter Make a Support Post

Notable by ZURB

Notable is the easiest way for teams to provide feedback on websites. Quickly and easily give feedback on design, content, and code on any page of a website or application without leaving your browser.

Need some help?

Read our FAQs for quick answers or contact us. You can also follow our updates on Twitter.

Subscribe to ZURBnews

Get our monthly newsletter, ZURBnews.

Notable