Like Rodney Dangerfield, CSS3 gets no respect – not only have the various browser vendors been slow in implementaion; but many are also imposing their own bizarre prefacing like -webkit-box-shadow: and -moz-box-shadow: etc. To add insult to injury, the traditional CSS Styling programs like Top Style and StyleMaster have also been tardy in their implementation of CSS3 standards. Finally, both Apple and Microsoft have swung fickle with fashion and have embraced the new Flat CSS styling in their OS and website pages. For example, the Metro styling in Windows 8 and Windows Phone 8 has done away with the Aero-interface; likewise the Apple website has lead the charge on simple, flat, space-full but rococo and iconic spurning web pages. Just as CSS3 is implemented and matures, its styling gets no respect.
We Like CSS3
TheOpenSourcery likes CSS3 and not just the new animation and box area features. And so too are quite a few Web developers. Because what has emerged on the Web are online sites that not only demonstrate how CSS3 works [checkout the solid set of W3schools CSS3 tutorials] but also provide convenient code generators. It is one such CSS3 generator, CSSMatic, that is featured here.
As you can see, CSSMatic generates 4 of the over a dozen new CSS3 features – Gradients, Border-Radius, Noise-Texture [first time I had heard of this] and Box-Shadow . In our exercise, CSSMatic has been used to generate both Box-Shadow and Border-Radius test cases. They are shown in the JSFiddle below:
[iframe width=”100%” height=”600″ src=”http://jsfiddle.net/jbsurveyer/bsF88/4/embedded/result,html,css/presentation/” allowfullscreen=”allowfullscreen” frameborder=”0″]
The JSfiddle tests shows that there are some rough edges when CSS3 styling are used next to different HTML elements. For example, the Box-Shadows overlap nearby DIV, SPAN and SECTION elements. Developers can correct for this by means of PADDING and MARGIN styles. Ditto for the Border-Radius CSS3. Big radius borders cut into the contained type unless padding protection is provided.
But what turned out to be equally intriguing was the fact that options for the border CSS command have now been implemented. Such alternatives to SOLID as GROOVE and RIDGE now work. But again, users have to adjust upward the sizing of these border style options => 5px or more appears to be a minimum size.
Summary
CSS3 may have just emerged when styling fashion has turned against many of its rich features. But if you want to try out CSS3 there are some great and free online sites that provide not just tutorials but also nifty CSS3 code generation.