facelift v1.2 » Image Replacement Techniques and Examples
All of the following effects can be achieved with only a couple lines of code. I've tried to make FLIR as easy to work with as possible.
» Browse more detailed examples
» Get a facelift preview for your site! Visit facelift previews
-
Update It!
An ordinary heading
Elements can be replaced automatically or one at a time. FLIR will automatically grab the text from the element and replace it with an image using your custom font.
-
Update It!
An ordinary heading with a different font
The replacement image is dynamically generated using the CSS styles that you have applied to the element. This is the default behavior but you can also disable it and set styles, and replace elements, one at a time.
-
Update It!
Now let's spice it up!
With FLIR, you are not limited to one font and color with your replacement images. Add as many fonts and colors as you wish to your elements and they will be detected and replaced — automatically.
-
Update It!
Maybe you have a really long header that you would like to wrap down to the next line. You know, so there are multiple lines of text. You can even align it to the left, center, or right. This text is center aligned.
Image replacements can be generated usng three separate modes: stretch, progressive, and wrap — which is the mode you see above. They can be set on an element to element basis or only once.
Progressive will shrink the text size of the generated image until it fits inside the HTML elements box.
Stretch will generate an image and resize the HTML element to contain it.
-
Update It!
How 'bout with a background?
Create custom backgrounds for your elements and have them shine through! All generated images are transparent PNG (pronounced ping) files which will allow your text images to lay nicely overtop of whatever is behind it — just like normal text.
FLIR transparent PNG images will work in all modern browsers and even the craptacular Internet Explorer 6.
-
Update It!
Use symbol fonts! ABC
Any font that is supported by PHP, FreeType, and GD is supported by FLIR. Use symbol fonts to create stylish accents or custom bullets for your <ul> and <ol> lists.
-
Give your website a facelift!
Go to facelift previews and type your websites address in to see what your site could look like with facelift applied. All without downloading a single thing or writing a single line of code! » Facelift Previews
