Realistic CSS3 Buttons Redux

A cou­ple of weeks ago I post­ed Real­is­tic Look­ing CSS3 But­tons, in which I tried to make awe­some-look­ing CSS3 but­tons that required no extra markup. For peo­ple who like more code and less talk, the end of the post has the link to the demo.

As awe­some as they were, they required an explic­it width. This meant that they did­n’t adapt grace­ful­ly to dif­fer­ent labels—you had to explic­it­ly set a width on the but­tons that might not fit the actu­al label prop­er­ly. This had been nec­es­sary to get the nice inner white bor­der, which I’m now using two instances of inset box-shadow to repli­cate (many CSS3 dec­la­ra­tions allow for mul­ti­ples, such as background-image and box-shadow). I would have pre­ferred to do it with only one dec­la­ra­tion, but box-shadow: 0 0 1px #fff inset; pro­duced too dim of an inner bor­der for my liking.

I also want­ed a bet­ter-look­ing but­ton depressed state. I emu­lat­ed the inner shad­ow typ­i­cal of OS X Leop­ard-era but­tons with a third inset box-shadow on the :active state, as you can see below. Press­ing the but­tons feels real­ly awe­some if your brows­er sup­ports CSS Transitions.

States: Nor­mal, Hov­er, Active (left to right)

Speak­ing of CSS tran­si­tions, they’re now used con­sis­tent­ly on the :hover state, by chang­ing the back­ground-col­or on hov­er instead of chang­ing the gra­di­ent (gra­di­ents don’t cur­rent­ly ani­mate in a tran­si­tion). I also did a bit more work to make it cross-brows­er friend­ly: I used back­up col­ors wher­ev­er rgba() nota­tion was used, as well as a gradient.png fall­back for browsers inca­pable of CSS gradients.

Here’s a few things I found along the way:

  • Fire­fox 3.7 night­ly (which will be FF4 even­tu­al­ly I think) ren­ders the but­tons the best.
  • WebKit does­n’t actu­al­ly sup­port inset box-shadow yet in Safari 4 or Mobile Safari. So, they get left behind for now. But WebKit night­ly and Chrome have land­ed sup­port for inset box-shadow.
  • WebKit cur­rent­ly has a fas­ci­nat­ing bug with inset box-shad­ow and tran­si­tions. Using WebKit night­ly or Chrome, try click­ing on the “Wonky Webkit Tran­si­tion” but­ton. The box-shadow starts on the out­side and then snaps to the inside at the end of the transition.
  • Fire­fox does weird things with an :after pseu­do-ele­ment placed on a but­ton ele­ment. I did some hacky things to work around that at the default size using @-moz-document. Not awe­some or recommended.

With­out fur­ther ado (and I use the phrase only to plead with the peo­ple of the world who say “with­out fur­ther adieu” to STOP DOING IT WRONG), check out the Real­is­tic CSS3 But­tons Redux demo.

The Erudite 2.6 released

The Eru­dite 2.6 has been released. It’s not yet avail­able in the themes repo as I write this, but you can down­load it from the project page.

2.6 includes sup­port for WP 3.0’s new nav menus, which puts you in full con­trol of your head­er. If you have only one nav menu, it’ll use it. If you want to user more than one nav menu, be sure to call the one you want in the head­er “Head­er”. If you don’t have any nav menus, it’ll fall back to 2.5’s pages or cat­e­go­ry behaviour.

Some oth­er things that were included:

  • A Beloruss­ian translation
  • an option to dis­able visu­al edi­tor styles
  • lots of code cleanup — got rid of some dep­re­cat­ed functions

Also, The Eru­dite is now on github! I’m prob­a­bly going to move all fea­ture requests/bug reports over there, as the com­ments sec­tion on the project page has got­ten pret­ty unwieldy.

FontFriend in Print

Font­Friend got a lit­tle shoutout in this mon­th’s issue of Print mag­a­zine. Thanks to Bev for let­ting me know!

Print, April 2010, p.80. Click image for full size.

Print does­n’t seem to put much of their mag­a­zine’s con­tent on their web­site, so I took the pho­to above. If you don’t feel like read­ing the grainy iPhone pho­to (no, I was­n’t about to spend $20 just to stroke my ego), here’s the full text:

Occa­sion­al­ly dur­ing a web pro­jec­t’s con­struc­tion phase, the design­er will decide that the type does­n’t look quite right. This is often due to slight but still notice­able dif­fer­ences between Pho­to­shop’s text ren­der­ing and that of the mul­ti­ple browsers a site has to sup­port. In response, the design­er some­times has to do mul­ti­ple rounds of slight tweaks to size and spacing.

To help with this, Soma Design’s Matt Wiebe offers the Font­Friend book­marklet. Just drag it to your brows­er tool­bar, acti­vate it on the page you want to edit, and a pan­el is exposed that can be used to edit a selec­tion of the most com­mon brows­er text set­tings. A few sim­ple pre­sets are offered for text that is affect­ed, but the pow­er of the jQuery Javascript library’s selec­tor engine is avail­able for more spe­cif­ic selec­tions. (An explana­to­ry link is pro­vid­ed from the pan­el, but it’s any­thing you could do with basic CSS syn­tax, and more.)

Ide­al­ly, the task of using Font­Friend would be hand­ed off tot the design­er direct­ly, who could send final mod­i­fi­ca­tions straight to production.

For more pro­gres­sive web designs using the new @font-face pos­si­bil­i­ties, the book­marklet can take care of a new fea­ture in Fire­fox 3.6 that allows you to drag a font file direct­ly onto the pan­el to select the fam­i­ly of your choice.

FontFriend 2.2 Update

This is a two-fold small update to Font­Friend, the typo­graph­i­cal­ly obsessed web design­er’s best friend. A request came in over Twit­ter for inline styles in the Font Fam­i­ly sec­tion. Good idea, and it’s now in there.

Non-present fonts show up as monospace

It’s also a small update because Font­Friend is even small­er — I’m now mini­fy­ing it (using YUI Com­pres­sor), which brings the total size from 12.5K to 10K. Not a huge sav­ings, but every bit helps, and I made my first build  script in the process.

Because it pulls direct­ly from Google Code, there’s noth­ing to do oth­er than see the new ver­sion show up. (Clear your cache if you keep see­ing 2.1.)

Smarter Custom Post Types in WordPress 3.0

NOTE: I’ve moved this into its own project page, where you can now find the down­load link and leave com­ments. This post will no longer be updat­ed and com­ments are now off.

Word­Press 3.0 is almost ready for prime-time, and with it full sup­port for cus­tom post types. You can read about the tech­ni­cal details of adding a cus­tom post type, or why you should use them. The WP team have done a great job with bring­ing this func­tion­al­i­ty into the upcom­ing 3.0 release, but one thing that’s puz­zled me is (cur­rent) lack of good sup­port for 1) cus­tom URLs for that par­tic­u­lar post type only (some­thing like http://yourdomain.com/movies ) and 2) cus­tom tem­plates for that post type. (I’ll be using this to move port­fo­lio items to a “port­fo­lio” post type.)

But, that’s noth­ing a lit­tle code can’t fix. With the helper class I’ve made, the fol­low­ing is possible:

  1. Cus­tom URLs for a land­ing page for your post type, with full pag­i­na­tion & feed sup­port. (eg http://yourdomain.com/movies/, http://yourdomain.com/movies/page/2/, http://yourdomain.com/movies/feed/ )
  2. Cus­tom land­ing page tem­plates: if you reg­is­tered “movie” as your post type, you can use movie/index.php or movie.php in your theme direc­to­ry (falls back to index.php if they don’t exist)
  3. Cus­tom sin­gle page tem­plates:  WP already looks for single-movie.php (and falls back to single.php). This func­tion allows you to use movie/single.php — great along­side movie/index.php for bet­ter theme organization.
  4. adds class­es to body_class() and post_class() for that post type.

Usage

After includ­ing the SD_Register_Post_Type class and the helper func­tion sd_register_post_type(), all you need in your functions.php file (or wher­ev­er you choose to run this) is the fol­low­ing line:

sd_register_post_type( 'movie' );

That’s it. Call it again with a new argu­ment for anoth­er post type. Repeat as many times as you need post types. I’ve set good default argu­ments to pass to register_post_type(), but you can over­ride them with your own. (Read more about the $args here, here and here.)

sd_register_post_type( 'movie', $args_array );

Also, gram­mar pedants know that adding an “s” suf­fix is not appro­pri­ate for all plu­rals. In the case of post type “movie”, our URL land­ing struc­ture is http://yourdomain.com/movies, which works fine. But, for irreg­u­lar plu­rals, the func­tion accepts an option­al third argument:

sd_register_post_type( 'person', $args_array, 'people' );

The above URL struc­ture would then be http://yourdomain.com/people for the post_type “per­son”.

One note that’s very, very impor­tant: your cus­tom URLs won’t work until you go to Options → Perma­link in wp-admin and re-save your cur­rent URL struc­ture. This will flush WP’s cur­rent URL struc­ture and add our new rewrite rules. This is com­pu­ta­tion­al­ly expen­sive and you don’t want it hap­pen­ing every time, which is why I’m leav­ing it as a man­u­al oper­a­tion. You’ll only need to do it once (or after chang­ing the third plur­al argument).