Author:

Michael Martin writes about Web design, WordPress and coding at Pro Blog Design. You can subscribe there for advice on making the most of your blog's design, or follow him on Twitter.

Twitter: Follow Michael Martin on Twitter

Backgrounds In CSS: Everything You Need To Know

Backgrounds are a core part of CSS. They are one of the fundamentals that you simply need to know. In this article, we will cover the basics of using CSS backgrounds, including properties such as background-attachment. We'll show some common tricks that can be done with the background as well as what's in store for backgrounds in CSS 3 (including four new background properties!).

Screenshot

We have five main background properties to use in CSS 2. They are as follows: background-color, background-image, background-position, background-repeat and background-attachment. These properties can all be merged into one short-hand property: background. One important thing to note is that the background accounts for the contents of the element, including the padding and border. It does not include an element's margin. This works as it should in Firefox, Safari and Opera, and now in IE8. But in IE7 and IE6 the background does not include the border, as illustrated below.

Read more...

Typographic Design Patterns and Best Practices

Even with a relatively limited set of options in CSS, typography can vary tremendously using pure CSS syntax. Serif or sans-serif? Large or small font? Line height, spacing, font size and padding... The list goes on and on.

To find typographic design patterns that are common in modern Web design and to resolve some common typographic issues, we conducted extensive research on 50 popular websites on which typography matters more than usual (or at least should matter more than usual). We've chosen popular newspapers, magazines and blogs as well as various typography-related websites.

Paragraph spacing size graph.

We've carefully analyzed their typography and style sheets and searched for similarities and differences. We have also put together a spreadsheet of the study that displays the websites' various values (for example, the ratio between the line height and line length).

Read more...

Why Web Developers Don’t Need A Mac

As Web developers, we never stop hearing about the Mac. A lot of people love to talk about their Macs, but despite the "elite" status of the Apple computer, is there any need for a Web developer to splash money on one? A few weeks ago, Mark Nutter wrote here on Smashing Magazine in favor of swapping your PC for a Mac, and while some of his reasons are good, there are plenty of reasons to stick with (or switch back to!) Windows.

Screenshot

This article explores the best aspects of the Windows PC and, more importantly, the different apps that Web developers can use to become more efficient in their work. Every piece of software mentioned here is free to use.

Read more...

↑ Back to top