Kashif Mushtaq » design

CSS: Gradient Text Effect

admin — Tue, 01 Jul 2008 03:16:27 +0000

Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6. Continue to read this article to find out how.

Benefits

This is pure CSS trick, no Javascript or Flash. It works on most browsers including IE6 (PNG hack required).
It is perfect for designing headings. You don’t have to render each heading with Photoshop. This will save you time and bandwidth.
You can use on any web fonts and the font size remains scalable.

How does this work?

The trick is very simple. Basically we are just adding a 1px gradient PNG (with alpha transparency) over the text.

The HTML markups

<h1><span>span>CSS Gradient Texth1>

The CSS

The key point here is: h1 { position: relative } and h1 span { position: absolute }

h1 {
  font: bold 330%/100% "Lucida Grande";
  position: relative;
  color: #464646;
}
h1 span {
  background: url(gradient.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}

That’s it! You are done. Click here to view my demo page.

Make it work on IE6

Since IE6 doesn’t render PNG-24 properly, the following hack is required in order to display the transparent PNG (add anywhere in between the tag):

This is why we hate IE 6!

jQuery prepend version (for semantic lovers)

If you don’t want to have the empty tag in the heading, you can use Javascript to prepend the tag. Here is a sample using jQuery prepend method:

<script type="text/javascript" src="jquery.js">script>

<script type="text/javascript">
$(document).ready(function(){

  //prepend span tag to H1
  $("h1").prepend("<span>span>");

});
script>

More samples

Want to make ~~Web 2.0~~ glossy text?

Literally, you can apply this trick on any solid background color (as long your gradient color is the same as your background color).

Pattern / Texture

You can also apply this trick with a tile background image. Look, here is an example of zebra pattern. So, be creative!

Limitations and more…

This trick is only suitable for solid background color elements. Your gradient color (PNG image) must be the same color as your background color.
IE PNG hack is required if you want it to work on IE 6.
If your gradient image is taller than the heading, the text will not be selectable.

Typographic Contrast and Flow

admin — Tue, 01 Jul 2008 03:13:36 +0000

As you have probably know, most online readers don’t read line by line, instead they scan (from one point to another). For this reason, designers create typographic contrast and flow by emphasizing certain text. Contrast is important because not all the content within a page have the same value, some have greater significance than the others. By creating contrast, you can direct the reader’s attention to the important messages and at the same time enhance the visual appearance. Here are seven basic methods on how you can create typographic contrast.

1. Size

Larger font size indicate higher priority because it draws reader’s attention, therefore this method is commonly applied on headings.

On the other hand, you can de-emphasize by using smaller font size.

2. Typeface / Classification

Contrast can be achieved by mixing different typeface classifications. However, due to limited web safe fonts, there are only two main classifications commonly used: serif and sans-serif.

Generally, to create a contrast between the headings and the body text, we use serif font for the headings and sans-serif font for the body, or vice versa.

If you want to go beyond the web safe fonts, there are two more options:

CSS image replacement, that is to use CSS to hide the text and replace with a background image.
[css + bg image = static graphic img]
sIFR (Flash replacement), that is to use Javascript and Flash technology to replace the text with the embedded font.
[Javascript+Flash = any font dynamically]

Note: CSS image replacement or sIFR is not practical for long paragraph, so they are normally used for headings.

3. Color

Color contrast is a common way to distinguish between navigation, headings, link, and body text.

You can use faded color to indicate something that is disabled or not available.

Sometime you don’t need to make something bigger to get more attention, you can create emphasis by using brighter color, such as red.

You can also use color to distinguish individual word within a group of text.

When small font size combined with lighter tone color, the importance of the text is further de-emphasized.

4. Cases

When the same typeface is used for the headings and body text, contrast can be established by changing the case. Uppercase tends to get more attention than lowercase, therefore it is more suitable for headings. The CSS property to transform text to uppercase is text-transform: uppercase.

Tips: avoid using uppercase in the body text or in long sentence because it will reduce readability.

5. Style and Decoration

One of the common mistakes made by most editors (particularly the Microsoft Word users), is the tendency to use the underline decoration to emphasize certain text. This is a big mistake in web typography. Readers will misinterpret the underlined text as a link because the browser underlines the link by default. So, do not underline any text that is not a link when posting on the web.

Instead, you can use italic font style.

6. Weight

Making certain text heavier weight (bold) can also create emphasis.

Another common mistake is that people tend to bold the entire line of text. By doing so, the emphasis/contrast of the text is lost.

7. Space

Space plays the most important part in maintaining flow of your design. Good use of space will tell the reader where to start, when to pause, where it ends, and what to do next.

There are various ways to create space:

Block break (padding or margin) is the space in between the block elements.
Paragraph break (padding or margin) is the space created after the
element.
Tracking (letter-spacing) is the space in between the characters.
Leading (line-height) is the space in between the lines.
Indentation (padding or margin) is commonly used for blockquote and list elements.

Conclusion

Let’s put all these methods together in practice.

External Links:

How to Design Mini Icons

admin — Mon, 30 Jun 2008 03:51:59 +0000

Numbers of people have asked me how to design my popular Mini Pixel Icon pack. In fact, they are relatively easy. All you need is just some basic Photoshop skills. Here I will show you how to use the Pencil tool to design pixel icons, and then re-use them to create a full collection. This is the technique that used to create over 320 icons within a day.

Download Photoshop file

1. Create a new document

In Photoshop, create a new document 14 x 14px size with transparent background.

2. Draw shape outline

Use the Pencil tool, select 1px brush from the palette. Pick a dark gray color and start drawing the outline of the page icon. To draw a straight line, first click at the starting point, then hold down shift key and click at the ending point.

Tips: At any time if you want to erase the pixels, use the Eraser tool, select Pencil mode and 1px brush size.

3. Base gradient

Make a selection of the empty cutout by the Magic Wand tool. Create a new layer. Set your foreground color to light gray and background to white. Use Gradient tool, drag from top corner to lower corner diagonally.

4. Highlight and shadow

Create a new layer. Draw a 1px white inner top border to create the highlight effect. Then, draw a medium gray inner bottom border.

5. Group all layers

In the Layers palette, select all layers and press Cmd+G to group all layers in a folder.

6. Draw a pencil

Again, start drawing the outline first and then fill the inner area with either solid color or gradient. When you are done, group these layers in a separate folder.

Tips: If you want to have consistent color throughout the icon set, store the colors that you have used in the color swatches.

7. Re-use them

Here shows how I re-used the layer groups to create entire collection:

8. Export for web

After you’ve done entire set, toggle (invisible / visible) the layer groups and save them for web (Cmd+Alt+Shift+S).

Too lazy to do this tutorial? You can download free mini icon set.