This project was an exercise for me. I wanted to try out an interesting jQuery plugin I had found callled Isotope and scratch a bit of a personal itch.
Wait.
What I mean to say is that I brew my own beer from time to time and I was looking for a chart that could give me hop substitution suggestions.
So here is my result: Hop Chart.
Killer title, no?
Isotope is pretty slick. It uses CSS transitions and transforms if the browser supports it. Smooth as gravy in Webkit and IE9, less so in the latest Firefox and Opera.
I’m also using a dab of webfonts. In this case the font I’m using is Open Sans through Google Webfonts. I like Open Sans because it has just enough character to make itself stand out from Verdana or Arial/Helvetica without calling too much attention to itself.
I’ve still got some ideas bouncing around in my head. I want to have more sorting options. By beer type is nice, but the original goal was substitutions. For that, I think I’m going to need better data. I’m not even sure who the hell wrote some of this stuff. “Magnum: Aroma & Flavor – Good, bitter quality”. Well, that’s certainly quantifiable.
Progress, thy name is beer.
Yesterday, a man I like, Johnathan Snook, tweeted about a video of Lea Verou at Fronteers 2011 where she shared some interesting tricks possible through the wonder that is CSS3. I highly recommend watching it. Highlights: Go.
Bouncing transitions
One thing I didn’t know was that defining transitions using cubic-bezier instead of the shortcut ease-in allows you to create a bounce effect in your transition. Since transitions can be applied to nearly every CSS property, you can even have a bounce effect in color! Lea has also made a handy tool, cubic-bezier.com, so that you can define your own transitions and see their output immediately. For that, I am grateful, what with the maths and such.
Flexible circles, ovals
I’m not much for putting things in circles, but if that’s your thing, Lea explained how using percentages for border-radius allows for flexible circles. Handy, if you’re into circles.
Box-shadow spread
Where have you been all my life?! This property works just like it does in Photoshop, extending the width of the shadow before the blur is applied. To use it, simply define a value in the fourth position, right before you define your color. An example might make this clearer:
box-shadow: (x-offset) (y-offset) (blur-radius) (spread) (color);
Easy as that.
About the box-shadow property
- Negative values are allowed on the spread property, which you can use to create a shadow on one side only.
- Multiple box-shadow properties are allowed on one element. Using spread and a blur radius of 0, you can create a striped border look.
- Defining a large blur radius can have huge impact on performance. Especially on mobile devices.
- Over-use of the box-shadow property can also cause numbness and swelling of the brain… 90% sure about that.
Use and abuse of linear-gradient
By using linear-gradient along with the background-size property, it’s possible to create a repeating pattern that spans the whole window. Linear-gradient is another property that, like box-shadow, can slow rendering down if overused. That doesn’t make any of these patterns and designs done entirely in CSS any less impressive.
Background images, padding and background-origin
This one is simple. Want your background image to respect the padding you have set for that element?
background-origin: content-box;
Wonderful.
The Mindblower: Styling based on sibling count
In Lea’s words, “…kind of like media-queries for the DOM.” Might have to watch this a few times to get it. (Skip to ~23:00 minutes in)
How sweet is that?
Summation
Most of what I’ve highlighted works in most of the modern browsers, IE included. Probably. We’re still breaking trail here. Also, be careful about using to many of those fancy gradients and shadows, especially on those mobile devices. Nobody likes a slow website. Nobody.
It is hard for a web designer to not get excited about the thought of having more fonts than you can count on your fingers available to make beautiful websites. Luckily, we don’t have to keep dreaming.
Text-as-images, SIFR, Cufon… Web designers have been clamoring for more than the default set of Georgia, Helvetica, Palatino and Verdana for ages. And oddly enough it was Internet Explorer, the bane of many a web designers existence, that supported importing fonts first (IE 4!). Though, in true Microsoft fashion, IE only supported (up to IE9) a proprietary format.
Firefox and Safari, in their latest versions, support the more common .TTF and .OTF files. Firefox 3.6+, Google Chrome 5+, Opera Presto and IE9 support .WOFF which hopes to be the new standard in web font filetypes.
So. The majority of the internet has the capability to view embedded fonts. Now what?
Getting your font on
You’ve really only got two options; go with a hosted service like Typekit, Google Webfonts, Fontdeck and others or roll-your-own manually using something like the awesome FontSquirrel @font-face generator.
How these services work
Typekit requires that a bit of javascript be inserted into the head of your HTML. That code is then used to pull in the font files that are in your “kit”. Using the web interface you can sort through fonts, add the fonts you like to your kit, assign them to elements, id’s or classes, and hit publish. That’s it.
The FontSquirrel generator doesn’t require any javascript. Simply upload the font that you would like to use to the generator, check off the types of files you’d like it to make, choose to eliminate any extraneous glyphs, and hit generate. A ZIP file with a HTML example page, CSS file with bulletproof @font-face syntax and all the converted font files is then served up. Drop the generated CSS into your stylesheet, specify your new font on some elements and save it. Upload the CSS along with the font files and you’re done.
My preference is the roll-your-own method. First of all, it’s free. Second, the FontSquirrel generator lets you select what kinds of glyphs you want to be included in your font file. Why would you want to do that? To reduce file size. Unless, of course, you really need all those accented vowels. Third, you don’t need to go to or rely on another site to manage and host your fonts.
Both options are good choices. And damn, does it feels good to finally have choices.
