CSS Deconstruction: Atebits

We love CSS - kind of a lot. We love it so much that we write a lot about it — including super awesome buttons, inline form labels with pizazz, tricks to bring out depth in your design and more. Now we could be like a lot of sites and just point you to some cool CSS, gallery style...but at ZURB we go the extra mile.

In this article (with some help from Notable, our new website feedback tool) we're going to deconstruct some of the cooler elements of atebits.com, home of great software like Tweetie. We'll see what works, what's awesome about it, and how you can do it on your own site.

What Works

Atebits' website does some cutting edge things that really make the design pop, all with CSS. We'll use Notable here to highlight the Atebits homepage — just click through to see the full annotation:

Many of these elements only work in extremely modern browsers like Safari 4 and Firefox 3.5, but more people are using those every day. Bringing them into your designs now not only acclimates you to their use, but puts your site at the front line of web design. Trust us: it's a fun place to be. It doesn't just show that you know your stuff, it also tells your customers that you care about their experience with your site, and that part of your brand is being on top of your market.

App Icons that Demand Attention

When you hover on atebits app icons in Safari 4 you'll get to see a really cool effect: the icons get larger and rotate just a little. It's a nice touch and something you don't really expect to see on a web page.

This effect is achieved through a couple of new CSS attributes: @-webkit-transform and @-webkit-transition.

1. #products a img {
2. -webkit-transition: all 0.15s ease-out;
3. /* This property tells the browser that when a value changes (all values) to make that change over a 0.15 second window, and to ease-out the change */
4. }
5. #products a:hover img {
6. -webkit-transform: scale(1.05) rotate (-1deg);
7. /* This property applies two transformation to the element on hover: scale 1.05x and rotate 1 degree left */
8. }

It's not an overbearing effect but the wow factor is huge. We like it so much we did something similar on Twitgoo.

---

Buttons That Really Click

This one's subtle, but incredibly easy. Buttons on the atebits homepage have an active (`mousedown`) effect where the button actually seems to click down when you press it. The code is amazingly simple:

1. #home #products a.more:active {
2. height: 31px;
3. padding-bottom: 1px;
4. padding-top: 2px;
5. }

Atebits is simply manipulating the top and bottom padding so the text moves down a pixel when the user clicks. It's a nice effect, but it breaks the notion of a button — you don't click a button label, you click the entire button. An incredibly easy effect that we frequently use for buttons is this:

1. a.button:active {
2. position: relative;
3. top: 1px;
4. }

---

Text, with Depth

In Safari (and probably soon in Firefox 3.5) the Atebits site uses text shadows to give the text on the page depth — it either hovers off the page, or appears to be inset. This is all just a matter of where you put the shadow and what color the text is. For most of the text, Atebits uses this text-shadow property:

1. #home #products p {
2. color: #ccc;
3. text-shadow: #000 0px 1px 3px;
4. /* text-shadow takes 4 values: color, x-displacement, y-displacement and blur size. */
5. }

In order to achieve that sexy inset text effect in the footer, they use this:

1. #slogan {
2. color: #111;
3. text-shadow: #444 0px 1px 1px;
4. }

On Atebits it's a beautiful effect — subtle enough not to draw much attention, bold enough to provide great definition around the copy. However, we can do one better: using that syntax the effect won't work across different background colors. If the footer had a lighter background, or if a text-shadow needed to generally apply to text across different background then the text-shadow would look wrong. We can fix that with RGBa.

1. #home #products p {
2. color: #ccc;
3. text-shadow: rgba(0, 0, 0, 0.9) 0px 1px 1px;
4. /* RGBA is the same as an RGB color, but with an added opacity (alpha) channel.*/
5. }

---

Inset Rules Totally Rule

The horizontal rules on atebits are, sadly, not horizontal rules at all, but a background image for the #slogan area. Creating a horizontal rule that replicates the depth of this style is easy to do in CSS as we covered in a recent CSS blog post:

1. hr {
2. margin: 17px 0 18px;
3. height: 0;
4. clear: both;
5. border-width: 0;
6. border-top: 1px solid #ddd;
7. border-bottom: 1px solid #fff;
8. }

HR elements accept borders just like any other element, and using different colors (or even better, RGBa) you can create inset HRs that feel more like page divisions than simple lines.

Atebits has a really gorgeous site (and their apps are nice looking, too) that uses some cool CSS tricks that are easy to implement and even improve on a little. Now get out there and spruce up your designs!