I’ve been needing an excuse to blog, some ongoing project or motivation, because I’m clearly shit at blogging. While working on an interface for a client site, I stumbled across something interesting: conceptually, the Aristo interface theme can be implemented entirely in CSS. Oddly, as far as I can tell, no one has fully attempted a pure CSS (no images) implementation of the gorgeous theme (designed by Sofa for the Cappuccino framework).

So, here’s my project: I’m implementing the Aristo theme, entirely in pure, juicy CSS3. I’ll be doing it piece by piece, widget by widget, and updating the project’s main site as I go.

Someone will probably sit down and jam out all the rest of the Aristo widgets before I even get to the next, but I’m doing this mainly as my own exercise, so go for it.

Today I’ll publish how to create Aristo’s buttons using only the tidiest of semantic HTML and some pretty intense CSS (including CSS3, you design-lusting nerd, you). I’ll explain step-by-step how to create these sexy buttons, and I’ll conclude with a quandary for you, my colleague in design.

Aristo Buttons in CSS3

First, make sure you have the layered Aristo PSD. Today we’ll just work on recreating those sexy buttons. Essentially, our approach will be to duplicate Aristo’s Photoshop layer styles in CSS.

The HTML

Let’s start with our HTML. We’ll accept no compromises in the form of extra <span>s, <div>s, whatever:

<p><button>More</button><button disabled="disabled">More</button></p>
<p><button class="default">More</button><button class="default" disabled="disabled">More</button></p>

UPDATE: To clarify, this HTML defines four buttons. The <p> tags are just for grouping. All you really need is <button>Love</button>. Pretty sure this code is as clean as it could possibly be.

The Fonts

We want our buttons to be super-flexible, so we’ll size them around whatever text we put in them. That means our first step has to be getting the font and font-size right.

Oddly (sadly, comically, tragically), the Aristo PSD uses Arial as its font. Sad. Comic. Tragic. I say let’s give those people with the super-legible Lucida Grande font a slightly enhanced experience. One of the most awesomest things about CSS is that you can specify a font stack; users with the best font get to use the best font, but others can still get a usable, thought-out reading experience. So here’s my font stack for Aristo:

body {
	font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
	}
button {
	font-size: 14px;
	font-weight: bold;
	}

Users who have Lucida Grande (Mac users, basically) will see things in that font, and users without will see Helvetica, Arial, or a fall-back sans-serif font, in that order of preference. Always remember to test your design with each font in your stack, throughout development.

In your design, you might want to put the font-family declaration on your button rather than body, if you have a different main font.

The Button’s Shape

The next thing we notice is the size and roundedness of Aristo’s buttons. The corners appear to have a 3px radius. I’m particularly fond of allowing users to resize their interface (also makes it more flexible if we want to resize the interface later in development), so we’ll make the rounded corner relative to the button’s font-size. The corners should have a 3px radius when the font-size is 14px, so: 3 ÷ 14 ≅ .214. Our radius will be .214em.

In order to get the right proportions inside the button, we need a bit of padding. I’ve also added some margin, to give the buttons a bit of space. Our button so far:

button {
	margin: 0 .5em .5em .5em;
	padding: .15em 1em;
	font-size: 14px;
	font-weight: bold;
	border-radius: .214em;
	-webkit-border-radius: .214em;
	-moz-border-radius: .214em;
	cursor: pointer;
	}

That gives us something that’s starting to look like a button (though an ugly one):

More

The Label Text

The button label text has a single pixel of white underneath its letters, giving it that embossed look. We’ll use a single-pixel text-shadow.

button {
	…
	color: #4f4f4f;
	text-shadow: 0 1px 1px #fff;
	…
	}

That says that we have a text-shadow that’s offset 0px horizontally, 1px vertically (down), and has a 1px spread. And it’s white. The reason I chose pixel sizing here instead of ems is because this little detail is only meant for a single crisp line underneath text; it shouldn’t resize.

That gives us something that’s starting to look like a button (though an ugly one):

More

The Borders

The text is nice, but those borders look like crap. In the Aristo PSD, the borders are made up of a gradient. I decided it would be faster and easier to just use three separate border colors, one for top, one for bottom, and one for the sides. I leave it to the reader (and me, I’ll probably come back to it) to use border gradients in the CSS.

button{
	…
	border: 1px solid #acacac;
	border-top-color: #bdbdbd;
	border-bottom-color: #949494;
	…
	}

More

The Background Gradient

The big thing still missing is the inside coloring, the button’s main gradient. We’ll use the dissimilar -webkit-gradient and -moz-linear-gradient functions (values? properties?) to fill the background with that smooth button look.

button {
	…
	background: #ddd;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#c4c4c4));
	background: -moz-linear-gradient(top, #ededed, #c4c4c4);
	…
	}

We specify the background multiple times, to accommodate different browser capabilities. First we give a solid gray background, for those browsers that have no implementation of CSS gradients. Then, we give WebKit browsers their special -webkit-gradient with its funky syntax. And finally Mozilla-based browsers get their special -moz-linear-gradient with its funky syntax. Internet Explorer has a filter that can do this kind of gradient (funkiest syntax of them all), but I leave that as a tortuous exercise for the reader as well.

More

Sweeeet. Check out that sexy, sexy button. Ooh, yeah.

The Focus/Hover State

The Aristo PSD has a focus state for the button, with a nice little glow/shadow thing around it. In Cappuccino apps, I think the focus state is only for showing what element the keyboard will interact with (please correct me in the comments if I’m wrong). I think it would be fun if it also showed this state on :hover. Feel free to disagree, but don’t even try to tell me it doesn’t look cool when you mouse over it.

We’ll make the glow with a CSS box-shadow:

button:hover,
button:focus {
	box-shadow: 0 0 7px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0 0 7px rgba(0,0,0,0.4);
	-moz-box-shadow: 0 0 7px rgba(0,0,0,0.4);
	}

Our shadow is offset by 0px horizontally, 0px vertically, and has a spread of 7px, with a transparent gray for color. This gives us a gray glow on all sides of the button.

You can see the box-shadow property is consistent across the browsers that support it. In cases like this, be sure to include the generic, non-prefixed property in addition to the vendor-prefixed versions (-webkit-whatever, -moz-thingy, etc.). This will hopefully make your code work great in (most|all) future browsers. You’ll also be granted 1,000 virgin ponies in the afterlife.

Why pixels instead of ems? In previous projects with lots of box-shadows, I found that resizing shadows can severely increase the computation a browser must endure to display your page. Even if you’ve tested your page and it scrolls and performs just fine at default text size, increasing the size of all shadows on the page can make even normal scrolling laggy. Setting the shadows in px will keep them at their original size, keeping shadow computation at a manageable level.

Here’s what our button looks like so far:

More

The Transition

Let’s enhance the experience a little more, by making that glow fade in and out, more like a real glow. We’ll use the super-awesome CSS transitions. Man I love me some CSS transitions. So easy to progressively enhance a page/site/app; much easier than using Javascript for every little animated change, plus it can be accelerated in hardware, making CSS transitions as smooth as possible.

button {
	…
	transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	…
	}

This code says that we’ll smoothly transition all properties over .2s (2/10ths of a second), easing the animation both at the start and finish. We could have animated just the box-shadow, but I decided to use the keyword all to avoid cramming in all those vendor-prefixed box-shadow properties. We would go that route if we needed to change a different element without a transition. But I like transitions.

More

Looks pretty sweet, huh? Fun to hover over the buttons and see that effect.

The Active State

We’re making a button, and buttons are meant to be pressed. Now we need to make the pressed state (“active” state, in CSS/HTML form parlance). Basically, we just define a different background gradient, change the border colors, and ditch the box-shadow:

button:active {
	background: #ccc;
	background: -webkit-gradient(linear, left top, left bottom, from(#c3c3c3), to(#ebebeb));
	background: -moz-linear-gradient(top, #c3c3c3, #ebebeb);
	border-color: #a6a6a6;
	border-top-color: #939393;
	border-bottom-color: #bcbcbc;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	}

Nothing new or thrilling there. But try the button out:

More

A Default Button

Aristo also has a “default” button style, blue instead of gray. We’ve marked this in our HTML with class="default". To get the default button to be blue instead of gray, we just have to redefine the colors and gradients. Pretty straightforward:

button.default {
	color: #1c4257;
	background: #a3cde3;
	background: -webkit-gradient(linear, left top, left bottom, from(#b9e0f5), to(#85b2cb));
	background: -moz-linear-gradient(top, #b9e0f5, #85b2cb);
	border: 1px solid #759bb1;
	border-top-color: #8ab0c6;
	border-bottom-color: #587e93;
	}

And its hover and active states:

button.default:hover,
button.default:focus {
	box-shadow: 0 0 7px #53a6d5;
	-webkit-box-shadow: 0 0 7px #53a6d5;
	-moz-box-shadow: 0 0 7px #53a6d5;
	-o-box-shadow: 0 0 7px #53a6d5;
	}
button.default:active {
	background: #8abcd7;
	background: -webkit-gradient(linear, left top, left bottom, from(#81afc8), to(#b7def4));
	background: -moz-linear-gradient(top, #81afc8, #b7def4);
	border-color: #6e94a9;
	border-top-color: #567c91;
	border-bottom-color: #88aec4;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	}

More

A Disabled Button

Some buttons need to be disabled. Fortunately, HTML5 buttons can have a disabled attribute. We’ll style these based on that attribute.

button[disabled],
button[disabled]:active {
	color: #a7a7a7;
	background: #efefef;
	background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e1e1e1));
	background: -moz-linear-gradient(top, #f6f6f6, #e1e1e1);
	border-color: #d4d4d4;
	border-top-color: #dedede;
	border-bottom-color: #c9c9c9;
	cursor: default;
	}
button[disabled]:hover,
button[disabled]:focus {
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	}

More

The Whole Set

Here’s the whole set of Aristo buttons we’ve just styled, together for your button-pushing pleasure.

MoreMore

MoreMore

Notice that you can resize your browser’s font-size, and these buttons will resize right along with it. This also means you can resize all appropriate aspects of buttons on your site just by resizing the button’s font.

The Advanced Single-pixel Detail

… of Doom

There’s one detail our buttons are missing from the original Aristo graphics: each button should have a single-pixel highlight just inside its border along the top or bottom, depending on whether it’s currently pressed. This is a tricky prospect to handle just with CSS. The folks from Sofa used an Inner Shadow layer style in Photoshop to do the trick. Unfortunately, CSS has no inner-shadow property, so we delve into a stranger realm.

We could add an extra <span> to our button and style that, but since I’m not on a deadline for this I figured I’d think it through until I could do it with my previous pristine markup.

I came up with an approach that is funky, clever, and only sort of works. Basically, I use the :after pseudo-element of the button, make it a block, position it absolutely, then give it a 1 pixel border. Kind of crazy, kind of cool.

button {
	position: relative;
	overflow: hidden;
	…
	}
button:after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	content: " ";
	border-bottom: 1px solid rgba(255,255,255,0.5);
	}

MoreMore

Kind of crazy, no? Kind of doesn’t work, too. Almost, but there are two issues. The first is that in Mozilla-based browsers the pseudo-element refuses to be positioned relative to the entire button, choosing instead to position relative to the text inside the button. The second downside is that even in WebKit-based browsers the pseudo-element doesn’t respect the border-radius and overflow: hidden. Our single-pixel line happily extends right over the round border and into the empty corner. You can barely notice it at small sizes, but if you bump up your font-size (or the size of your button, or the button’s border-radius) then it becomes painfully apparent. For this reason I’m leaving the :after pseudo-elements as display: none for now, until I or someone else can figure out a way to do this better.

I’d love to hear a better method, so please chime in in the comments if you have ideas!

In the Browsers

Even before hitting “publish”, I can hear a minor storm of “If it doesn’t work in IE6 it’s not practical” comments. If you’re the kind of designer who thinks websites need to look the same in every browser, please feel free to comment, but I’m afraid I fall into the camp that doesn’t want to design for the worst browsers first. Mostly, this is an experiment, but I do intend to use these widgets in production client sites, after more testing to make sure they function properly in all major browsers.

If you have tips on how to make these buttons look great in IE, please chime in!

A Note on Other Aristo Implementations

When I first saw this implementation of Aristo by Alex MacCaw, I hoped it would be a pure CSS version. MacCaw did some excellent (and comprehensive) work, but used images for all the controls. So I set out to do it my way (no images), mostly because I needed an excuse to learn more about CSS gradients.

The Rest of Aristo

I plan to create most or all of the Aristo widgets in CSS, one-by-one, blogging along the way. Feel free to use these in your own projects, as I’ll be releasing the code in an open-source license compatible with the original Aristo license (more details soon). Post a comment here if you’d like to share how you’ve used it.

Hopefully (for both you and me) my future posts about this process will be considerably more brief.

The Full Code

body {
	font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
	}
button {
	position: relative;
	margin: 0 .5em .5em .5em;
	padding: .15em 1em;
	font-size: 14px;
	font-weight: bold;
	color: #4f4f4f;
	text-shadow: 0 1px 1px #fff;
	background: #ddd;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#c4c4c4));
	background: -moz-linear-gradient(top, #ededed, #c4c4c4);
	border: 1px solid #acacac;
	border-top-color: #bdbdbd;
	border-bottom-color: #949494;
	border-radius: .214em;
	-webkit-border-radius: .214em;
	-moz-border-radius: .214em;
	transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	cursor: pointer;
	}
	button:hover,
	button:focus {
		box-shadow: 0 0 7px rgba(0,0,0,0.4);
		-webkit-box-shadow: 0 0 7px rgba(0,0,0,0.4);
		-moz-box-shadow: 0 0 7px rgba(0,0,0,0.4);
		}
	button:active {
		background: #ccc;
		background: -webkit-gradient(linear, left top, left bottom, from(#c3c3c3), to(#ebebeb));
		background: -moz-linear-gradient(top, #c3c3c3, #ebebeb);
		border-color: #a6a6a6;
		border-top-color: #939393;
		border-bottom-color: #bcbcbc;
		box-shadow: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		-o-box-shadow: none;
		}
button.default {
	color: #1c4257;
	background: #a3cde3;
	background: -webkit-gradient(linear, left top, left bottom, from(#b9e0f5), to(#85b2cb));
	background: -moz-linear-gradient(top, #b9e0f5, #85b2cb);
	border: 1px solid #759bb1;
	border-top-color: #8ab0c6;
	border-bottom-color: #587e93;
	}
	button.default:hover,
	button.default:focus {
		box-shadow: 0 0 7px #53a6d5;
		-webkit-box-shadow: 0 0 7px #53a6d5;
		-moz-box-shadow: 0 0 7px #53a6d5;
		-o-box-shadow: 0 0 7px #53a6d5;
		}
	button.default:active {
		background: #8abcd7;
		background: -webkit-gradient(linear, left top, left bottom, from(#81afc8), to(#b7def4));
		background: -moz-linear-gradient(top, #81afc8, #b7def4);
		border-color: #6e94a9;
		border-top-color: #567c91;
		border-bottom-color: #88aec4;
		box-shadow: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		-o-box-shadow: none;
		}
button[disabled],
button[disabled]:active {
	color: #a7a7a7;
	background: #efefef;
	background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e1e1e1));
	background: -moz-linear-gradient(top, #f6f6f6, #e1e1e1);
	border-color: #d4d4d4;
	border-top-color: #dedede;
	border-bottom-color: #c9c9c9;
	cursor: default;
	}
	button[disabled]:hover,
	button[disabled]:focus {
		box-shadow: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		-o-box-shadow: none;
		}

You should follow me on Twitter here (@ryanmiglavs).

This was one of our most ambitious projects to date, and we handled every last detail. We created some new techniques and made some innovative choices along the way, giving a small independent business a cutting-edge and easy-to-use online tool.

More to come.

“We all know that there’s no fucking way in the world we should have microwave ovens and refrigerators and TV sets and everything else at the prices we’re paying for them. There’s no way we get all this stuff and everything is done fair and square and everyone gets treated right. No way. And don’t be confused — what we’re talking about here is our way of life. Our standard of living. You want to “fix things in China,” well, it’s gonna cost you. Because everything you own, it’s all done on the backs of millions of poor people whose lives are so awful you can’t even begin to imagine them, people who will do anything to get a life that is a tiny bit better than the shitty one they were born into, people who get exploited and treated like shit and, in the worst of all cases, pay with their lives.”

Fake Steve Jobs

If you’re experiencing this problem, then read on. I’ll give the solution first, for you time-constrained, impatient people just trying to fix the problem, then I’ll describe the background.

The problem is that your user account is no longer in the lpadmin group, which is the group of users who can administer printers. When trying to add or change a printer, you get the standard OS X administrator password dialog, but can’t authorize, and get a “client-error-not-authorized” error. To add yourself back to the lpadmin group, open up Terminal (Utilities › Terminal), and type this command:

sudo dscl . -append /Groups/lpadmin GroupMembership yourusername

You’ll need to type your administrator password and hit return, then you should be back in the lpadmin group.

I sincerely hope that solves your problem if you’ve been experiencing this one.

Background

In Mac OS 10.5 Leopard, Apple eliminated Netinfo Manager and its Netinfo database, replacing it with the dslocal database. This is huge for administrators, as that used to be the fundamental tool for managing users and groups at a nitty-gritty, manual-editing level. As far as I know, no single GUI tool exists to directly replace Netinfo Manager (I only use regular Mac OS X, so I have no idea if OS X Server has such a tool).

Instead of a GUI tool, we have dscl, dseditgroup, and a handful of other command line tools I don’t understand and am (probably rightly) afraid to touch. These handle the dslocal database, which is a bunch of XML located in /var/db/dslocal/.

Of course the primary point of interaction with the dslocal database is System Preferences, in the Accounts pane. Adding, changing, and removing users is one aspect of dealing with dslocal. By right-clicking on a user in Accounts, you can choose “Advanced Options…”, where you can change nitty-gritty properties like a short username and UUID.

However, as far as I can find there is no GUI to manage the system’s built-in groups and their memberships. This is important if, for example, you have somehow lost your membership in the “lpadmin” group, the users who can manage printers.

Let’s get into the terminal command I pasted earlier. First is sudo, which lets you run the command as an administrator (it stands for “super-user do”, get it?). dscl is the general dslocal management tool, used for reading and editing any (I think) part of the dslocal database. . represents the domain, in this case local which is equal to . for some reason. -append means we’re appending the value to the XML database row in question, not replacing it. /Groups/lpadmin is the database table, the lpadmin group table. GroupMembership is the row we’re editing (appending, in this case), and yourusername (please insert your own username) is the value we’re appending. Thus we have added “yourusername” to the lpadmin group, and you can manage printers again.

Notes

Although I used to work in IT, I no longer am in charge of large quantities of Macs, and so I’m not the most up-to-date, well-informed, or knowledgeable person on this subject. I experienced this problem and had a difficult time finding a solution online.

If you’ve read this far, you must be at least a little interested in Mac OS X internals, so I recommend you read John C. Welch’s write-up, “Analysis: the end of Netinfo”. Also, for a fun and brief read, have a look at the Wikipedia entry for Netinfo Manager. Please don’t make fun of me for calling that reading fun.

“If you love it, you don’t know much about typography. If you hate it, you really don’t know much about typography, either, and you should get another hobby.”

Vincent Connare, creator of Comic Sans

“I cannot overstate the pain that we feel as human beings and as families when we read an argument, presented in federal court, implying that our own marriages have no more constitutional standing than incestuous ones.”

I don’t think much more needs to be said.

I do love you. I really do. But I’ll be honest: we’re on rocky grounds right now.

When I broke up with Gizmo, you seemed like a big step up, Skype. You had better software, a sweet wifi phone, better voicemail management, and you actually worked most of the time. I quickly realized you didn’t properly send a caller ID, so people had no idea who was calling them (it’s typically either +000000 or +0123456 or something). Also no receiving text messages, and no text messages or chat at all on my Netgear handset. But those were the days of optimism and hope, and simple joy over a $6/month phone bill, so everything was excused with the assumption that you were working on these issues.

It turns out I misunderstood your priorities. You weren’t working on caller ID for US callers; you weren’t working on simplifying your bloody confusing array of payment and subscription options; you weren’t working on breaking the stranglehold of oppressive, expensive, technologically-backward telcos; no, you were working on shitty cell phone compromise add-ons that just admit people should carry expensive, crappy mobile phones and use you as a third-party. You may not want to admit it, Skype, but you’re becoming the telcos’ bitch.

What happened to the revolutionary Skype? Skype the game-changer? Skype, the little Estonian P2P communication company that made calling free and set the telcos’ knees trembling? Do you still care about shaking things up?

I still care.

You’ve changed my unlimited calling plan again. I bought “Skype Unlimited” a year-and-a-half ago or so. Then that got cancelled, and replaced with Skype Pro (never mind that, if I recall, the name “Skype Pro” used to refer to something totally different, and at the very least it’s somewhat confusingly-similar to “Skype for Business” and various other boring names). Now it’s just Skype Subscriptions. All of these have been almost identical, but with minor little differences that left me wondering if I was still going to be able to do what I had been doing. Also, each change has required me to cancel my then-current plan and sign-up for the new one. A time-wasting hassle, with literally no gain, other than the fact that this unlimited calling thing should probably have been called a subscription from the beginning.

I say all this because really, I do love you, Skype. You’re cheap, you’re easy to use, and you’re a hell of a lot better than those cell phone companies. And you have potential, lots of potential. When popular mindset comes around and embraces the internet as the single necessary network of communication, with all its advantages of price and innovation, you’ll be in the best place to take advantage of it.

I just hope for both our sakes’, Skype, that you don’t muck this up. I want us to have a long and happy future filled with many happy hours of free calling.

And give me freaking caller ID, dammit!

UPDATE: They gave me freaking caller ID!

For those not in the know, BarCamp is an “unconference”, an open gathering of people who themselves decide the topics of panels and discussions. The attendees are largely from the various nerd communities, but the format is very open and appropriate for anyone with ideas. I think that’s most people.

I think my favorite discussion was an open-ended gathering with the topic “The Social Sciences of Technology”. We discussed differences and similarities between online interactions and “analog” interactions; wiki ideas applied to government, decision-making, and societal structuring (with enthusiastic and enlightening thoughts from Mark Dilley); the troubles with binary mindsets; and hope for community self-determination through intelligent use of technology and self-activism. And much much more!

I also loved meeting and chatting with other clever minds and fun folks, some sharing my field of web work. George Huff and Todd Quackenbush of We the Media were great to talk with after a delightfully confusingingly-named session on design and nerdery. I look forward to bumping into these two again. Bram Pitoyo and I enjoyed an intense conversation about design, freelancing, web browsers & word processors, and all manner of fun typophile crap. I also just noticed somewhere on his website that he is a “elevator music enthusiast”, a topic we did not discuss but I’d love to bring up with him sometime. Finally, I met someone I consider a big shot, Rael Dornfest, former CTO of O’Reilly Media and current wizard at Values of n (which I asininely called “Powers of n” when I first approached him).

I could talk about the ideas and the people I experienced at BarCamp for a bit longer, but I’m tired and blog entries are supposed to be short and sexy I’m told, so I’ll just let the rest be.

Join the community: go to a BarCamp near you!