Aire Function Demo

For this demo you can see the standard text and the image replaced text, with the code used to get that output. View the source to see the full output. The background colour of this page is set to an off-white, and the background of the images to pure white, so you can see the size of the images created.


Interactive Aire Demo

Type your text into the box below, select the font face and font color you want to use and press the "Create" button. Your tasty smooth Aire image will be created as if by magic. Be aware that depending on the vagaries of your browser, the way background images work, and the alignment of the stars your image might not show up first time. Just press Enter/Return, then press Yes/OK to submit your form again, and hopefully the image will show up. The font size is set at 24 pixels, and you'll see how the different fonts interpret this size.


Standard Headers

<h1>H1 Test Text</h1>

H1 Test Text

<h1><? print aire(180, 45, "H1 Test Text", "left", "FFFFFF", 0, "000000", "Bell_Gothic_Black.ttf", 24, 5, "headers",0); ?></h1>

H1 Test Text

<h1>H2 Test Text</h1>

H2 Test Text

<h2><? print aire(130, 40, "H2 Test Text", "left", "FFFFFF", 0, "000000", "Bell_Gothic_Black.ttf", 18, 5, "headers",0); ?></h2>

H2 Test Text

<h1>H3 Test Text</h1>

H3 Test Text

<h3><? print aire(110, 40, "H3 Test Text", "left", "FFFFFF", 0, "000000", "Bell_Gothic_Black.ttf", 14.5, 5, "headers",0); ?></h3>

H3 Test Text


Different Fonts

Some examples using different fonts.

<p><? print aire(180, 40, "Tempus Sans ITC", "left", "FFFFFF", 0, "829CC9", "Tempus_Sans_ITC.ttf", 18, 10, "headers",0); ?></p>

Tempus Sans ITC

<p><? print aire(60, 40, "Kids", "center", "FFFFFF", 0, "FF0000", 0, "Kids.ttf", 20, 10, "headers",0); ?></p>

Kids

<p><? print aire(140, 40, "Pricedown", "right", "FFFFFF", 0, "999999", 0, "Pricedown.ttf", 20, 5, "headers",0); ?></p>

Pricedown

For this example I've added a bottom border to the h4 tag using CSS (view source for details).

<h4><? print aire(310, 80, "Balmoral D", "left", "FFFFFF", 0, "000000", "Balmoral_D.ttf", 72, 8, "headers",0); ?></h4>

Balmoral D

Gradiated Backgrounds

And finally, an example with a transparent background color. The background image of this box is faded so you can see how this works. To make the text look smooth, set the background colour of the Aire image to as near the page background as possible. In this case I set the background of the Aire image to blue.

<h1><? print aire(650, 45, "Aire Background Transparency Test", "left", "0000FF", 127, "FF0000", "Antique_Type.ttf", 24, 15, "headers",1); ?></h1>

Aire Background Transparency Test 1

Aire Background Transparency Test 2

Aire Background Transparency Test 3