CSS3

As we have seen during these past few months, CSS3 and HTML5 have demonstrated that designing is now possible without using graphic programs and relying entirely on code. On today’s tutorial we will show you how to make the fascinating set of frame boxes featured in ThemeShock using pure CSS3 and achieve in the process something that can easily look as any Photoshop work. It’s important to state that these boxes look flawless in Safari and quite great in Chrome, so we suggest you to use either one of these browsers to check them out, now let’s begin this tutorial.

Today you’ll learn how to create your own CSS dropdown menu, without any additional Javascript code. There are no images used and, as usual, minimal HTML markup. Let’s see how is made!

Put together by Anthony Calzadilla, Andy Clarke and Geri Coady, this showcase is a reproduction of the Mad Men opening credits sequence animated in CSS3 — and aside from the references to web designers and their books, it’s a fantastic replication.

In this article, we’re going to discuss the issue of columns, which have been introduced in CSS3. While considering the influence of print on web design, we’ll look at the issue of how usability can potentially be impacted by some potential uses of CSS columns.

The principal feature show-cased in this demo is CSS3 Transitions. The animation between the welcome-screen and the planet-screen, and the animation between the different planets are powered by transitions. But there are many little effects in this demo. Take a look at the Twitter button, the ruler, the credit page or the back button. These effects are CSS3 Transitions too.

For some time now I have been breaking my head on how to create warped text in HTML. CSS3 has some handy transformations on board: rotate, skew, matrix, translate. Transform every glyph individually, bring it to the right position and you will get some nifty text following a path.

Of course it isn’t an option to do all this transformations manually, it would kick us back into the pre-DTP-era in terms of labor intensiveness. Therefore I took the challenge to build a tool for CSS text warping myself. Through my AS3 experiments I already had enough knowledge of bezier-math to find out the proper angles and positions. Unfortunately CSS3 doesn’t offer us something like :nth-letter, so every letter must be wrapped into a new span for now, which is the recommended practice for in-word letter styling by the W3C. Anyway I’m not absolutely happy with this solution and am currently working on a Javascript to do the warping dynamically. I will post it here when I’m finished.

The tool allows you to attach any text to an arbitrary bezier path or a circle. Click “Generate HTML” to get a chunk of HTML that you can copy and paste into your existing website then. Try it out here.

A breakdown of which CSS3 features are supported in which browsers.

They use no images, just CSS3 fancies. Like a good little designer always does, they fall back to totally acceptable experience. Read Chris Coyier’s tutorial over on CSS-Tricks.

Recently I’ve been working on the new website for my employers, Poke London, which launched last week. One of the things of which I’m proudest is the use of media queries to create a site which is sympathetic to small-screen devices. I learned a lot from developing with media queries, not least of which was the limit of what’s possible with them, so I thought it would be useful to present some of the key lessons learned in this post.

CSS3 gallery using tabindex=”-1″ and the :focus pseudo selector to trigger the animation. The benefit of this method over those using fragment identifiers is that users won’t have to hit the back button through each clicked image. And you’re URL stays nice and clean.

Safari and Chrome users get a nice image reflection on the thumbnails.