< Back

Coding Design with CSS3

When I originally started this post it was named “Developer verses Designers: Who’s in the Know” and it was going to challenge whether developers and designers should be cross disciplined. Originally a programmer and now wearing several hats, I would argue that developers should at least know design best practices and technological advances in the UI. More so, I would even stress that developers should do some designing of our own… This, I now realize , would be a huge mistake. We would soon have unicorns battling armies of orcs and submit buttons setting monitors on fire — best to leave design to designers (for now).

Getting back on track. Recently I was introduced to CSS3, and I was hooked. No longer would hours be wasted slicing and dicing rounded edges and drop shadows. Prototypes would get into the browser, into QA’s hands in less iterations. Websites would load lighter and quicker having done away with extra round-trips for images, stylesheets and browser-script hacks. The world would be a more beautiful place. The sun will shine. Birds will sing. And then.

And then, I found an article on CSS3 browser support. The takeaway is that many CSS3 features are ready and are in primetime, just not in any Internet Explorer version. Disappointing for sure, but if you find a way to gracefully degrade IE visits (see Modernizr), you can start using many of CSS3’s features with wide-spread success.

On to an example

So lately, I’ve noticed that my blog’s home and archive pages were looking rather bland, so I wanted put some of these new rules to the test. My goal was to leave the HTML untouched and have CSS do all the reformatting.

HTML

The HTML is basically a repeat of the what you see below and that’s pretty much what it previously looked like in the browser. A boring, vertical list. What I want instead, is the same list, tiled horizontally and bit more aesthetically pleasing.

<div>
<span class="meta left">11.09.2010</span>

<h3><a href="slug">Article Title</a></h3>

<p class="summary">Summary of article./p>
</div>

CSS3 Rules

I had aspirations to use the nifty CSS3 transitions, but decided to use more widely-adopted rules like gradients and text-shadowing. So here are the new rules:

div { width: 160px; height: 200px; float: left; ...
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff'); /* IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ffffff)); /* webkit browsers */
	background: -moz-linear-gradient(top,  #ededed,  #ffffff); /* Firefox */ }
div h3 a { text-shadow: 2px 2px 2px #fff; }

The rules of note are the background, which courtesy of CSS3 creates a gradient from light gray to white and the text-shadow property that allows you to easily set the positioning, width and color of plain HTML text.

Connect with us

Thank You!

We really appreciate your interest in what we do.

We'll get back to you as soon as we can.