background: linear-gradient([color1], [color2]);

Now color1 will fade to color2 from the top of the element to bottom. With the different prefixes this is fairly easy to use (top to bottom gradient going from white to black).

background: #000; /* solid color for older browsers */
background: -moz-linear-gradient(#FFF, #000);
background: -o-linear-gradient(#FFF, #000);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#000)); /* older webkit */
background: -webkit-linear-gradient(#FFF, #000);

You can spice it up by using RGBA colors which adds the option of transparency, but as a webdesigner I want to be working with re-usable code. This saves me and my clients time and makes things easier to adjust. So in principle I’d want to extract the gradient from the color.

Since the background declaration will overrule the background-color declaration this might seem impossible, but not if you combine the base color of your gradient and the possibilities of the transparency from RGBA.

background: #55B361; /* solid color for older browsers */
background: #55B361 -moz-linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.1));
background: #55B361 -o-linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.1));
background: #55B361 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.1)), to(rgba(0,0,0,0.1))); /* older webkit */
background: #55B361 -webkit-linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.1));

As you see the color is now added to the background declaration before the gradient is defined. The gradient colors are defined in RGBA which gives you control over the transparency of the gradient colors and to what extend they will mix with the background-color. In the above example I am using a gradient going from white (10% visible) to black (10% visible). Re-using the gradients is now very simple; I just have to replace the background-color and I am done.

Although this is a possibility for many situations, it also has its downside. I works best when using a gradient with the same colors, for instance from black to black or white to white, where you only change the alpha. I had the best results with setting the alpha of the first gradient color to 0 and only adjusting the alpha of the second color.

What do think of this solution? Will you be using it?

In a recent article Ethan Marcotte¹ points out that “Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.”

Resources on Responsive Web Design are emerging on the web. Seeing several demos online I understand why this will become the future trend in webdesign, which doesn’t only requires sites to be rebuild, but also requires a shift in the concept of sites and the way we used to build them. The content on sites will have to be fluid.

Since you might want to see what I am talking about I am share the following links with you. What do you think? Will you rethink your sites to make them responsive too?

http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/
http://demos.simplethemes.com/skeleton/
http://www.smashingmagazine.com/2011/08/24/freebie-responsive-jquery-slider-plugin-flexslider/
http://fitvidsjs.com/
http://letteringjs.com/
http://fittextjs.com/

And a little treat: http://www.smashingmagazine.com/2011/09/08/to-five-smashing-years-and-a-free-anniversary-ebook-treat/

link

Launch Effect is a one-page theme that lets you create a viral campaign. Here’s how it works:

• Visitors to your website sign up on your Launch Effect site using their email.
• Upon signing up, the page generates a special URL for them to share with their friends.
• Use the URL to track your most active referrers and reward them for spreading the word.

While I am working on your new job board you are launching your own viral campaign and collecting vital information on potential customers who are spreading the word for you!

Order your Launch Effect now!

During installation your register with Prey (or use your own server) and you are set. Once you lose your device, or it gets stolen your log in to your Prey web-account, set the device status as lost  and watch the screenshots, IP’s and pictures of the thief roll in to your mailbox.

One tip: turn auto-login on!