All posts tagged type

Using CSS3 font-face To Add Custom Fonts To Your Website

One of the biggest features in CSS3 is the ability to use custom fonts in your web designs. In this tutorial, I’ll show you how to do just that using the free font Aller Display. Once you have downloaded the file, upload it to your server and note the location.

Live Demo

Here’s What The CSS Looks Like

The first step is to setup the @font-face selector with the font you want to use. For this example, I’m using the free font Aller Display. The font-family property declares the name/value for your custom font. The src property is the link to the font file on your server, which you have already uploaded.

@font-face {
 font-family: aller-display;
 src: url('aller-display.ttf');
}

Continue Reading

Adding An Outline To Your Text Using the CSS3 text-stroke Property

In this tutorial I’ll show you how to add an outline, or stroke, to your text using the CSS3 text-stroke property.

Live Demo

Here’s What The CSS Looks Like

The first step is to declare a text color, I’ve picked red here. Next, we use the text-stroke property to assign a color (black) and weight (1px). For this example, I’ve created a class called .stroke.

.stroke {
 color: #c00; /* text color */
 -webkit-text-stroke: 1px #000; /* stroke color and weight */
}

Continue Reading

Adding text-shadow To Your Type Using CSS3

Adding a shadow to your text with CSS3 is actually quite easy. In this tutorial, I’ll show you how to use the text-shadow property to do just that.

Live Demo

Adding shadow to your type

A shadow is added to your type using the text-shadow property. In the example below, you’ll notice 3 pixel values. The first controls horizontal offset, the second controls vertical offset, and the third controls blur. The fourth value is the shadow color, which is set using a hex number.

h1 {
 text-shadow: 2px 2px 2px #000;
}

Continue Reading