If you need to get in touch with me all formal and stuff, shoot me a secure email on my contact page.
Hi! I finally got around to releasing all my oldschool CSS3 animation experiments on GitHub.
Warning: Not for production. This code is old and experimental.
Game changing move by twitter. They dreamed up a new way to do patent assignments that keep control in the hands of engineers and designers. You can download the IPA on Github. My favorite part of this post was in the last paragraph:
“The goal of this week is to give rise to the most audacious and creative ideas. These ideas will have the greatest impact in a world that fosters innovation, rather than dampening it…”
Paul Irish points out that production CSS should always be concatenated and as a result be super ugly to human eyes.
The file that you author should not be the one you deploy. The production CSS should be concatenated and run through a minifier and quite ugly to look at.
Meanwhile your original .sass or .css files are formatted however you like. Take pride in their layout, but be ruthless in making ugly files that go to production. 🙂
Mobile-First Responsive Websites provide users with the best possible experience afforded by their devices. Just as the UI and content adapts to device widths and network capabilities. So should the website logo have adaptive qualities.
Simply reducing or enlarging a logo according to its context isn’t always the best solution. As the content area and device capabilities increase, designers are justified in adding additional details to the logo graphic itself.
I wanted to explore this idea and decided to create a little demo.
Using media queries and CSS3 properties we can add subtle shadows and effects to our logo as the screen size expands. This technique will work in most modern browsers. On older browsers it will simply fall back to the flat logo image. Which isn’t bad.
I decided to use an inline SVG image for the logo because your logo is an image, not an h1. I used an SVG graphic because we need the logo to scale flawlessly.
This logo starts at a mobile-first size and scales up at 3 breakpoints. (The breakpoints are unimportant for our purposes and were chosen at random.) It will be small enough to fit on mobile devices. In this first version we have the logo mark and the logo text aligned on a single line. The logo text is the same size as the cross-section of the logo mark.
Break Point Break Down
BREAK POINT 1: On this one we keep the size of the logo text the same but we increase the size of the logo-mark so that now the logo-text aligns with the heart within the logo mark instead of the cross-section.
BREAK POINT 2: We add some shadow on the bottom of the logo. And a highlight at the top. We stack the logo text and increase the font-size of the top line so that it’s wider than the bottom line.
BREAK POINT 3: Finally we use CSS3 effects to create a faux 3D effect on the logo.*Note* Chunky 3d CSS3 text-effect originally by @mdo.
Take a look at the demo and move your browser window around.
These web development ideas and techniques are so great, its easy to become passionate about them. As good web workers we’re instinctively drawn to them. And implementing them wherever we can usually becomes a priority. But as geeks, sometimes we can get a little hung up on technical details.
These experiments can lower the barrier to entry for young students looking to get into web development. What better way to get a bunch of 10 year olds excited about web development than showing them how to create an animated NYAN CAT out of html and CSS3?
When considering these experiments we shouldn’t get hung up on how cpu intensive they are or whether your browser is freezing up. We have to take these experiments for what they are. Learning tools that help us create and express new ideas.
If you find yourself criticizing these experiments because they’re not production ready or overly complicated. Beware. You might be missing the point.
iPhone 4S debuted yesterday and with it a snazzy new “features” page. This is especially important to me because Apple used CSS3 animation to breath some life into it.
I’ll explain from a high-level overview so you can get an idea of whats going on.
HERE’S THE SETUP
We start with a large div (3200 X 3900) named “#phone-stage” set to
overflow:hidden will hide any portion of a child element that passes it containment boundaries. This effectively masks the #phone-stage div to the dimensions of the #clip div.
On #phone-stage there are six feature-modules. One for each of the new iPhone 4S features:
- A5 Chip
- iOS 5
The elements for each feature-module consist of mainly a logo and a few screenshot images.
There are also featured-text snippets associated with each feature-module. But the featured-text snippets are not children of #phone-stage. The snippets are placed into their own divs, independent of the main #phone-stage div (more later).
BODY MOVIN’, BODY MOVIN’
Now #phone-stage is loaded up with the 6 feature-modules. Each module has its opacity set to 0 and is positioned at different locations and rotations within #phone-stage. After 3-5 seconds (or upon key press or click event) the #phone-stage div will rotate and zoom to the next position.
As #phone-stage rotates and zooms into position, the child elements within each featured-module fade in and animate independently.
The featured-text snippets that reside in their own div animate into the featured-module with their own timing, and fading animation, unaffected by the zooming and rotation of phone-stage. This creates a very sophisticated, multi-layered effect with minimal animation layers.
RETREAT! MOVE! FALL BACK!
For browsers without CSS enabled animation they see the Featured/Hero slider. This script detects the browser ability to display CSS3/HTML5 animation. If the browser cannot display animation it will fallback to the typical feature-slider by hiding the animation code and displaying the fall back code.
Get the Insider Information on Css3 Animation
Did you know that Wired Magazine (iPad) might be the first publisher to use CSS3 animation as a major design element of a story? The cover story no less!
How do I know this? I helped them do it!
The cover story of the June 2011 issue featured a bar graph representing the highest paying jobs in the USA. The idea was to have the text of the article floating over the bar graph. When a user swipes to a page the bar graph animates behind the floated text. (see video)
Working in the Dark
All the code was based on some pretty safe technical assumptions. Being that the screen size for iPads is around 768*1024, we have a good idea of where stuff should go. Because all the contents of the Wired magazine are downloaded prior to reading. We can rest assured that all the elements will be completely loaded and ready to animate the instant the user swipes onto the page. I didn’t have to worry about buggy animation.
There was no easy way of testing my work. The plan-of-attack was that I would write the html/css code in Textmate and they would build their layouts in InDesign. They would import my code and their Indesign layouts into the Adobe Digital Publishing Suite. From there they’d publish to the iPad in some magical way that… I can’t be quite bothered to fully understand yet.
You Call This Inspiration?
Imagine Don Draper walking into the office. His suitcase swings in his hand. His brand new Adidas squeak against the polished floor… Eh!? Adidas?
I love Adidas. This is the idea that popped into my head while watching the intro sequence to the Mad Men show. “Wouldn’t it be cool to re-create the Mad Men intro, but replace the man’s shiny shoes with a pair of classic Adidas?”
It was that ridiculous thought that gave me the idea for a CSS3 Mad Men intro. Dumb right? 🙂
I got to work.
Splitting the Scenes
The first task was to locate a high-quality version of the intro on youtube. After studying it closely I realized it could be duplicated easily using simple CSS3 animations.
Every time the camera angle changed, that would make a new scene. I paused the play head at the start and end of every scene and grabbed an image of both. This gave me “before and after” images for each scene. I would paste these on individual layers into a Photoshop file. Repeating the process until I had 16 .psd files (16 scenes) with a “before and after” layer in each one.
Duplicating the Graphics
I began drawing over the images I previously grabbed. Scenes 1 through 6 were pretty straight forward. I created shapes over the original images trying to duplicate the objects form, color and texture as closely as possible.
As I drew each graphic I had to be mindful of how I was going to animate them.
For instance, Scene 5, where the office collapses, has many moving pieces. By keeping Photoshop open on one screen and the mad men intro open on another. I was able to focus on a specific object and determine how many moving pieces each one needed.
Take the desk for example. If you look at the original intro closely you’ll see the desk falls apart into pieces as it slips down. By watching the desk pieces move I could determine which pieces obscured the others as they fell and I could start planning the html and stacking order of the graphics. It was a meticulous process and admittedly you have to be a bit nuts to undertake it. *Ahem*
Drawing the buildings that fly by as the silhouette falls wasn’t so fun. I ran into a little creative block with them. I wasn’t sure who or what I was going to place behind the glass. And I couldn’t figure out a good way to replicate that washed-out, hazy look the buildings have in the original.
Rather than get hung-up on the buildings. I figured I would draw basic shapes for them and match the perspective of the buildings. That way they would look as believable as possible when they where moving behind the falling silhouette. Later I could circle back to the buildings once I hammered out all the CSS3 animation.
I posted a little preview of the graphics to dribbble.
A Multinational Alliance
Enter Andy Clarke and Geri Coady. I worked with Andy and Geri previously on a CSS3 animation for his excellent book ‘Hardboiled Web Design by Andy Clarke‘. And I was stoked to be working with them again on this project.
The buildings I created sucked but ultimately served as a good foundation for Geri Coady’s artwork. She was able to create some incredible graphics of the ALA speakers. There is excellent design/photoshop work in those building panels. They merit close attention. Hopefully Geri will write a post on her site detailing how she created those amazing effects.
The code for the animation is composed from an ordered list with 16 list-items. Within each list-item is all the html and images necessary for that particular scene. By default all these list-items are set to display: none.
We have a bit of jQuery that applies a “go” class to each list-item for a specific amount of time. This “go” class sets the list-item to display:block and activates the CSS3 animation assigned to that list-item (scene).
Once the specified amount of time has elapsed. The “go” class is removed from the list item. Setting it back to display: none, turning off the CSS3 animation and immediately applying the “go” class to the next list item in the order. Starting the whole chain of events again.
The code for the animation elements is ugly un-semantic html. But hey, sometimes you just have a good plan and say “fuck it”.
Andy had a plan for the ugly code. Browsers that didn’t support CSS3 animations will see an ordered list with an image and descriptions of each scene in the animation.
If the browser supports CSS3 animations we’ll use modernizr to replace each image and description with the html elements necessary for the animation. Simple!
Animatable would have made creating this project a breeze. Unfortunately I was forced to code this one by hand. After I had already completed the animation. The whole Animatable Team (Dan, Naomi, Andy, Mircea) were still secretly working on the earliest versions of it. I’m dying to get my hands on it.
I can clearly picture graphics and html elements animating. Then I can use that mental image to write the HTML/CSS3 in a way that would work the best for the animation. But its very difficult to visualize how much an element should squash/stretch. It difficult to add subtle nuances in the animation when your forced to think through rotational degrees and X/Y coordinates. That’s where Animatable saves the day.
According to the Animatable team they’re going to open it up soon to a few people for private testing. I’m trying to elbow my way to the front of that line and eagerly await for them to open the doors.