Cross-browser CSS gradient buttons

Recently I talked about CSS cross-browser gradients and last week I wrote again about CSS3 gradients. So what I’m going to do today? I will show you how to put the CSS gradient feature in practical use.In this article you will see how you can create a set of gradient buttons just with CSS no images…

VN:F [1.9.22_1171]
Rating: +2 (from 2 votes)

The practicalities of CSS Media Queries, lessons learned

CSS Media Queries are part of CSS3 and in brief: they allow you to tailor your websites appearance for different screen sizes. Most people I speak to know about media queries but have been a little shy in trying them out. You can read about media queries elsewhere – here, I’d like to speak about a first-hand experience of using them…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Create a vertically centred horizontal navigation

Centring block level elements is easy, just define a width and set margin:0 auto;, but what if you don’t know that fixed width? You could use text-align:center;, but that won’t work on 100%-width block-level elements either… that’ll only work on text-level elements.

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

CSS properties that affect type rendering

When it comes to type rendering on the web, there’s not much web designers can do. The way fonts appear on screen is mostly due to operating systems, browsers, typeface designs, font files, and how those font files are (or are not) augmented with instructions for the most unforgiving rendering scenarios. But in some cases, CSS properties can affect how type looks…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Make CSS3 buttons like a boss

High-quality interface elements are a great way to add that extra bit of refinement to a website. I’ve been maintaining a repo of CSS3 buttons for the past few months and I’m starting to see them slowly make their way out into the real world. This tutorial is going to give you a deeper understanding of the design thinking that goes into making these buttons and show you how to make them from scratch…

VN:F [1.9.22_1171]
Rating: +2 (from 4 votes)

Checkerboard, striped & other background patterns with CSS3 gradients

You’re probably familiar with CSS3 gradients by now, including the closer to the standard Mozilla syntax and the ugly verbose Webkit one. I assume you know how to add multiple color stops, make your gradients angled or create radial gradients. What you might not be aware of, is that CSS3 gradients can be used to create many kinds of commonly needed patterns, including checkered patterns, stripes and more…

VN:F [1.9.22_1171]
Rating: +1 (from 5 votes)