Unless you’ve been living under a rock for the past six months, chances are you’ve heard of US interaction designers and strategists ZURB. Over the past few months their ZURBplayground has showcased some fantastic examples and demonstrations of the power of CSS3, alongside other web technologies, and has been covered by tens of thousands of blogs around the world.
In case you haven’t seen them already, here’s a few of our favourite examples:
Polaroid Images with Only CSS3
Using nothing more than a grid of linked images and CSS3, we echo the title text of our links and use CSS3 to create “randomly” tilted polaroid-style images.
Recreating the OS X Dock
Super Awesome Buttons with CSS3 and RGBa
Using a combination of CSS3 and new RGBa color values, we can create an easily scalable suite of awesome buttons, complete with gradient, drop shadow, and more.
Awesome Overlays with CSS3
An example of using border-image and other new properties to make killer image overlays in Notable.This month we put a series of questions to the team behind the ZURBplayground, including Jonathan Smiley and Dmitry Dragilev. Keep reading to find out more ZURB, what makes them tick, and why they love CSS3.
Firstly, tell me a little about ZURB and what you do.
When my 82 year old grandmother asks me what we do I say: We help companies create better websites. You know Britney Spears? We re-did her website. That line always connects with her. :)
But how we really think of ourselves is first as interaction designers–we focus on creating interfaces for businesses that connect with people–and second as bottom-up strategists–we help people come up with great products and services by rolling up our sleeves to help them actually build them.
We consult, so we do this again and again and again in very different markets and environments from Facebook to eBay’s auction marketplace, from NYSE to Playlist’s music player–we love facing new challenges with every project.
We also develop our own web apps to create great stuff with our clients. A great example of this is our recent release of Bounce – a free, simple, fun way to share ideas on a website which has been covered in over 170 countries across 30,000+ websites in the 7 days after it’s release. You may have heard of our other tools: Notable and Verify.
Beyond that we publish techniques and tutorials for the geeks to improve their websites. A great example of this is our ZURBplayground. We also organize the ZURBsoapbox lecture series where expert geeks share their lessons learned with likeminded novice geeks. :)
Over the past few months we’ve seen some great demonstrations of CSS3 and other web technologies on the ZURBplayground. How did the idea for the playground come about and what can we expect to see from the playground over the next few months?
We’ve accumulated a lot of tips and tricks over twelve years and we wanted to record that history for ourselves. We also wanted to connect with other people like us to help each other hone our craft. So why not show folks how to create Super Awesome Buttons with CSS3? Why not have a page where share all the interesting moments and slick interactions we stumbled on threw our products? So the ZURBplayground was born.
You can expect a LOT more hotness from the playground. As you’ve seen we’ve widened the scope of techniques from CSS3 to JQuery which has been tremendously popular. We have recently opened up the ZURBplayground to guest contributors and will have our first two guests contribute mobile development techniques next month.
We really believe that we need to design better web products and services by being more focused on people, not just the stuff we build. This is the next 10 years of business online. The old model is: you buy Microsoft Word and you experience it after you buy. The new model is: you experiencing the website service first and then decide if you’re going to buy it. The ZURBplayground lets us find killer moments that can connect with our customers.
Away from the ZURBplayground, how are you utilizing CSS3 in the real world, either in client projects or your own commercial projects?
We’re using CSS3 in a number of ways, both for clients and our own products. We’ve really embraced the term ‘progressive enhancement’ wherein we use CSS3 to add additional visual effects or polish what older browsers will see as a similar but slightly less awesome view.
One example is using box-shadow. For modal dialogs, dropdowns, hovering objects and anything that needs additional visual depth or a stacking paradigm, using CSS3 to generate shadows is significantly faster and more easily controlled than creating top, side, and bottom shadow PNGs. We combine this with our own browser targeting code to supply styles to older browsers than will maintain the visual to some extent and keep the site functional and usable without the newer effects.
The save in terms of development time, for us and our client, is significant. CSS3 has eliminated a number of browser QA issues such as checking sliding door effects for rounded buttons. As a result our clients get forward-thinking code faster.
What aspects of CSS3 have you found the most useful/exciting to date, and what forthcoming aspects of CSS3 are you most excited about?
In terms of headaches avoided, border-radius has been a huge time saver when it comes to implementation. Buttons, modal dialogs, tabbed navigation have been a tremendous help. We use rounded corners in a lot of our visual designs to create a more approachable consumer style.
A number of other properties have been useful, but easily the most exciting aspects are the transitions and transforms. Hardware accelerated animation with simple keyframing? Yeah, we’re sold. Sometimes when animation or effects are critical to an interaction we’ll step back to jQuery. Animation and transitions create a great opportunity to add in subtle effects that:
* draw attention
* guide the user
What else would you like to see from CSS3 or, ultimately, CSS4?
It’ll be great to see properties like gradients boiled down into a single implementation. Frankly some more approachable documentation would be nice as well. There’s plenty of material and there’s always the official spec, but we didn’t realize you could stack box shadows and text shadows until fairly recently. (Yeah, we’re ashamed. Don’t rub it in).
As for CSS4? Whew, who knows. Fleshing out the 3D transforms webkit would be great and more control over text would always be nice. How about if CSS4 was universally, reliably supported by at least 99% of all browsers in use? We’d take that over any new feature.
What do you think about the pace of CSS3 development and browser implementation?
It’s been pretty good, actually – Webkit and Gecko have managed to implement enough, fast enough, that the pressure is piled up on Microsoft so much that IE9 might actually not suck. It’s been so long since there’s been real browser competition that the pace of new browser features and technology support has been surprising, to say the least. Sure, over half the browsers out there may not support a bit of CSS3, but that’s better than 90% not supporting it.
There has been an ongoing debate about CSS3 animations, and whether these should be a part of the CSS specification. What are your thoughts on the matter?
If you want to find out more about ZURB why not take a look at their website or follow them on Twitter and, if you haven’t already, it’s well worth taking a look at the ZURBplayground for some fantastic demonstrations of CSS3 in action.
You can skip to the end and leave a response.
Wow!! That’s inspire me,, thanks…
The box shadow element can actually be applied multiple times – in one property you can have a comma-delimited list of box shadow declarations which will all be applied, in order. We’re actually working on a playground piece about this right now, so stay tuned!
wow, thats great. I didn’t know you could do that. I can actually use this straight away. Just had a project that had text-shadow but I couldn’t get the shadow strong enough. Stacking to the rescue.. text-shadow: #000 0px 0px 10px,#000 0px 0px 9px,#000 0px 0px 8px;
Hey there, I am having difficulties loading your site. Just somewhere around 50 percent in the article appears to load, and the rest is just blank. I am not really certain why…. but you might want to look it over. I’ll check back later on, as this might be just a temporary server error.
Your site is not only informative but also educates them have not seen in any book. Extremely happy that I found a site for learning CSS., But I see a flaw in your work. Not on your site that is ., please try to update the site. Thanks