Simple and basic CSS3 properties that change everything

By now the world has pretty much agreed upon the future of HTML5 and CSS3 – This is how new apps will be built, for the web and for multitude of other devices. There is no question native experience on a platform serves the best for the user, slowly but gradually apps are moving to the HTML5 model, primary examples being Facebook app, Netflix, USA Today, Financial times and several business/finance related apps.

CSS3 is awesome, it’s like magic. It suddenly makes your web app look cooler and less stressful. The biggest improvements over previous versions is the support for,

  1. Rounded Corners
  2. Box Shadows
  3. Text Shadows
  4. Gradients

Of course all the above are visible to the user only when they are viewing your app in a browser that supports these CSS3 properties. To lookup which properties are supported in which browser, take a quick CSS3 test.

I’ve been looking to refine the usage of these properties to make them look the best I can and come up with ideal values.

Here’s my current swatch for these properties.

  1. Rounded Corners – this is simple – at 10px border radius it looks like perfection, not more not less.
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
  2. Box Shadows – this is a little hard to get to, but with #999 a nice gray slightly blurred shadow, it seems close to perfect.
                -webkit-box-shadow: 3px 3px 10px 0px #999;
                -moz-box-shadow: 3px 3px 10px 0px #999;
                box-shadow: 3px 3px 10px 0px #999;
  3. Text Shadows – this is the trickiest part – because there’s more shadow real estate going on, and it’s harder if you have dark text on light color. This also depends on the background color surrounding the text, so adjust the colors according to your underlying theme.
    // light color text needs,
                -webkit-text-shadow: 0 2px 5px #333;
                -moz-text-shadow: 0 2px 5px #333;
                text-shadow: 0 2px 5px #333;
    // dark color text needs,
                color: #111;
                -webkit-text-shadow: 0 2px 5px #999;
                -moz-text-shadow: 0 2px 5px #999;
                text-shadow: 0 2px 5px #999;
  4. Gradients – I avoid them as much as I can, but when I need to I use saturated colors to compliment the darker one. Here’s an example of a glossy CSS3 icon using gradients.
                width: 48px;
                height: 48px;
                margin: 20px auto 0 auto;
                font-size: 2.3em;
                color: #ffffff;  
                -webkit-text-shadow: 2px 2px 5px #333;
                -moz-text-shadow: 2px 2px 5px #333;
                text-shadow: 2px 2px 5px #333;                   
                -webkit-border-radius: 10px 10px 10px;
                -moz-border-radius: 10px 10px 10px;
                background: -webkit-gradient(radial, 28.5 -47, 0, 28.5 0, 700,
    		        from(rgba(255,255,255,1)), to(rgba(255,255,255,0)),
    		        color-stop(10%, rgba(255,255,255,0.2)),
    		        color-stop(10.5%, rgba(140,140,140,0.2)),
    		        color-stop(13%, rgba(140,140,140,0)),
    		        color-stop(13.7%, rgba(255,255,255,0)),
    		        color-stop(17%, rgba(255,255,255,1))) #2E79AB;
                background: -moz-radial-gradient(28.5px -47px 45deg, circle farthest-side,
    		        rgba(255,255,255,1) 0%,
    		        rgba(255,255,255,0.2) 72%,
    		        rgba(140,140,140,0.3) 74.5%,
    		        rgba(140,140,140,0) 85%,
    		        rgba(255,255,255,0) 95%,
    		        rgba(255,255,255,1) 160%);


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>