The Intricacy of Simplicity: CSS3

Ever wondered how a particular effect was achieved in a web design, and, after zooming in several clicks, you found that the author added several subtle shadows, borders, gradients, etc? In the past, this was achieved simply by slicing out an image, and setting it as a background of some element. Luckily, with CSS3, we can be afforded much more flexibility. Now, while the code for such a simple effect might be a bit tedious, it’s well worth it, and that’s what we’ll review in today’s written and video quick tip!

Video Version

Subscribe to our YouTube page to watch all of the video tutorials!

Rather watch this screencast on Screenr.com?

Text Version

It’s amazing that something this simple requires that much code, but, it’s not too rough, and can easily be abstracted away to a snippet for future use.

Step 1. Create the Mark-up

To make our project as cut-and-paste as possible, we’re only working with an empty div. Create a new index.html file, and paste in the following:

<body>
     <div id="box">

	</div>
</body>

Step 2. Create the Canvas

Next, we’ll add some basic styling for the body element. This is just for the presentation, and can easily be removed. Within style tags in your header, add:

/* Nothing special here. Just the canvas. */
body {
	width: 500px;
	margin: 60px auto 0;
	background: #666;
}

Step 3. Styling the Box

Now, we’ll create our box, supplying a width and height.

#box {
	/* Just a box */
	width: 500px;
	height: 500px;
}

Step 4. Rounded Corners

We should all know about CSS rounded corners by now. Let’s go ahead and implement that.

/* Rounded corners */
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

Note that we’re also supplying the final spec, of “border-radius,” in addition to Mozilla and Webkit’s versions.

Step 5. Border Colors

Mozilla offers a handy property, called “-moz-border-*-colors.” This allows us to set an infinite number of colors for a border. To achieve a subtle “double-border” effect, let’s implement this property.

/* Set a base border and color */
border: 2px solid white;

/* Multiple border colors in Gecko */
-moz-border-top-colors: #292929 white;
-moz-border-right-colors: #292929 white;
-moz-border-bottom-colors: #292929 white;
-moz-border-left-colors: #292929 white;

Note how the number of colors we supply are the same as the border width that we set at the beginning (2px). Also, don’t place commas after each hex value; I made that mistake at first!

Step 6. Compensating for Webkit

To the best of my knowledge, webkit doesn’t currently support border-colors, though it’s possible that I’m wrong. If I am, please leave a comment and let me know! Anyhow, to mimic this effect as best as we can in Safari and Chrome, we’ll use box-shadow.

/* Compensate for Webkit. Not as nice, but works. */
-webkit-box-shadow: 0 -1px 2px #292929;

Note that the provided values refer to the X offset, Y offset, blur, and shadow color, respectively. By passing -1px as the Y offset, we can push the shadow upwards.

Step 7. CSS Background Gradients

The final step is to supply a subtle background gradient for our box. However, we must be sure to provide a fallback solid color for the browsers that don’t support CSS gradients.

/* Background subtle gradient, with fallback to solid color */
background: #e3e3e3;
background: -moz-linear-gradient(top, #a4a4a4, #e3e3e3);
background: -webkit-gradient(linear, left top, left bottom, from(#a4a4a4), to(#e3e3e3));

Unfortunately, Mozilla and Webkit don’t quite agree on the syntax for gradients, which makes the process extra irritating. If it’s too confusing, you can use a new service called CSS3 Please to auto generate each browser’s syntax; it’s very cool!

You’re Done!

It’s amazing; looking over our final image, it’s hard to tell what we actually did! But this is a good thing; subtlety is key in all aspects of design. Thanks for reading/viewing!

Final Code

/* Nothing special here. Just the canvas. */
body {
	width: 500px;
	margin: 60px auto 0;
	background: #666;
}

#box {
	/* Just a box */
	width: 500px;
	height: 500px;

	/* Rounded corners */
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;

	border: 2px solid white;

	/* Multiple border colors in Gecko */
	-moz-border-top-colors: #292929 white;
	-moz-border-right-colors: #292929 white;
	-moz-border-bottom-colors: #292929 white;
	-moz-border-left-colors: #292929 white;

	/* Compensate for Webkit. Not as nice, but works. */
	-webkit-box-shadow: 0 -1px 2px #292929;

	/* Background subtle gradient, with fallback to solid color */
	background: #e3e3e3;
	background: -moz-linear-gradient(top, #a4a4a4, #e3e3e3);
	background: -webkit-gradient(linear, left top, left bottom, from(#a4a4a4), to(#e3e3e3));
}