I was watching the other day the talk that Lea Verou gave at Fronteers 2011 (you can check the video on Fronteers Vimeo page) when she just proved that I don’t know CSS3 at all (I lived for a while with the sensation that I did know a little bit, I was wrong though).
One thing caught my attention: CSS3 patterns. She build some really crazy stuff there and I invite you to check more CSS3 patterns on her site, test the code and implement it in your future projects. Nothing is made with images, just pure CSS3 gradients and lots of brains.
Here’s how some of them look like:
Styling a form is never an easy thing to do, but adding CSS3 on a HTML5 form is a task that shows a large variety of results when it comes to testing on different browsers. Check the test link.
When it comes to CSS3 not much can be done: but adding rounded corners, gradients and dropshadows is still more than nothing anf the overall aspect of the form is waaaaaaaaay better. But HTML5 is supported by few browsers (this HTML form only by Opera) and CSS3 also by few broswers – but different from the one supporting HTML5.
The result: impossible to see the result on one browser only: the rounded corners can be seen on Mozilla/Chrome/Safari and the HTML5 elements on Opera.
Internet Explorer? Better don’t ask. No support whatsoever.
So the results:
- Mozilla 3: rounded corners + / HTML 5 elements
- Chrome: rounded corners + (they look weird) / HTML 5 elements –
- Safari: rounded corners + / HTML 5 elements –
- Opera 9: rounded corners – / HTML 5 elements +
- IE (doesn’t matter which one): rounded corners – / HTML 5 elements –
Ric Ferrer sent us a screenshot with the behavior of Mobile Safari from his Ipod. Thank you 🙂
Check the Spanish version of this post:
Usando CSS3 para dar estilo a formularios escritos en HTML5