Over on my personal blog I talk about a 3D slide deck I’ve created that uses HTML5, CSS3, and a bit of SVG (video). The main idea behind this deck is to be able to ‘zoom’ into topics to as deep a level as necessary. Slides are nested, like an outline.

For example, I gave a talk at Future of Web Apps recently on HTML5, CSS3, and other web technologies and only had 40 minutes, so I just skimmed the surface of the slides. However, in a few days I’ll be speaking at Fronteers and will be diving deep into SVG and Canvas, so those slides can be zoomed into. The goal is for me to have a universal slide deck that can ‘accordian’ open and closed to fill either a 40 minute session or an all day workshop, kind of like stretchtext.

Read more to learn about the 3D slide deck and how I built it.

For single clicks, Chris has found that you can use tabindex as a trick to simulate :hover.

Chris creates a sample where he has an image expand when 'hovered' over:

Chris has the following HTML markup using HTML5 (notice the tabindex property):

Each image/figure is given a tabindex one higher than the last one.

The image/figure can then be hooked onto using the :focus property, which will work on mobile devices when a user presses their finger onto the element. When this fires some CSS will cause the outline to disappear; the image to rotate and scale larger; and a box shadow to appear:

Once he had single-click under his belt, Chris moves on to trying to get a CSS solution for double-click for mobile devices. He mentions that for this its a bit more CSS nerdery since JavaScript is pretty straightforward in this case:

For anyone interested, “dblclick” is a native JavaScript event. If you wanted to, for example, force links to be double clicked instead of single clicked, you could bind a simple { return false; } function to the click event. Then also bind a function to dblclick that would change the window.location to the links href attribute.

This article isn’t about that, it’s about hardcore CSS nerdery and seeing if we can also do it without using JavaScript.

See Chris' demo and blog post for more details on the double-click CSS solution.

This is why it's important to stay on top of the latest CSS work. I've found The CSS Awards web site a great way to do this. The CSS Awards is:

[a] gallery of the most prestigious websites in the world created with CSS. An international jury of the top designers, agencies, and bloggers will award prizes to the best CSS websites.

A new CSS website is posted every day.

These experiments caused me to stumble on Paul Hayes interesting work simulating a 3D animated cube using CSS3, hence they happen on the GPU on the iPhone/iPad and are quite fast:

A 3D cube can be created solely in CSS, with all six faces. Using JavaScript to detect key presses and update inline styles this cube can be intuitively navigated.

Demo (Webkit only)

Paul achieves this by having each face of the cube be a unique DIV, each with a 'face' class and inside of a larger 'cube' class all wrapped by an 'experiment' class:

The outer wrapper is the camera and allows you to apply perspective and where you want the perspective origin to be:

The #cube itself is given a size, CSS transition properties so things will animate nicely, and an instruction to preserve 3D children and not 'flatten' them:

Each of the faces is given some common styling:

The individual face DIVs are then rotated and translated in 3D space into their correct positions:

Read more in Paul's post.

Adobe is pleased to announce the availability of the Adobe® Illustrator® CS5 HTML5 Pack. This add-on for Illustrator CS5 15.0.1 provides initial support for HTML5 and CSS3, extends SVG capability in Illustrator CS5, and helps you easily design web and device content. In combination with the HTML5 features available in the Adobe Dreamweaver CS5 11.0.3 updater, these new tools allow web designers to take advantage of the latest advancements in HTML5.

While HTML5 and CSS3 will not be finalized for some time, and SVG support in browsers will continue to evolve, the extension provides support for a set of currently implemented features.

Some of the benefits of the HTML5 Pack:

• Efficiently design for web and devices by exporting Illustrator Artboards for unique screen sizes using SVG and CSS3 media queries.
• Create web widgets with Illustrator by generating dynamic vector art for data driven web work-flows.
• Take advantage of the latest enhancements to SVG and Canvas to generate interactive web content.
• Map artwork appearance attributes from designer to developer tools—export from the Illustrator Appearance Panel to CSS3 for streamlined styling of web pages.

Greg Rewis discusses it more in the video below:

Mordy Golding has a good description of some of the new features in this lab pack:

Parameterized SVG

You can designate certain attributes (i.e., fill, stroke, opacity) as variables right from the Appearance panel in Illustrator. When saved as SVG, developers can easily change the variable definition to "reskin" or modify the art. You can even create global variables.

Multi-screen SVG

You can create multiple artboards in Illustrator at various sizes, for example to design art for different screen sizes. You might do this to create different designs for mobile, tablet, and desktop versions of a design for example. You can then save your file as SVG and include all the different artboards. Illustrator creates an HTML file and a CSS file, along with separate SVG files for each artboard. The CSS uses media queries to detect the screen size and automatically serves up the correct SVG image.

Mark objects as canvas in SVG

You can select an object on the Illustrator artboard and then choose Object > HTML5 Canvas > Make. These elements are rasterized and included as canvas elements when saved as SVG, giving developers the ability to control the elements via JavaScript.

Export named character styles as CSS

You can define character styles in your Illustrator document, and then export those character styles as a valid CSS file. You can do this directly from the Character Styles panel.

Export artwork appearances as CSS

You can select an object in Illustrator and export valid CSS directly from the Appearance panel. Of course, if you mockup an entire page in Illustrator, you can simply select all of it and export it to a single CSS file. IDs are picked up from the Layers panel (so you want to name artwork carefully), and Illustrator can export Fill, Stroke, Opacity, and Absolute Position and Dimensions.

Include selected Graphic Styles as CSS in SVG

You can select styles from the Graphic Styles panel and choose to have them exported when you save your file as SVG. What's really cool is that you can include styles even if they aren't applied to your artwork. This would allow you to deliver multiple styles to a developer within a single SVG, and even programmatically swap styles.

Great work Adobe!

Our very own Christian Heilmann has posted a tutorial on creating a fancy sticky note effect using CSS3 and HTML5:

He breaks it down in five easy steps to produce the final following demo:

Last week Adobe announced they are jumping into the Web Fonts game in a partnership with Typekit:

For this debut of Adobe Web Fonts, I think we’ve made some great choices. Everyone knows Myriad and Minion — pervasive workhorse sans serif and serif typefaces, respectively, which will prove to be as useful on the web as they have been in print. Thomas Phinney’s Hypatia Sans and Carol Twombly’s Chaparral are distinctive and versatile. Adobe Text is Robert Slimbach’s newest design which a lot of people haven’t even seen yet (so far it has only been available as a registration benefit for CS5 customers) but I’m certain it will quickly establish itself as a flexible and reliable text typeface, and I’m pleased it will now get a wider audience.

Richard Lipton’s classic Bickham Script is one of our most popular display typefaces and a distinctive addition to the Adobe Web Fonts collection. More of Robert Slimbach’s work now available for web use include Adobe Garamond, Caflisch Script, Cronos, and the “display” designs for Garamond Premier (based on Claude Garamond’s beautiful Gros Canon type).

Speaking of which: You will find that we’ve included optical size variations for some of our typefaces. These designs are carefully crafted to look their best at small sizes (“caption”), medium- to large-size headings (“subhead”), or in headlines and other large sizes (“display”). On the web, these distinctions are less resolved than in print, but optical sizes will give you more options to find just the right font for your needs — and giving users better options for fine typography is what Adobe Originals are all about.

Remember, Adobe Web Fonts support the same languages and scripts as their desktop counterparts. Most are “Pro” fonts — meaning their character set supports Central European languages. Adobe Text, Garamond Premier, Hypatia Sans, Minion, and Myriad also support Greek and Cyrillic. (Select the “All Characters” Subset option in Typekit to use them.)

It's exciting to see Adobe supporting web fonts!

Things kicked off with a nice introductory article by Ethan Marcotte introducing CSS Media Queries in order to have responsive and adaptable web designs.

Things started to get interesting with a counter-article by Jason Grigsby titled "CSS Media Query for Mobile is Fool's Gold". Jason claims:

Unfortunately, CSS media query is fool’s gold for mobile devices. It hides tough problems and gives developers a false promise of a simple solution for designing to multiple screens.

His chief issues with CSS Media Queries can be boiled down to:

The idea of adding more code—adding more to download—in order to optimize for mobile should be the first clue that this isn’t a good solution.

From a high level his other objections are:

• That speed matters more on mobile devices
• That letting the browser scale images for you is a bad idea since delivering images at the maximum size then scaling them down is wasteful on mobile devices
• That resizing images on mobile browsers is cpu and memory intensive, both of which mobile devices can lack

Jason also discusses some interesting workarounds people have proposed for the above issues still using CSS Media Queries, such as delivering different images at different sizes using different CSS Media Queries and using hidden CSS background images but:

However, the iPhone still downloads the images even though they are not displayed.

He does find some workarounds but there are issues:

Two methods that appear to work are:

• Setting the parent of an element with a background image to display:none.
• Using media query min-width declaration to only specify a minimum browser width for the desktop image and a max-width for the mobile image does result in only the mobile image being downloaded in Mobile Safari.

These two options mean that using CSS media queries isn’t completely impossible, but using the parent element to hide images and changing existing desktop CSS to add min-width declarations are significant changes to existing CSS. It isn’t going to be as simple as adding a CSS media query for mobile and calling your job done.

In the end Jason argues for separate web sites for mobile, but:

There are some good uses of CSS media queries. If you’re building a discrete web application where you have more control and can make sure that the desktop web isn’t bloated, it can make sense.

Also, Ros Hodgekiss from Campaign Monitor wrote an exceptional article on how you can use media queries in html email to provide a mobile optimized layout. This is perhaps the ideal use case because when you send html email, you have no choice but to send a single html document regardless of what device the recipient will be using.

In response to Jason's CSS Media Query smackdown PPK wrote up an editorial titled "Combining Media Queries and JavaScript":

On Tuesday Jason Grigsby challenged the conventional view that media queries are all we need to make a website mobile-friendly. Although he’s right when he points out some serious problems, I do not think that media queries are the “fool’s gold,” as Jason says. The message seems to be more that media queries alone are not enough to make your sites mobile-friendly. An additional component is required.

PPK argues that CSS Media Queries have their place:

Media queries are silver bullets when it comes to pure CSS. Restricting the width of your site, moving sidebars and main navigations elsewhere, media queries can do all that and more.

The trick, however, is that a pure CSS approach is not enough. In addition we need a JavaScript that also reads out the media queries and uses the data to decide whether to download the complicated mapping script, whether to download the low-source or the full-source images, or possibly none.

As far as I know there is no direct access to media queries from JavaScript. You can’t read out whether the example media query above has fired or not.

He then talks about a nifty way to pair up JS and CSS Media Queries:

Fortunately, there is a pretty safe way of using JavaScript in conjunction with media queries. It turns out that all browsers I tested so far have paired the width and device-width media queries with the values of document.documentElement. clientWidth and screen.width, respectively.

This is a general rule. All mobile browsers that support media queries exhibit these pairings. It’s hard to believe, but I haven’t found any exceptions yet — and rest assured that I searched for them, because I could not believe that it would be this simple. And I will continue to keep an eye on this and report problems as soon as I find them.

...

When these scripts are added to media queries, we’re a whole lot closer to making one website that reacts to a mobile (or rather, a narrow-screen) environment both in its CSS and in its asset management.

Finally, Bruce Lawson tag teamed into the rumble with an article on the topic titled "There's more to mobile than than media queries":

In our enthusiasm to try out media queries and in our rush to skim the latest articles and tutorials, it's easy to overlook caveats and restrictions. Media queries are good at what they do but are just a single tool for a job where two or three are probably needed. In particular, combining them with JavaScript as PPK and others advocate seems to me the most practical solution for web developers to adopt at the moment.

[CC-A by Paolo Camera]

Tell me below whether you think CSS Media Queries are your friend or foe?

How can you go wrong with lyrics like this:

CSS3
Web animation done properly
CSS3
Degrading gracefully

I had a dream, an awesome dream
People surfing in the park
On Windows, Linux and Mac
And their page load speeds were oh-so-high
No big JavaScript library
Just to show some eye-candy

CSS3
Web animation done properly
CSS3
Degrading gracefully

As we surf down the superhighway
Did you ever even think
We could replace <marquee> and <blink>?
With just one, just one line of code
But it's open to abuse
We must be careful not to overuse it

CSS3
Web animation done properly
CSS3
Degrading gracefully

CSS3
Web animation done properly
CSS3
Degrading gracefully
Degrading gracefully
With HTML5, naturally

[via Bruce Lawson]

He has a cool demo (Chrome or Safari + Snow Leopard only) of the effect:

The pulsing effect, for example, is generated by a CSS3 Animation:

The map itself is rotated to a 3D angle using a CSS 3D Transform:

While the pin, marker, and pinhead themselves are a combination of CSS 3D, CSS Transforms, CSS Gradients, and more:

We've seen a number of nice CSS3 generators. I stumbled across another one recently that has a nice set of features for autogenerating the following from a single CSS3 generator web page:

• Border Radius
• Gradients
• CSS Transforms
• CSS Animations
• CSS Transitions
• Text Shadow
• Box Shadow
• Text Rotation
• @Font Face

The advice?

The important thing is to always remember that reflowing and rendering HTML is the single most expensive operation browsers do. If your page feels sluggish it’s most likely a problem with rendering. While the easiest way to optimize is to get rid of as many nodes as you can, and trying to have simpler CSS rules, sometimes JavaScript is the culprit.

Following changes to the page, a Javascript query like someElement.offsetHeight will block execution - to give you the right answer, any pending reflow has to be executed first. So code like this:

could be twice as fast if you wrote it like this:

because there are two reflows in the first example, and only one in the second.

• Touch event support for mobile interfaces including flick and move gestures
• Browser capability loading - which means that every browser gets the least amount of code necessary to make it work
• Transition support for the animation module - meaning only browsers that don't support CSS3 transitions get the JavaScript animation fallback
• An update to the CSS grids to allow for more flexible layouts
• A ScrollView widget similar to the one in Apple iOS
• The uploader has been transitioned over from YUI2 to YUI3

So check out what is on offer and give the YUI team feedback on what would be nice to have and what is broken. In their own words:

The goal of a preview release is to make it as easy as possible for all of us in the community to evaluate progress of the upcoming release and provide feedback. Please take some time to test 3.2.0pr1 and let us know what you find by filing tickets in the YUI 3 bug database marked as “Observed in version” 3.2.0pr1. We’ll do our best to address preview-release questions on the YUI 3 Forums, too.

There are three ways to get started with the preview release: YUI 3.2.0pr1 is available on the CDN via the 3.2.0pr1 version tag — so you can reference preview-release files like http://yui.yahooapis.com/combo?3.2.0pr1/build/yui/yui-min.js. If you switch to this seed file for the preview release, all subsequent use() statements will continue to load YUI 3.2.0pr1. Or You can download the full YUI 3.2.0pr1 from YUILibrary.com, including source code and examples for all components. Or you can simply explore the functioning examples roster.

Jason Johnston's new PIE library makes it easy to rendering several of the most useful CSS3 decoration features within Internet Explorer versions 6 through 8. He took an interesting approach by using IE DHTML Behaviors to style the elements and provide the necessary functionality to emulate the CSS3 functionality. So to add rounded corners to an element, your CSS code might look like this in plain 'ole CSS:

To add support in IE 6-8 using PIE, you'd add this:

PIE currently has full or partial support for:

• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient background images

Unfortunately, there seems to only be one demo at the moment, which is border-radius rendering via the home page, but it's still seems like a good start with a lot of future potential.

I've never personally used IE DHTML Behaviors or HTML Components so I looked them up and found these intro links for those who might be interested in better understanding them:

Using HTML Components to Implement DHTML Behaviors in Script
Introduction to DHTML Behaviors

Franz Enzenhofer has created a nice new webkitTransform plugin that helps you manage transforms and state.

Franz tells us more:

With jQuery.css you can't easily change the webkitTransform CSS because webkitTransform is not your average CSS.

If in one step you add .css('-webkit-transform', "rotate(20deg)") and in the next step .css('-webkit-transform', "scale(2.0)") the rotate value gets reset, as you have rewritten the complete -webkit-transform CSS value.

You could use the WebKitCSSMatrix javascript element, but it's currently buggy, not consistently implemented and a pain to use.

Additionally you can't just retrieve the '-webkit-transform' css with .css('-webkit-transform') as this just gives a matrix code.

Our goal with webkitTransform() was to fix this problem. With it, every element you assign webkit-transform css with can be edited in a simple way, without resetting every other -webkit-transform values.

The latest fun from Guillermo and Nathan is ChromeKit, which gives you windows that look like Google Chrome.

The one tweak to the code kata this time around, is their use of CSS3 goodness to show off skewing windows as they are tiled together.

Do you enjoy the "looks at me build something cool in pure CSS"-meme? It is kinda fun. On the one hand is shows what amazing things people can build, and on the other.... it reminds us that we need some tools to help make life easier. At least the platform is here, and tools can come later.

Louis Harboe has followed up his purchase of an iPhone 4 with iOS 4 icons made with CSS. Now only do we get to see his work, but he talks about the high level ideas behind the implementation:

In the contacts icon, I used 5 different shapes for the silhouette icon. The head is a rectangle with rounded corners, followed by another rectangle for the neck and a distorted semi-circle for the body. In order to get the curve of the shoulders to the neck, I placed two circles on top of the shapes.

The weather icon has several rays of light shooting from behind the sun. Each one of these rays is actually a long rectangle with a gradient that fades to transparent on either end. I used -webkit-transform:rotate to rotate each rectangle to a different angle. The same effect was used for the iTunes icon.

To get the cloud icon on the iDisk icon, I used two circles layered on top of each other, above a rounded rectangle. The larger circle has a gradient that cuts off just before the rectangle.

Take a full example such as calendar:

Awesome. One nice thing about this approach is that it can scale. iPhone 4 users are already talking about how glaring it is when apps have low res assets. Even the Facebook applications.... the text looks great, but the icon is blocky.

Also, some other nice CSS gradient examples were put on display.

The Chrome and HTML DevRel team at Google have released a new portal, HTML5 Rocks, that packages together some of the great resources available on HTML5 and the renaissance of browsers.

Whether it be references on what you can do, to readiness to shims to get use features now.

Beyond the resources, there is the killer HTML5 Slide Presentation and interactive playground.

A lot of nice stuff, all in one place. This is the first release, and we are sure to see a lot of additions coming soon. What would you like to see?