Posts for tag: Fonts 4

CSS3 Isometric Text Demo

CSS3 Isometric Text Demo

Just recently I have been playing around with the multiple text-shadow capabilities of CSS3. Now, building on top of that I have produced a method for creating 3D isometric text, by using multiple text-shadows and 2D transforms.

In this demo the 3D text is created from multiple offset shadows that increase in darkness with no blur applied. The text is then made isometric by applying a 2D transform to skew the text in the Y axis to an angle of -26.6°. (OK, true isometric art is set at -30°, however pixel-based isometric art is set at -26.6° as this produces the smoothest lines).


-webkit-transform: skewY(-26.6deg);
-moz-transform: skewY(-26.6deg);
-o-transform: skewY(-26.6deg);

The shadow under the text is produced by a second line of text that is skewed twice — once in the Y axis to -26.6°, and then again in the X axis to 63°. To get it looking blurred, the colour of this text is set to transparent: rgba(0,0,0,0) and its text-shadow is set to transparent black with a 4px blur: text-shadow: 0 0 4px rgba(0,0,0,0.3);.


color: rgba(0,0,0,0);
-webkit-transform: skew(63deg,-26.6deg);
-moz-transform: skew(63deg,-26.6deg);
-o-transform: skew(63deg,-26.6deg);
text-shadow: 0 0 4px rgba(0,0,0,0.3);

This shadow text is created using Javascript, so that the titles don't appear twice to search engines.

This demo works only for Firefox, Safari, Chrome & Opera. You can see it here: CSS3 Isometric Text Demo

7 Great CSS based text effects using the text-shadow property

CSS based text effects

Time for a bit of fun with CSS!
The following examples are all created using live text and the CSS text-shadow property. Apart from the Letterpress effect, all of the following examples make use of multiple shadows, and as such will only work on the following browsers.

  • Firefox 3.1+ (Mac/Win/Lin)
  • Safari 4+ (Mac/Win)
  • Chrome (Mac/Win)
  • Opera 9.5+ (Mac/Win/Lin)

Unfortunately Internet Explorer (6/7/8) has no support for the text-shadow property.

If you're not familiar with the text-shadow property here's a example and explanation:


h1 {
	text-shadow: -2px 2px 3px #ff2d95;
}

It breaks down like this: create a shadow below the h1 and offset it -2px horizontally, 2px vertically, blur it by 3px, and colour it pink.


1 Classic Letterpress Effect

css letterpress text effect

#letterpress h1 {
	text-shadow: 0px 1px 1px #4d4d4d;
	color: #222;
	font: 80px 'LeagueGothicRegular';
}

This is a very simple effect to achieve. To create the appearance of text that has been stamped, choose a text colour that is darker than the background, and then create a 1px text shadow with a 1px blur and offset it down 1px. Make the text-shadow slightly lighter than the background.

2 Cloudy Text Effect

css cloudy text effect

#cloud9 h1 {
	text-shadow: 0px 0px 10px rgba(255,255,255,0.6), 0px 0px 30px rgba(255,255,255,0.4), 0px 0px 50px rgba(255,255,255,0.3), 0px 0px 180px rgba(255,255,255,0.3);
	color: rgba(255,255,255,0);
	font: 80px 'ChunkFiveRegular';
}

This effect relies on multiple text shadows and rgba colours. If you don't already know, rgba colours work like this


rgba(255,255,255,0.5)

Basically, that's white in rgb, (255,255,255) at 50% transparency (0.5).

To make the Cloudy effect, first I gave the text an rgba value of rgba(255,255,255,0) = completely transparent, and then built the 'Cloud' up from layers of varying transparency and blur.

3 Embossed Text Effect

css embossed text effect

#embossed h1 {
	text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
	color: #9c8468;
	opacity: 0.3;
	font: 80px 'Museo700';
}

To Create the Embossed look, I used 2 diagonally offset shadows. One white shadow offset to the top left, and one black shadow offset to the bottom right. Then the text was given a colour similar to the background image and the whole thing was given an opacity of 0.3 so that the background image could be seen through the text.

4 City Lights Text

css city lights text effect

#citylights h1 {
	color: #fff;
	text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 50px #ff2d95, 0 0 75px #ff2d95;
	letter-spacing: 5px;
	font: 80px 'MisoRegular';
}

This is built up from 8 shadows with no offset and increasing amounts of blur. The first three shadows are white like the text, the remaining five shadows are all pink.

5 Burning Text Effect

css burning text effect

#burning h1 {
	color: #fff;
	text-shadow: 0px -1px 4px white, 0px -2px 10px yellow, 0px -10px 20px #ff8000, 0px -18px 40px red;
	font: 80px 'BlackJackRegular';
}

Three shadows — white, yellow, red — with increasing vertical offset and blur.

6 Retro Text Effect

css retro text effect

#retro h1 {
	color: #d7ceb2;
	text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72;
	font: 80px 'BazarMedium';
	letter-spacing: 10px;
}

Two diagonally offset shadows without blur. The first shadow is exactly the same colour as the background, the second is a lighter shade of the background colour.

7 3D Text Effect

css 3D text effect

#three-d h1 {
	color: #fff;
	text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
	font: 80px 'ChunkFiveRegular';
}

Bold white text, with seven descending shadows, each has no blur and is an increasingly darker shade of grey. The eighth shadow is dark-blue and blurred to enhance the overall effect.

Conclusion

The Live Demo makes use of @font-face embedding and I have used the following fonts:

  • League Gothic Regular: Letterpress Effect
  • Chunk Five Regular: Cloudy Effect & 3D Effect
  • Museo 700: Embossed Effect
  • Miso Regular: City Lights Effect
  • Black Jack Regular: Burning Effect
  • Bazar Regular: Retro Effect

In each of these cases the choice of font and background can greatly influence the result. For example, in the last example the slight perspective of the blue background adds to the 3D effect.

You can see a live demo of the effects here: CSS based text effects demo →

@font-face embedding made simple with Font Squirrel

font squirrel

Font Squirrel makes font embedding with CSS a cross-browser reality!

The CSS @font-face rule is hardly new — in fact it was proposed in CSS2 and has even been supported in Internet Explorer since version 4! The problem has always been that different browsers have implemented it in diverse ways. IE, for example has implemented it using the Embedded Open Type format (.eot), whereas Safari, which has supported @font-face since version 3.1 has opted to use TrueType (.ttf) and OpenType (.oft). Now with Firefox (v3.1) and Chrome also supporting @font-face, using it has become an option.

Recently, in my article "Use the Google Font API to break away from web safe fonts" (Nov 20th 2010), I showed you how to use the Google Font API to replace the standard set of web-safe fonts easily. The main limitation of the Google Font API is its limited library (currently only 34 fonts — not many, but still a vast improvement on the standard web-safe set). However, Font Squirrel has (at the time of writing) a total of 634 font families that are all licensed as free for commercial use! many of these fonts can be downloaded directly from the site, but some require you to follow a link to the designer's or foundry's site.

There are also hundreds of ready-prepared font kits to download. Each kit contains the following:

  • TrueType fonts (Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+)
  • EOT fonts (Internet Explorer 4+)
  • WOFF fonts (Firefox 3.6+, Internet Explorer 9+, Chrome 5+)
  • SVG fonts (iPad and iPhone)
  • Cufón fonts (in case you want them)
  • Demo.html and stylesheet.css examples

You can also make generate your own kits by using Font Squirrel's @font-face Generator. Here's an example of how, using Sansation by Bernd Montag (available from the Font Squirrel site):

font generator

1 First, go to the Generator (http://www.fontsquirrel.com/fontface/generator) and click the '+Add Fonts' button to add the Font from your system — navigate until you locate the font and click OK. You can process several fonts at once, but as the state, the generator is processor intensive, so be kind and don't generate more than a few at a time.

2 Click the Agreement check box (remember, you can only use fonts that are licensed for use online), then simply click the 'Download Your Kit' button.

3 You should now have downloaded the font kit which contains the following files:

generated web fonts
  • generator_config.txt
  • sansation_demo.html
  • sansation_regular-webfont.eot
  • sansation_regular-webfont.svg
  • sansation_regular-webfont.ttf
  • sansation_regular-webfont.woff
  • specimen_files
  • stylesheet.css

generator_config.txt contains any customized settings you may have used when generating your fonts, and can be uploaded to the generator to set it up for processing fonts using the same settings.

sansation_demo.html contains a demonstration page using the webfonts at all difference sizes, a sample layout using the fonts, a complete listing of available characters in the webfonts & full instructions for their use.

The 4 files, .eot, .svg, .ttf & .woff are, of course, the generated web fonts.

specimen_files just contains some CSS and Javascript that is used for presentation on the demo.

stylesheet.css contains the necessary CSS for use on your site.

4 Rename the folder (eg: webfonts) then upload the folder to your server and link to the CSS in your html:


<link rel="stylesheet" href="webfonts/stylesheet.css" type="text/css" charset="utf-8" />

Font Sample

5 Now to use the font (for example as an <h1> title), simply specify it in your CSS (remembering to provide an alternative stack for unsupported browsers):


h1 {
	font: 28px SansationRegular, Verdana, Arial, Helvetica, sans-serif;
	color: #61b2f3;
	padding-bottom: 10px;
}

You can see the downloaded demo page for this font here.

Use the Google Font API to break away from web safe fonts

Aren't you tired of designing site with the same old font stacks? Tahoma, Arial, Helvetic, sans-serif… yawn… I'm going to show you how you can add an extra touch to your site by using the Google Font Directory.

Although the choice is fairly limited (28 fonts a the time of writing 34 fonts*) it's still far more choice the just sticking to 'web safe fonts' — here's how it's done…

Avro font sample

1 Choose the font you would like to use. Let's pretend you're looking for a nice strong heading and you decide to use Avro bold. (pic) Click on the font in the list and then click on the 'Get the code' tab.

2 Use the checkboxes to select which variations of the font you require (in this case just 'bold'), and then copy the code below


<link href='http://fonts.googleapis.com/css?family=Arvo:bold&subset=latin' rel='stylesheet' type='text/css'>

and paste it into the <head> section of your page. Note: instead of adding a <link> in the <head> section of your page you could include it directly in your CSS by adding the following code to the top of your stylesheet


@import url(http://fonts.googleapis.com/css?family=Arvo:bold&subset=latin);

3 From here on it's just a simple matter of applying the font in your CSS like any other font:


h1 {
    font-family: 'Arvo', arial, serif;
}

Don't forget to add a fallback to the stack for any non compatible browsers — At the time of writing, the following browsers are supported:

  • Google Chrome: version 4.249.4+
  • Mozilla Firefox: version: 3.5+
  • Apple Safari: version 3.1+
  • Opera: version 10.5+
  • Microsoft Internet Explorer: version 6+

However the API doesn't support iPhone, iPad, iPod or Android, and so anyone accessing your site on these platforms will see the fallback fonts in your stack.

You may also like to check out TypeKit - it does pretty much the same thing, and although it's not free like the Google API, it has far more choice - This site is currently using TypeKit for its fonts Main heading: Bello Pro, Blog titles: Atrament Web, Body text: FF Netto Web).

A demo of the Google font API can be seen here

* this post was edited 4/12/2010

HOME