Create Beautiful CSS3 Typography

It has been suggested that beautiful and usable websites are created on a foundation of beautiful and usable typography. I’ve even read an article that suggests that the web is actually comprised of 95% typography. I’m not convinced that there is any empirical evidence for this figure, but I think that the point is a good one. And, that makes typography a pretty important element that you will want to look at very carefully.

Create Beautiful CSS3 Typography

Fortunately, CSS offers a variety of styling options that allow you a great deal of control over how your present your content to your viewers and users.

I’ve actually been meaning to prepare an article about typography for a while now, and I’ve finally gotten around to it in the form of this tutorial. Today we’re going to take a detailed look at how to create a beautiful and attractive typographic design using a variety of awesome CSS3 rules (many of which were also available in CSS2).

Starting with Mark-Up

Before we can get started with any kind of styling, we need to begin by creating some content, all nicely marked up as HTML. No need to waste a lot of time on this. Here is the basic markup that we will be using:

Web Typography
A Demo For Beautiful Typography on the Web

An Article by Matt Ward

It has been suggested that beautiful and usable websites are created on a foundation of beautiful and usable typography. That makes it a pretty important element that you will want to look at very carefully.

Fortunately, CSS offers a variety of styling options that allow you a great deal of control over how your present your content to your viewers and users. This demo - which is entirely driven by CSS - is built to demonstrate the step by step development of attractive typography, moving from basic HTML to fully styled content. You can use the buttons at the top of the page to view the content in various stages of styling, from completely unstyled to the completed design. Please feel free to have a bit of fun by working through the various stages.

Created: May 13, 2010

Basically, we have a heading (and sub-heading, as distinguished by a tag), followed by some meta information about the author, some paragraphs and a creation date. When we look at this content unstyled, it looks something like this:

Unstyled content

Aside from the coloured background, this is basically just the way that the browser renders the content without any styles. It doesn’t look horrible, but, with a bit of love, we can make it a whole lot better.

Step 1

The first thing that we want to handle is the title itself. We’re going to change the colour, the typeface, the size and the tracking. Here’s the full style rule.

h1{
font-size: 2.5em;
font-family: Georgia;
letter-spacing: 0.1em;
color: rgb(142,11,0);
text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
}

After applying these styles, we now have a nice bold heading, as shown in this screenshot:

Content after Step 1

Now, let’s take a look at some of what we did in the CSS. First, we increased the font size up to a full 2.5em, and mixed a nice dark red colour using the rgb() colour definition.

Next, we changed the typeface of the entire title to Georgia, which is a web-safe serif font that looks really nice. Of course, with wide support for @font-face these days, we don’t really need to restrict ourselves to web-safe fonts anymore, but Georiga still works really nicely, so I’ll just stick with it.

Personally, however, I find that the default tracking on the Georgia font is a little tight, so I open it up just a little, using the letter-spacing property. Because I am using the proportional em unit, we want to keep the number relatively low. Otherwise, the tracking will become overdone.

Lastly, we applied a subtle letterpress effect by using a thin, white drop shadow, which actually ends up looking more like a highlight.

Step 2

The title looks good now. However, we also want to break out the main title and the subtitle. This is why we marked up the subtitle into a tag, which will allow us to apply these different styles:

h1 span{
display: block;
margin-top: 0.5em;
font-family: Verdana;
font-size: 0.6em;
font-weight: normal;
letter-spacing: 0em;
text-shadow: none;
}

We create a logical break between the heading and the sub heading by converting the inline into a block level element, and established visual differentiation by lowering the text size, reducing the weight (removing the bold) and changing the typeface from Georgia to the sans serif Verdana. Notice, however, that we do nothing with the colour. Because of CSS inheritance, the original colour rules for the heading are maintained by the sub heading.

Content after Step 1

This works nicely to maintain a level of continuity within the title. Even though we want some differentiation between the title and the subtitle, we don’t want to separate them too much.

We also want to remove the letterpress effect by eliminating the drop shadow, and reset the tracking by reducing the letter spacing back down to 0.

Step 3

The next two steps involve working on the meta data line. For this one, I want to create a very strong differentiation from the title, without changing the typography completely. So, here is the CSS that we’re going to use:

.meta{
font-family: Georgia;
color: rgba(69,54,37,0.6);
font-size: 0.85em;
font-style: italic;
letter-spacing: 0.25em;
border-bottom: 1px solid rgba(69,54,37,0.2);
padding-bottom: 0.5em;
}

Keeping with the Georgia font helps to maintain some nice typographical unity within the design. Changing to either another serif or sans serif font would likely just cause typographical confusion, and changing all of the other properties helps to create enough of a difference between the meta information line and the title.

Content after Step 3

You may also notice that I use the rgba() colour definition rather that just the regular rgb(). This is definitely one of my absolute favourite parts of CSS3, since it adds a fourth dimension to the definition: an alpha channel that allows us to control opacity. When using rgba(), the fourth property (a number between 0 and 1) actually defines the level of transparency to be applied to that particular colour! It may not seem like much, but it’s an incredibly powerful tool. It’s not fully supported in IE yet, but it’s pretty easy to build in some graceful degradation.

Step 4

Next, we want to make one more quick change to the meta line. You may notice that I surrounded both the term “articles” and my name in tags in the markup. This is because I want to add in a very slight typographical variation on these bits of text. I can accomplish it with just a few lines of code:

.meta span{
text-transform: capitalize;
font-style: normal;
color: rgba(69,54,37,0.8);
}

The text-transform property is an awesome way of dealing with case in your designs. In this instance, I made everything uppercase, but sometimes it’s also useful to reduce everything to lowercase too.

Content after Step 4

I also removed the italic styling and reduced the overall transparency (making the text more opaque), in order to establish further contrast between these snippets of text and the rest of the line.

Step 5

Historically, creating columns in CSS has been something of an arduous process, involving a division of the content into different block level containers, along with floats or other positioning magic. It was certainly better than using tables, but still not necessarily ideal. Fortunately, with the new typographic elements introduced in CSS3, creating columns has become simpler than ever.

We’re going to use some of this new typographical goodness in our next step, by creating two columned paragraphs.

.body p{
font-family: Verdana;
-moz-column-count: 2;
-moz-column-gap: 1em;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
column-count: 2;
column-gap: 1em;
line-height: 1.5em;
color: rgb(69,54,37);
}

The rule is a little long and just a tiny bit redundant, since we need to use Mozilla and Webkit specific properties to make sure that the styling is actually applied across as many browsers as possible. Eventually, I’m sure that they will both accept the standard property, but for now it’s best to keep all the declarations, just to make sure that it renders like this:

Content after Step 5

With these properties, you can set the number of columns that you want to use, and the space gap between the columns, which is great because it can allow you to keep a design tightly aligned to an underlying grid.

Also, while in this case I simply applied the column properties to the paragraph, you can also apply them to a higher, container-level element such as a

and have all the child paragraphs flow nicely into the proper structure.

The other thing we want to note about this styling rule is that we changed the main paragraph text to Verdana, matching it typographically to the sub title. Again, the rest of the properties are different enough to maintain a strong visual difference, but the use of the same font helps keep everything tied together.

Step 6

We are going to maintain this continuity in the sixth step too. We actually have two paragraphs in our markup, and based on the way we applied the columns, the order of the copy is actually somewhat disjointed. I did this on purpose, though, as I want to add a some different styling to the first paragraph.

.body p:first-child{
font-size: 1.25em;
font-family: Georgia;
font-style: italic;
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
letter-spacing: 0.1em;
}
.body p:first-child:first-line{
font-weight: bold;
}

There are a couple of things that you should notice about this code. First, we are using the first-child pseudo-class to target any paragraph that is the first child of an element with the class of “body”. This is a handy little selector that allows you to build in some nice visual variation to the beginning of a block of text.

Content after Step 6

In this case, I want to add extra emphasis to this first paragraph, thereby giving more weight and significance to its content. I also want to stretch it across the two columns and change the font back to Georgia, again for emphasis.

Getting rid of the columns is actually pretty easy. All I have to do is replicate the column-count properties, and reduce it back down to 1.

Next, I can change the font family, and again I increase the letter spacing just a tad to help everything breath a bit better in Georgia. Then, for just an little bit of extra emphasis, I set the whole font style to italic.

You’ll also notice that this is the only step in this tutorial that actually includes two CSS rules. The second one is just a short little snippet that combines both the first-child pseudo-class and the first-line pseudo-class, allowing me to actually bold the first line of the first paragraph!

Step 7

Our typographic styling is pretty much complete. The only thing left to do now is add some styles to the date.

date{
font-family: Georgia;
color: rgba(69,54,37,0.6);
font-size: 0.75em;
font-style: italic;
letter-spacing: 0.25em;
border-top: 1px solid rgba(69,54,37,0.2);
display: block;
padding-top: 0.5em;
margin-top: 2em;
}

The rule here is pretty similar to the rule for the line of meta information. The only real difference is that I reduced the font size a little bit, to help establish a better visual hierarchy. I also flipped the border-based rule from the bottom to the top.

Content after Step 7

Because the tag creates an inline element by default, I changed the display mode to block. Finally I extended the top margin to improve the overall balance.

Typographical Summary

So there you have it: we’ve created what I think is an attractive typographical design using nothing by HTML and CSS. No images are used at all. To wrap this article up, I would just like to make a few quick notes about the typography itself.

1. Despite only using two fonts in the entire design, I was able to create a wide range of styles, simply by altering the size, weight, colour and other properties of the type. This is a great way to generate typographical interest without having to rely on a lot of fonts. As I’ve already mentioned a couple times, it also helps to maintain unity within the design.
2. Tracking (letter spacing) and leading (line spacing) are two elements of typography that are often overlooked when working with type on the web. However, while it may not have all the precession control of InDesign or Quark, CSS does provide some basic tools that allow use to make adjustments in these areas, resulting in more beautiful type.
3. The art of typography is not just about picking fonts, colours and sizes. It’s not even just about leading, tracking and kerning. These are all just concepts used to describe and modify type. The real purpose of typography, however, is to help create and convey meaning through words. One of the ways to do this is through visual hierarchy – making typographical choices that reflect the relative importance of each and every element.
4. Lastly, every element matters. Good typography takes nothing for granted. Instead, it makes a careful consideration of each and every element, no matter how insignificant it may seem. Ultimately, an element may be allowed to inherit a default value, but that should always be a conscious choice rather than an oversight.

Of course, there is always more that could be said about typography. Still, while I am no master of the craft, these are some of the things that I’ve learned through the process of my own work. I hope you find them, and this tutorial to be of some use!

from echo enduring blog

Box-Shadow back on the Menu (and other updates)

A recent editors draft of the CSS3 Background and Borders module (published on 5th may) indicates that the box-shadow property could be set to make a reappearance before the specification is released as a Proposed Recommendation.

The specification also features several other updates including the addition of a ‘content-box’ value to the background-clip property, changes to the background shorthand syntax for background-clip and background-origin, and the removal of a recommendation to use gradients for color transitions when border-radius produces a curve, further details below.

Last week also saw the release of an updated working draft of the CSS3 Template Layout module, read on for further details.

Box-Shadow

The box-shadow property, which allows for the creation of drop shadows on box elements, was removed from the Backgrounds and Borders specification prior to it entering the Candidate Recommendation phase of development last December, as the working group felt that the property needed more work, however the property makes a reappearance in a recent editors draft of the specification (published on 5th May).

The overall syntax and functionality remains the same as in previous versions, however the specification now offers further clarification with regard to the blur radius and spread radius functionality as follows.

Blur Radius

Previous specification:

“The third length is a blur radius. Negative values are not allowed. If it is 0, the shadow is sharp, otherwise the larger the value, the more the shadow is blurred. The exact algorithm is not specified.”

Editors draft (5th May):

“The blur radius is perpendicular to and centered on the shadow’s edge and defines a gradient color transition from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it: if the blur radius is 0, the shadow’s edge is sharp, otherwise the larger the value, the more the shadow is blurred. The exact algorith for the blur transition is not specified.”

Spread Radius

Previous specification:

“Positive values cause the shadow to grow in all directions by the specified radius. Negative values cause the shadow to shrink. The shadow should not change shape when a spread radius is applied: sharp corners should remain sharp.”

Editors draft (5th May):

“Positive values cause the shadow shape to exapand in all directions by the specified radius. Negative values cause the shadow shape to contract. For corners with a zero border-radius, the corner remains sharp. Otherwise the spread radius outsets the edge of the shadow by the amount of the spread radius in the direction perpendicular to the shadow’s edge. (Note that for inner shadows, expanding the shadow means shrinking the shadow’s perimeter.) The UA may approximate the spread shape by outsetting (insetting, for inner shadows) the shadow’s straight edges by the spread radius and increasing (decreasing, for inner shadows) and flooring at zero the corner radii by the same amount. If both a blur radius and a spread radius are defined, the blur is applied to the resulting shape after the spread is applied.”

Interactions

The updated specification also offers further definition as to how the box-shadow property interacts with other backgrounds and borders properties, particularly in relation to the border-image property, with the updated specification stating clearly that the border-image property has no effect on the shape of box shadows.

The specification also further clarifies how the box-shadow property interacts with tables and pseudo-elements:

“The ‘box-shadow’ property applies to the ‘::first-letter’ pseudo-element, but not the ‘::first-line’ pseudo-element. Outer shadows have no effect on internal table elements in the collapsing border model. If a shadow is defined for single border edge in the collapsing border model that has multiple border thicknesses (e.g. an outer shadow on a table where one row has thicker borders than the others, or an inner shadow on a rowspanning table cell that adjoins cells with different border thicknesses), the exact position and rendering of its shadows are undefined.”

Box-Shadow Examples

The draft also includes a number of examples (see the diagram below) as to how the property should behave in certain circumstances:

Box-Shadow Examples, W3C

Additional Updates to CSS3 Backgrounds and Borders

In addition to the reinclusion of the box-shadow property, the specification introduces a ‘content-box’ value to the background-clip property allowing the background to be clipped to the content box (previously border box and padding box were the only clipping options), a change to the background shorthand syntax in relation to background-clip and background-origin, the removal of the recommendation to use gradients for color transitions when border-radius produces a curve, and various other clarifications.

You can view the editors draft here.

New Working Draft of CSS3 Template Layout Module Released

Last week also saw the release of an updated working draft specification of the CSS3 Template Layout module. The updated release contains a small number of minor updates, but according to the working group minutes was published more to “show it is still active.” The updated draft can be viewed here and I’ll provide further details when I’ve had a chance to take a closer look it.

frmo CSS3.info

Sexy Interactions with CSS Transitions

While Webkit-based browsers have had CSS Transitions since Safari 3.1.2, other browsers are only just now coming out with nightly builds supporting this exciting new part of the CSS3 specification.

With all browsers except for IE being slated to have Transitions support in the coming months, more and more web designers are turning to this powerful technique as a means to enhance their website’s user experience.

There is only one problem: many of us have never created animations in JavaScript, Flash or some other environment before, and are therefore not as well-versed in the unwritten rules of the animation world.

Before We Go On

A key distinction must be made clear: CSS Transitions govern the specific purpose of transitioning a state change, say from A to B. They can apply to one or more elements at a time, but it’s important to remember that they don’t animate anything unless there is a change.

CSS Animations, on the other hand, are for the purpose of creating dynamic, keyframe-based animations that can run on their own, regardless of any user input or state changes.

This article focuses solely on CSS Transitions, though the lessons learned often apply to CSS Animations as well.

You Might Need to Switch Browser

To see the examples in this article in action, you’ll have to use a browser that supports CSS Transitions: Safari as of 3.1.2, Chrome, Firefox 3.7 alpha or Opera 10.5x.

When and Where Should I use Transitions?

Just because a tool is available to you, doesn’t mean you have to use it. This is as true for transitions and animations as it is for anything else, if not more so. Three simple questions you can ask yourself will help you decide:

• Does this transition add any value?
• Does this transition enhance the user experience?
• Does this transition avoid distracting the user from the task they are trying to accomplish?

If your answer is “No” to any of these questions, you should re-evaluate your transition; you might be better off without it.

How a transition adds value is often difficult to determine; a lot of animation on the Web is superfluous, serving no real purpose. But animations can serve a purpose, like guiding the user’s eyes to something that changed on the page.

Another purpose of a transition can be to make something more fun and engaging, encouraging its use. This may sound superfluous to some, but there is real value in making a website or interface more fun.

Making transitions that enhance the user experience can be tricky, too. Oftentimes, this comes down to the specifics of the transition: how long it takes, what aspects (read: CSS properties) it transitions, and whether they make the guided interaction clearer or more confusing.

Lastly, if the transition or animation distracts the user, it can actually harm the interface overall. For instance, if something animates when the user is trying to read something, their reading experience will greatly suffer. Let’s look at some examples to illustrate all this.

Examples

The first example shows a background color transition taking place when the user hovers over the blockquote element.

(Note: the CSS rules listed in each example only display the most relevant properties, and for the sake of brevity the vendor-prefixed versions are omitted after Example 1. Look at the examples.css source file for the full CSS of each example)

Example 1: A Background Color Transition

#example-1 .example-area blockquote {
  background: #eee;
  ⋮

  transition: all .3s linear;
  -o-transition: all .3s linear;
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
}
#example-1 .example-area blockquote:hover {
  background: #aaa;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Now, you may wonder why anyone would do this when it clearly serves no purpose other than displaying the author’s ability to use CSS Transitions—worse, it triggers on an element that has no inherent interactivity associated to it!

And yet, examples like these can be found all over the web, be it a meaningless background color change, a drop shadow or something else. Furthermore, if there is no interactivity to a specific element, there almost certainly shouldn’t be any transition applied to it unless triggered by an interactive element.

Because the human eye is trained (via millions of years of evolution) to spot movement faster than it observes details in a static view, any kind of movement that occurs in or even around a body of text will immediately distract the reader from the reading process.

It is therefore crucial that you think deeply about any transitions or even animations you apply to your web page, and ensure that they both serve a purpose and don’t distract your visitors from what they’re doing.

Duration

The next examples look at a very important aspect of transitions: duration. As the human eye sees movement at different speeds depending on light, color and information, it’s impossible to give any specific guidance on what makes for a snappy, comfortable animation.

However, it is possible to get a better feel for it by looking at some examples and determining which ones “feel” more intuitive and fluid to you, especially after repeated use.

We’ll start with four simple boxes that animate once you hover over them (or select them via keyboard focus):

Example 2: Animation Speeds

#example-2 .item {
  background: #ccc;
  height: 30px;
  ⋮
}
.example-area .item {
  transition: all 1s linear;
  ⋮
}
.example-area .item-2 {
  transition-duration: .75s;
  ⋮
}
.example-area .item-3 {
  transition-duration: .5s;
  ⋮
}
.example-area .item-4 {
  transition-duration: .25s;
  ⋮
}
#example-2 .item:hover,
#example-2 .item:focus {
  height: 200px;
}

1.0s
0.75s
0.5s
0.25s

If you start hovering from left to right and then back again, one by one, you’ll probably get pretty impatient by the time you reach the 1-second box on the left again. This seems contradictory to our minds; after all, it’s only a second, right? Except that a second is a pretty long time when it comes to smooth transitions or snappy animations.

Example 2 used relatively big objects to illustrate the speed of transitions; let’s see what these exact same transition durations feel like when used in a less obvious manner, such as hyperlinks in a body of text:

Example 3: Animation Speeds of Links

#example-3 .item,
#example-3 .item {
  background: #fffef7;
  ⋮
}
#example-3 .item:hover,
#example-3 .item:focus {
  background: rgb(235, 111, 0);
  color: #fff;
}

This is an example paragraph with four links in it. Each link has a background color transition applied to it on hover or focus, but the duration for each link is different. The first link will take a full second to animate to completion, which takes a seemingly long time as you can see. The second link takes 750 milliseconds, or .75 seconds. This third link takes half a second, and lastly, the fourth link takes only .25 seconds, or 250 milliseconds, to animate completely.

Suddenly, these very same transition speeds feel a lot slower—despite being the exact same. The reason for that is that the difference between the two states is smaller in example 3 for each element, than it is per element in example 2.

There is thus a correlation between the perceived difference between state A and B, and the time taken by the transition.

When adding transitions to your interactive elements, it’s a good idea to try them out repeatedly for a while to determine whether they start to feel “slow”. Even a half-second transition can quickly become a tedious wait time for a user, especially since they’re probably pretty used to instantaneous state changes—which, it should be noted, are not necessarily better, because they don’t guide the user to see what just changed.

If you’re doing color transitions in some way or another, you may observe strange hues from appearing in the middle of your transition. That happens when you have no start or end color specified. Example 4 has four boxes to display this:

Example 4: Color Transitions

#example-4 .item {
  height: 75px;
  width: 75px;
  transition: background-color .5s linear;
  ⋮
}
#example-4 .item-1 { background: transparent; }
#example-4 .item-2 { background: #fffef7; }
#example-4 .item-3 { background: #fffef7; }
#example-4 .item-4 { background: rgba(255, 254, 247, 0); }

#example-4 .item:hover,
#example-4 .item:focus {
  background-color: rgb(235, 111, 0);
  background-color: rgba(235, 111, 0, 1);
}

transparent to orange
white to orange

white to orange on texture
rgba() on texture

The first box has no predetermined background color, and therefore has a weird gray showing up in the transition. The second box does and so its background color fades more naturally.

However, as you can see in the third box’s case, having a solid background color may not work as you want it to with textured backgrounds, which is why the fourth box uses an rgba value—that is, a color with an alpha channel specified—to make it appear natural and support textured backgrounds.

Conclusion

By now you should have a better understanding of when and where to use CSS Transitions, and what it takes to optimize them so that they serve to enhance the overall user experience.

There are countless of possible combinations for transitions on the web, and each unique one will require a different process to fine-tune it. That said, there is a lot of potential to this new addition to CSS, so go out there and wield it to make something beautiful.

from Think Vitamin

CSS3 Gradient Buttons

Last week I talked about Cross-Browser CSS Gradient. Today I’m going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc.

What Is So Cool About These Buttons?

• Pure CSS: no image or Javascript is used.
• The gradient is cross-browser supported (IE, Firefox 3.6, Chrome, and Safari).
• Flexible and scalable: button size and rounded corners can be adjusted by changing the font size and padding values.
• It has three button states: normal, hover, and active.
• It can be applied to any HTML element: a, input, button, span, div, p, h3, etc.
• Fallback: if CSS3 is not supported, it will display a regular button (no gradient and shadow).

Preview

The image below shows how the button will display in different browsers.

Button States

• normal state = gradient with border and shadow styles.
• hover = darker gradient
• active = gradient is reversed, 1px down, and darker font color as well.

General Styles For The Button

The following code is the general styles for the .button class. I use em value in the padding and border-radius property to make it scalable base on the font-size. To adjust the rounded corners and button size, simply change the border-radius, font-size and padding values. For example: I can make a smaller button by decreasing the font-size and padding values (see demo).

For more details on border-radius, text-shadow, and box-shadow, read my article The Basics of CSS3.

.button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}

Color Gradient Styles

The code below is the CSS styling for the orange button. The first background line is a fallback for the non-CSS3 browsers, the second line is for Webkit browsers, the third line is for Firefox, and the last line is a gradient filter that is only read by Internet Explorer.

For more details on CSS gradient, read my article Cross-Browser CSS Gradient.

.orange {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top,
          left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a',
       endColorstr='#f47a20');
}
.orange:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top,
          left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top,  #f88e11,  #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11',
       endColorstr='#f06015');
}
.orange:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top,
          left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20',
       endColorstr='#faa51a');
}

How To Use My Buttons?

Lets say you like the blue button and want to use it on your page:

• First, copy the .button and .blue CSS (view demo source code).
• Then, add class="button blue" to the HTML element where you want the button to be (eg. Button). The CSS classes can be applied to any element such as link, p, span, div, input, button, etc.

from Web Designer Wall

Using CSS Text-Shadow to Create Embossed Text

The text-shadow property creates a shadow underneath text, which is obvious from the name! It’s similar in syntax and functionality to box-shadow, but it follows the shapes of individual letters, rather than rendering around an element’s bounding box.

Here’s an example of the general syntax that defines an x-offset, y-offset, blur-radius, and color:

1	text-shadow:3px 3px 1px #999;
	view plain | print

text-shadow:3px 3px 1px #999;

… And its corresponding image:

Now I don’t know about you, but there’s no situation where I’d ever want my text to look like that! I’ve never worked on a design where this type of effect was called for, and I don’t think it looks very nice. It’s cheesy — like what you’d find in a spam email, or on a Geocities site.

A Touch of Class

However text-shadow is very useful for a certain task, and this seems to be almost exclusively what it’s used for in the wild — creating embossed text like this:

It has this shadow property:

1	text-shadow:0 -1px 1px rgba(0,0,0,0.5);
	view plain | print

text-shadow:0 -1px 1px rgba(0,0,0,0.5);

Done carefully and not too brazenly, the effect can be attractive; it gives functional text like buttons and captions an extra touch of class.

You can see a few examples of it on this page:

• orange buttons, such as the “Search” button in the search form at the top, or the “Subscribe” button for newsletter signups in the right-hand column
• the navy-headed boxes, like the newsletter signups box we just mentioned saying “Get Expert Tips In Your Inbox”, or the categories tabs near the top

So how does it work?

Light and Shade

Shadow and depth effects are created by simulating light and shade, so it follows that we have two basic ways of applying text-shadow to create an embossed effect:

• a positive white shadow that creates the impression of light at the bottom of the letters, essentially:

  1	text-shadow:1px 1px 0 white;
  	view plain | print

  text-shadow:1px 1px 0 white;

• a negative black shadow that creates the impression of shade at the top of the letters:

  1	text-shadow:-1px -1px 0 black;
  	view plain | print

  text-shadow:-1px -1px 0 black;

But the issue that arises is that it can be quite difficult to find the right balance of shades, in terms of how much of which to apply in order to achieve a realistic result. Too subtle and it’s almost invisible to the naked eye; too obvious and it starts to look like a drop-shadow. And unfortunately one of the hardest effects to get right is dark text on a light background, especially since the text-shadow is rendered outside the font, rather than on top of it.

Tips and Tricks

So what can we do to make the effect more realistic — so that it looks more like embossing or engraving — and less like a big, ugly drop-shadow? Here are my tips:

First and foremost, use RGBA color values, so that the effect has partial opacity. This makes it blend better with the background, and gives you more control over the intensity of the effect. (Although RGBA colors lack support in IE, it’s academic since it doesn’t support this property anyway.)

Don’t offset the shadow in both x and y directions as it’s visually too much. It looks better if you only offset in the y direction, as though the light were directly above.

Then use different shadows according to the color combinations you’re working with:

• For light text on a colored (but not very dark) background, use a dark negative shadow with opacity from 0.25 upwards (the higher the value, the more pronounced the effect). Here I’ve also softened the effect slightly with a 1px blur-radius:

  1	#light-on-color
  2	{
  3	background:#f60;
  4	color:#fff;
  5	text-shadow:0 -1px 1px rgba(0,0,0,0.5);
  6	}
  	view plain | print

  #light-on-color {     background:#f60;     color:#fff;     text-shadow:0 -1px 1px rgba(0,0,0,0.5); }

• For colored text on a light (but not white) background, use a light positive shadow with fairly high opacity:

  1	#color-on-light
  2	{
  3	background:#eea;
  4	color:#229;
  5	text-shadow:0 1px 0 rgba(255,255,255,0.75);
  6	}
  	view plain | print

  #color-on-light {     background:#eea;     color:#229;     text-shadow:0 1px 0 rgba(255,255,255,0.75); }

• Other combinations are more tricky: a dark shadow will be ineffective against a very dark background or with very dark text, and the same for a light shadow with a light background or text. But after a whole bunch of experiments, I reckon the best effect is achieved with a subtle combination of both light and dark shadows. Add a low opacity on the dark shadow, high opacity on the light shadow, and a slight bias toward the background shade (so for dark text on a light background, use a bit more light shadow and a bit less dark; and vice versa). Similar to this:

  1	#dark-on-light
  2	{
  3	background:#eee;
  4	color:#223;
  5	text-shadow:0 -1px 0 rgba(0,0,0,0.15),
  6	0 1px 0 rgba(255,255,255,0.8)
  7	}
  8	#light-on-dark
  9	{
  10	background:#223;
  11	color:#eee;
  12	text-shadow:0 -1px 0 rgba(0,0,0,0.3),
  13	0 1px 0 rgba(255,255,255,0.4)
  14	}
  	view plain | print

  #dark-on-light {     background:#eee;     color:#223;     text-shadow:0 -1px 0 rgba(0,0,0,0.15),                 0 1px 0 rgba(255,255,255,0.8) } #light-on-dark {     background:#223;     color:#eee;     text-shadow:0 -1px 0 rgba(0,0,0,0.3),                 0 1px 0 rgba(255,255,255,0.4) }

  The further away from either extreme you can go (that is, towards a darker shade of a light color, or a lighter shade of a dark color), the better the final effect should be.

Those last examples are far from perfect, and the effect is only marginally pronounced (which is how we stop it from looking too much like a drop-shadow). But I think they make the best of awkward color combinations, and so all factors considered, they look okay.

from SitePoint