Three weeks ago I broke my left arm. Design work is pretty much impossible with one hand, I can just about manage slow, one-handed typing. In at attempt to do something productive I’ve set about making a new WordPress theme for this site using fewer assets, and instead CSS3 gradients, corners and shadows to pretty it up. I’m still adding to it but it’s live now, have a look!
CSS3 is great… apart from still not being well supported, which in practice means thinking carefully about fall-backs and writing stylesheets that are considerably longer. Luckily, clever people have created tools to generate compatible CSS.
For me, gradients are the tastiest of graphical enhancements offered by CSS3. The Ultimate CSS Gradient Generator is an excellent tool for creating multi-stop, horizontal and vertical, linear gradient backgrounds, it also gives you an IE preview. It’s also possible to create angled linear gradients and radial gradients. This site explains what’s going on, and how to create radial gradients.
I used an angled gradient for my new website header.
/* for browsers that don't support gradients */ background-color: #ff0040; /* CSS3 */ background-image: linear-gradient(left bottom, rgb(255,0,0) 13%, rgb(255,0,153) 73%); /* Firefox */ background-image: -moz-linear-gradient( 45deg, rgb(255,0,0) 13%, rgb(255,0,153) 73%); /* Opera */ background-image: -o-linear-gradient(left bottom, rgb(255,0,0) 13%, rgb(255,0,153) 73%); /* IE 10 */ background-image: -ms-linear-gradient(left bottom, rgb(255,0,0) 13%, rgb(255,0,153) 73%); /* Safari, Chrome */ background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.13, rgb(255,0,0)), color-stop(0.73, rgb(255,0,153)) );
See what I mean about a lot of code? In the real thing dropped the browsers I don’t care about to make the CSS more managable.
Transparency in the form of alpha channels can also be used within backgrounds. I created my navigation bar with dark and light transparent backgrounds overlaying the header. Choose the fall-back colour carefully and not just leave it to the generator! It may be nothing like the resulting colour you get with transparency, leading to potential text contrast issues.
CSS3 gradient and transparent backgrounds appear to render better than assets on mobile devices with webkit browsers (I haven’t tested other platforms), and are of course quicker to load.
I used other bits of CSS3 I used to enhance my site theme were curvy corners (the Border Radius tool is great for generating these), box shadow and text shadow. All of which add an extra bit of polish without assets, perfect for responsive design.
Used any great CSS3 code generator tools? Please share!
