Cameron Moll's Blog, page 23

Font Sizing with rem

Font Sizing with rem:

Jonathan Snook:

CSS3 introduces a few new units, including the rem unit, which stands for "root em". If this hasn't put you to sleep yet, then let's look at how rem works.

The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.

This is golden. Sizing with em can be a nightmare because of how it's sized in relation to the parent element. With rem being based on the root element, it's the best of both worlds — the relativeness of em with the reliability of px.

Browser support includes Safari 5, Chrome, Firefox 3.6+, and even IE9. At the end of his article, Jonathan provides a fallback at the end for older versions of browsers.

Webfont Services Chart

Webfont Services Chart:

A nice round-up of the current options for webfont hosts. I'd like to see Part 3: Type vendors that don't host your fonts but sell fonts approved for webfont embedding, e.g. MyFonts.

/via swissmiss

Over or Under? The Science of Toilet Paper Orientation

Over or Under? The Science of Toilet Paper Orientation:

Solved.

Radio Silence

Things have been a little quiet around here and will continue to be for a little longer. Lots going on behind the scenes, some vacation time, and all that.

In the meantime, check Hacker News for linkage and such. It's a daily visit for me and usually a gold mine for interesting stuff to tweet or post about. (And if you're a Chrome user, install Readable HackerNews for a designy view of things.)

Bolefloor Natural-Cut Flooring

Bolefloor Natural-Cut Flooring:

Here's an idea that's both aesthetically beautiful and ecologically sound. Cutting along the grain line, rather than in straight lines, "allows more floors per forest." The result is stunning. Check out the gallery for additional samples.

/via @buildllc & @mikeindustries

Hiring: Lead Web Designer at Apartment Therapy

Hiring: Lead Web Designer at Apartment Therapy:

I have to admit I'm feeling a little special right about now seeing these guys post a listing on Authentic Jobs. I've been quietly following Apartment Therapy for several months, along with its sister site Unpluggd.

What's really exciting for me is that, while the content they post is fantastic, I've always felt the formatting and layout could use a little fine-tuning. Looks like that'll be part of the job:

The first job will be to join in our redesign process with our art director, Thomas Porostocky, and work through a complete redesign for launch in September. After that, you will be working on everything: site pages, email templates, cross browser compliance, media kits, and ad driven event campaigns.

Position is in SoHo, NYC. Go make two sites I follow even better, please.

Square Credit Card Reader Available at Apple Store

Square Credit Card Reader Available at Apple Store:

I didn't realize you can purchase a Square in store or at the online store. Just $10. Neat.

Experience Human Flight

Experience Human Flight:

Slow-motion skydiving. Completely mesmerizing.

Update: Ah ha, I figured so. This comment by the producer confirms Twixtor was used to artificially create the super-slow frame rate.

The Making of FunnyBugs.org

Funny Bugs is a non-profit endeavor our family has been working on over the past several months. We think kids with Type 1 diabetes deserve a fun, educational, and social experience for managing their diabetes and helping others do the same. We're making plans to build that experience in our (very) limited spare time.

Our 7-year-old son, a Type 1 diabetic, has been the chieftain of the project. Funny Bugs is literally a product of his imagination. The name, the ideas for an app, and the initial rough sketches of bugs that are [insert obvious adjective] are all his.

The bumble bee you see on the site, based on our son's sketches above, is the handiwork of Jacob Souva. His initial sketch was exactly the direction we were seeking:

A few rounds of refining and texturizing led to the final raster image featured on the site. We couldn't be happier with the result.

As for the site, it has all the requisite bells and whistles for an HTML5/CSS3 experience: Modernizr, @font-face, parallax, CSS3 transitions and animations, and a few other tricks. This is the first site I've coded from start to finish in some time, as all front-end markup and styling for Authentic Jobs these days is in the very capable hands of Ben Bodien. I think I managed alright on my own.

The bee animation required some deft animation. The wings are a separate image from the body, allowing them to be animated by simply changing the opacity from 0 to 1:

@keyframes flap {
0% {opacity: 0;}
100% {opacity: 1;}
}

0% is the first keyframe of the animation. The second is 100%, or the ending frame. flap is the name I assigned to the animation. This name is referenced as follows:

.bee-wings {
position: absolute;
z-index: 1;
animation: flap 100ms infinite;
}

With a speed of 100ms and the animation set to infinite, the result is that the wing image shifts rapidly from fully transparent to fully opaque, making it appear as if the wings are flapping.

Note also the absolute positioning with a z-index of 1. This allows the wing image to appear behind the body image. The body image is given a value of 2, stacking it above the wing image:

.bee-body {
position: absolute;
z-index: 2;
}

The body image and wing image are wrapped in a div with the class name bee, and the entire div is animated as follows:

@keyframes flight {
0% {top: 0;}
50% {top: 15px;}
100% {top: 0;}
}

Here the div begins at the default position on the page in the first keyframe. The second keyframe, 50%, pushes the div down 15 px. The final key frame, 100%, returns the div to the default position.

To execute the animation, here's how the div is styled:

.bee {
animation: flight 2s infinite cubic-bezier(0.295, 0, 0.71, 1.0);
}

flight is the reference name I chose for the animation, 2 seconds in the duration of the animation, and infinite loops the animation. The final value, easing, is a custom value I created using Matthew Lein's Ceaser animation tool.

And that was that. I would have enjoyed the challenge of making the design responsive, but I was out of time. We had a walkathon to attend the day after I pushed the site live:

I bet you can't guess who chose the key lime color for the Funny Bugs tees.

The Mountain

The Mountain:

I won't even attempt to fumble with adjectives. Just watch.

Terje Sorgjerd:

A large sandstorm hit the Sahara Desert on the 9th April and at approx 3am in the night the sandstorm hit me, making it nearly impossible to see the sky with my own eyes.

Interestingly enough my camera was set for a 5 hour sequence of the milky way during this time and I was sure my whole scene was ruined. To my surprise, my camera had managed to capture the sandstorm which was backlit by Grand Canary Island making it look like golden clouds. The Milky Way was shining through the clouds, making the stars sparkle in an interesting way. So if you ever wondered how the Milky Way would look through a Sahara sandstorm, look at 00:32.

/via Tiffany Wardle