Carol's Easy HTML

Text Effects

In this section you will find many cool Text Effects and Basic Text Structures ... as well as some really fun MARQUEE and GLOWING TEXT Codes.

Most of the following codes work only in Internet Explorer. Some of the codes may work with Firefox, but not all of them. Sorry FireFox users. :(

* PLEASE NOTE - If you're using Photobucket for your Avon website images you must substitute your own information in place of mine. Just insert your Photobucket DIRECT LINK (second code - as shown in the photo below) in place of my blue your filename.gif (or .jpg).

For example - Look closely at the code below. Everything in BLUE will be replaced with YOUR Photobucket code.

DISPLAYING TEXT IN COLUMNS

Celebrity fragrances are hot and Avon has worked the trend well with Derek Jeter, Jennifer Hudson and others.

INTRODUCING ANEW ULTIMATE CONTOURING EYE SYSTEM & AGE REPAIR DAY CREAM SPF 25

The Code

<center>
<table border=0 width=100% cellspacing=15 cellpadding=15 cols=2>
<tr>
<td>
Insert your text in this space
</td>
<td>
Insert your text in this space
</td>
</tr>
</table>
</center>

ALIGNING TEXT NEXT TO AN IMAGE

You will need to keep your image size a bit small if you use the next code. My image (below) is WIDTH="97" HEIGHT="106", just to give you an idea of sizing. If your image is too large your background will slide over into the next section.

Remember, if you do re-size you will need to keep your dimensions proportionate - or you images will look distorted.

Here are a couple of very cool websites for re-sizing images -

Shrink Pictures

Pic Resize

My image appears on the left side of the page - with the text to the right of the image. You may insert your own text in place of mine.

The Code

<IMG SRC="your filename.gif (or .jpg)" WIDTH="image width" HEIGHT="image height" style="margin: 10px; float: left" STYLE="BORDER: solid 3px #FFFFFF" alt="your image description">
 
Insert your text here. Your image will be on the left - your text will be to the right of your image.

My image appears on the right side of the page - with the text to the left of the image. You may insert your own text in place of mine.

The Code

<IMG SRC="your filename.gif (or .jpg)" WIDTH="image width" HEIGHT="image height" style="margin: 10px; float: right" STYLE="BORDER: solid 3px #FFFFFF" alt="your image description">
 
Insert your text here. Your image will be on the right - your text will be to the left of your image.

The Tag

Line breaks are done with a   tag. If you want to put a word on each line, with no spaces in between the lines, you use   after each line.

Line 1 
Line 2 
Line 3 

The more  's you put, the more space you have between your text. For example -

Welcome to my Avon website.

 

Please click the shop tab located above to begin shopping.

 

Thank you for your business.

Marquee Codes

You are welcome to change my blue text, color codes, font face, size, border and background colors in the following Marquee Codes.

* The Marquee and Glowing Text codes work only in Internet Explorer. Some of the codes may work with Firefox, but not all of them. Sorry FireFox users. :(

BASIC MARQUEE

How cool is this?

The Code

<marquee>Enter Your Text Here</marquee>

SCROLLING UP MARQUEE

I Go Up .... WHEEE!!!!

The Code

<marquee direction="up">Enter Your Text Here</marquee>

SCROLLING DOWN MARQUEE

I Go Down!

The Code

<marquee direction="down">Enter Your Text Here</marquee>

COLOR & FONT CHANGE MARQUEE

I've changed my color, size and face!

The Code

<marquee>

Enter Your Text Here
</marquee>

SLIDE-IN MARQUEE

This text slides in from the right and stops. You must refresh this page to see effect again.

The Code

<marquee behavior="slide" direction="left">Enter Your Text Here</marquee>

BOUNCING TEXT MARQUEE

I bounce back and forth!

The Code

<marquee behavior="alternate">Enter Your Text Here</marquee>

SCROLLAMOUNT

The higher the scrollamount number, the faster the marquee goes! If you wish you can set your scroll amount to "100" for a SUPER fast marquee.

I'm going very slowwww - Enter Your Text Here

I'm a little faster - Enter Your Text Here

I'm leading the pack! - Enter Your Text Here

The Code

<marquee scrollamount="1">Enter Your Text Here</marquee>

<marquee scrollamount="5">Enter Your Text Here</marquee>

<marquee scrollamount="10">Enter Your Text Here</marquee>

WAVE MARQUEE - Does not work with Firefox!

Just A Wave
Just A Wave

The Code

<marquee behavior=alternate direction=up scrollamount=2 scrolldelay=65 height=80 style=" Text-align;filter:wave(add=0,phase=3, freq=1,strength=7)"> <center>Enter Your Text Line 1 Enter Your Text Line 2</center></marquee>

BACKGROUND MARQUEE

I LOVE AVON!

The Code

<marquee direction="left" style="background:#0000CC">Enter Your Text Here</marquee>

BORDER MARQUEE

Enter Your Text Here

The Code

<marquee style="border:#9932CC 2px SOLID">Enter Your Text Here</marquee></a>

You can change the thickness of your border by changing the 2. The higher the number, the thicker your border.

SCROLLING IMAGE MARQUEE

This image scrolls to the right. To change the direction just change the part in the code after direction. You can change it to 'right' to 'left', 'up' or 'down' - depending on which way you want your image to go.

bee

The Code

<marquee behavior="scroll" direction="right"><img src=" your filename.gif (or .jpg)"></marquee>

SCROLLING IMAGE WITH TEXT MARQUEE

This image scrolls to the right. To change the direction just change the part in the code after direction. You can change it to 'right' to 'left', 'up' or 'down' - depending on which way you want your image to go.

bee
I can fly across the screen!

The Code

<marquee behavior="scroll" direction="right"><img src="your filename.gif (or .jpg)"> Your Text Goes Here</marquee>

SCROLLING TEXT WITH BACKGROUND IMAGE

I have an image background!

The Code

<table background="your filename.gif (or .jpg)"
width=100%><tr><td> <marquee>Enter Your Text Here</marquee> </td></tr></table>

Glowing and Drop Shadow Text

You can change the font color, font size, filter strength and font face in the following codes. Just change everything in blue to your liking.

Don't forget to check out my LINKS for some COLOR CODE and FONT websites. Just copy and paste the color code and font face you like and insert them in my code.

I GLOW!

The Code

<table style="filter:GLOW(color=#436EEE, strength=4)"><tr><td>Enter Your Text Here </td></tr></table>

This text has a SHADOW!

The Code

<table style="filter:SHADOW(color=#0276FD, strength=4)"> <tr><td> Enter Your Text Here</td></tr></table>

This text has a DROPSHADOW!

The Code

<table style="filter:DROPSHADOW(color=#FF3030, strength=4)"> <tr><td>Enter Your Text Here </td></tr></table>

FLOATING TEXT - IE Only

AVON ROCKS!

The more you type here the more the text will wrap around the text that is floated to the right.

The Code

<div width="100" style="filter:shadow(color:black);float: right;font-weight:bold; font-size:18pt;font-family:georgia;color:#0276FD;padding:10px;">
Your 'Floating Text' goes here.</div> Insert your wrap around text here.

* PLEASE NOTE - You can change my blue 'Floating Text Color'. Just change my 0276FD to any color you choose.

If you would like the 'Floating Text' to be on the left you can change RIGHT (look inside the code) to LEFT.

Overlapping Text Effects

Some of these effects only work for Internet Explorer. Sorry Firefox users. :(

You can change my font color codes, face, size and text to any that you choose. Or if you'd like to use mine, just copy & paste the code into your Avon website editor.

AVON
rocks!

The Code

 AVON rocks!

AVON
the company for women

The Code

 AVON <>the company for women

The Company For Women!
AVON

The Code

 The Company For Women! AVON

Fun Text Effects

"HI-LIGHTING" TEXT

It's really easy to Hi-Light your text! Just replace my FFFF00 in the code below with your own hi-light color. You can also change my 0276FD font color to any you choose. You can find color codes here - The Hex Hub

The Code


Insert your text here

RAINBOW TEXT

A V O N

The Code

A
V
O
N

* PLEASE NOTE - You can change my colors, text size and text (everything in blue) to any that you choose.

For font size change my 25 to any number you like. The higher the number, the larger the font. The smaller the number, the smaller the font.

Manipulating Fonts

Fonts are one of the most important visual elements of your page. The font attributes are face, size and color. To change any of the font attributes in your page, simply open with the tag and close with the tag.

Font Color

Using a hexadecimal color chart, you can set the color of the font. You can also use words like 'green' or 'red' instead of the hexadecimal numbers, but not all browsers will interpret them properly. You're safest to stick with the numbers

Enter Your Text Here

Enter Your Text Here

Enter Your Text Here

Font face

Font face is the type of font. There are many you can use, but not all computers have all of the fonts installed on them.

If you choose some wild and crazy font for your webpage, chances are most people will have the text displayed in the default system font. Best to stick to a 'web safe font'. Check out my LINKS for 'Common Fonts'.

this font is "comic sans ms"

 this font is "Times New Roman"

In the sentence below I am adding the font face, color and size all to the same tag.

I am using font color, size and face in this sentence!

Aligning Text

The tag defines a paragraph. ALIGN indicates the alignment of the paragraph.

aligns to the left

centers a paragraph

aligns to the right

Boldface and Italics

You can add emphasis to text by using the following tags.

This text is bold - Enter Your Text Here

This text is italic - Enter Your Text Here

This text is small - Enter Your Text Here

This text strong - Enter Your Text Here

This text contains _{subscript - Enter Your Text Here}

Top of Page

visitors are currently browsing this site

Text Effects

Font Color

Font size

Font face

Categories