(HTML Tip) Gradient Colors

Cool Tips & Tricks	Help Communities:

<< Prev Topic | Next Topic >>

Cool Tips & Tricks ::: HTML FAQ ::: (HTML Tip) Gradient Colors

Topic: (HTML Tip) Gradient Colors

(?)

Nutrocker

ezboard Moderator
ezSupporter
Posts: 60

Posted: 10/11/01 2:02 pm

(HTML Tip) Gradient Colors

By webpagedesigner

Here's a cool trick I learned at the Microsoft website as I was looking through some DHTML examples, they made a custom drop down menu and whenever you cursor would go over the item, it would be filled with a gradient (fading from one color to another). Like so....

Pretty cool huh?

Unlike that big old code that was used on Dynamic Drive to create that effect, this one is only a one or two line code!

<div style="width: 100%; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#DBCF23,EndColorStr=003399)">Pretty cool huh?</div>

HINTS ON USING CODE:

GradientType=1
Replace the 1 with a 0 for a vertical fade.
Keep the 1 where it is for a horizontal fade.

StartColorStr=#DBCF23
This is the first color in the fade. The color
I used was a yellow. Change as you wish.

End Color Str=#003399
This is the last color in the fade. The color
I used was a very dark blue. Change as you wish.

Edited by: atlass at: 12/15/01 4:00:08 am

Nutrocker

ezboard Moderator
ezSupporter
Posts: 4794

Posted: 8/28/02 2:45 pm

Re: (HTML Tip) Gradient Colors

Note: The above only works in IE

Nutrocker

ezboard Moderator
ezSupporter
Posts: 5073

Posted: 9/23/02 2:02 pm

Re: (HTML Tip) Gradient Colors

By using the span tag instead of div, you can make the span tag span 50% of the width and then use the span tag again imeediately after so that the colors merge.

<span style="width: 50%; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#0000FF,EndColorStr=#FFFF00)">Pretty cool huh?</span><span style="width: 50%; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#FFFF00,EndColorStr=#0000FF)">Pretty cool huh?</span>

Pretty cool huh?Pretty cool huh?

Nutrocker

ezboard Moderator
ezSupporter
Posts: 7264

Posted: 4/17/03 3:10 pm

Re: (HTML Tip) Gradient Colors

Someone asked if gradients could be used within css? I got a surprise when they worked!

CSS
custom html area
1st text box from the top

 
<style type="text/css">

.mygradient {width: 100%; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#DBCF23,EndColorStr=003399) }


</style>

All you have to do is then give your html tag or tags a class, example of class for a span tag..

<span class="mygradient">hello world</span>

::: Topic Commands

<< Prev Topic | Next Topic >>

Icon Legend

:::Reply to Post Button

:::Edit Post Button

:::Delete Post Button (Moderator Only)

:::Subscribe to Thread Button

:::Email to Friend Button

- Cool Tips & Tricks - HTML FAQ -

ezboard Help Communities:

Help Forums Bug Base