How'd they do that? vertical collapsing gradient fill

  • Thread starter Thread starter =?iso-8859-1?Q?Crash_Gordon=AE?=
  • Start date Start date
?

=?iso-8859-1?Q?Crash_Gordon=AE?=

Howdie Awl...

http://www.microsoft.com/technet/default.mspx

In the top banner of a page like this one. How did they achieve the vertical (north/south) collapsing gray gradient between the TechNet graphic and the Search bar graphic?

I know how to do this with horizontal (east/west) gradients and tables but this one's got me scratching me head...maybe I need more coffee, but I'd still like to know.

I'm thinking background cell gradient image? and the rest is sliding over it? If so, I thought bg cell images were not totally supported??

I'll probably regret posting this in ten minutes but here goes....push the button rob...

TNX,

Rob
 
View Source to see the CSS applied to each table cell

style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#C5C5C5', gradientType='1')"
and
style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#C5C5C5', endColorStr='#8B8B8B', gradientType='1')"

--




Howdie Awl...

http://www.microsoft.com/technet/default.mspx

In the top banner of a page like this one. How did they achieve the vertical (north/south) collapsing gray gradient between the
TechNet graphic and the Search bar graphic?

I know how to do this with horizontal (east/west) gradients and tables but this one's got me scratching me head...maybe I need more
coffee, but I'd still like to know.

I'm thinking background cell gradient image? and the rest is sliding over it? If so, I thought bg cell images were not totally
supported??

I'll probably regret posting this in ten minutes but here goes....push the button rob...

TNX,

Rob
 
oh ok.

i'm not up to that part of my css book. i thought it may have been something like this.

tnx

| View Source to see the CSS applied to each table cell
|
| style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#C5C5C5', gradientType='1')"
| and
| style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#C5C5C5', endColorStr='#8B8B8B', gradientType='1')"
|
| --
|
| _____________________________________________
| SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| "Warning - Using the F1 Key will not break anything!" (-;
| To find the best Newsgroup for FrontPage support see:
| http://www.net-sites.com/sitebuilder/newsgroups.asp
| _____________________________________________
|
|
| Howdie Awl...
|
| http://www.microsoft.com/technet/default.mspx
|
| In the top banner of a page like this one. How did they achieve the vertical (north/south) collapsing gray gradient between the
| TechNet graphic and the Search bar graphic?
|
| I know how to do this with horizontal (east/west) gradients and tables but this one's got me scratching me head...maybe I need more
| coffee, but I'd still like to know.
|
| I'm thinking background cell gradient image? and the rest is sliding over it? If so, I thought bg cell images were not totally
| supported??
|
| I'll probably regret posting this in ten minutes but here goes....push the button rob...
|
| TNX,
|
| Rob
|
| --
| Non pensare che non ci siano coccodrilli perché
| l'acqua è calma
| From: "Crash Gordon"
| email: (e-mail address removed)
|
|
|
 
Those are IE specific effects, I believe. Check the site out in a different
browser (Opera, Firefox) and the gradient doesn't appear to collapse.

--
Jack Brewster - Microsoft FrontPage MVP

oh ok.

i'm not up to that part of my css book. i thought it may have been something
like this.

tnx

| View Source to see the CSS applied to each table cell
|
|
style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFF
FFF', endColorStr='#C5C5C5', gradientType='1')"
| and
|
style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#C5C
5C5', endColorStr='#8B8B8B', gradientType='1')"
|
| --
|
| _____________________________________________
| SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| "Warning - Using the F1 Key will not break anything!" (-;
| To find the best Newsgroup for FrontPage support see:
| http://www.net-sites.com/sitebuilder/newsgroups.asp
| _____________________________________________
|
|
message | Howdie Awl...
|
| http://www.microsoft.com/technet/default.mspx
|
| In the top banner of a page like this one. How did they achieve the
vertical (north/south) collapsing gray gradient between the
| TechNet graphic and the Search bar graphic?
|
| I know how to do this with horizontal (east/west) gradients and tables but
this one's got me scratching me head...maybe I need more
| coffee, but I'd still like to know.
|
| I'm thinking background cell gradient image? and the rest is sliding over
it? If so, I thought bg cell images were not totally
| supported??
|
| I'll probably regret posting this in ten minutes but here goes....push the
button rob...
|
| TNX,
|
| Rob
|
| --
| Non pensare che non ci siano coccodrilli perché
| l'acqua è calma
| From: "Crash Gordon"
| email: (e-mail address removed)
|
|
|
 
Don't have Opera...I guess I should dl it.
It works in Mozilla, but it doesnt collapse as far as it does in IE6.

I'm gonna stick with an old table/graphic solution for now until I learn more css.

:-(




| Those are IE specific effects, I believe. Check the site out in a different
| browser (Opera, Firefox) and the gradient doesn't appear to collapse.
|
| --
| Jack Brewster - Microsoft FrontPage MVP
|
| | oh ok.
|
| i'm not up to that part of my css book. i thought it may have been something
| like this.
|
| tnx
|
| | | View Source to see the CSS applied to each table cell
| |
| |
| style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFF
| FFF', endColorStr='#C5C5C5', gradientType='1')"
| | and
| |
| style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#C5C
| 5C5', endColorStr='#8B8B8B', gradientType='1')"
| |
| | --
| |
| | _____________________________________________
| | SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| | "Warning - Using the F1 Key will not break anything!" (-;
| | To find the best Newsgroup for FrontPage support see:
| | http://www.net-sites.com/sitebuilder/newsgroups.asp
| | _____________________________________________
| |
| |
| message | | Howdie Awl...
| |
| | http://www.microsoft.com/technet/default.mspx
| |
| | In the top banner of a page like this one. How did they achieve the
| vertical (north/south) collapsing gray gradient between the
| | TechNet graphic and the Search bar graphic?
| |
| | I know how to do this with horizontal (east/west) gradients and tables but
| this one's got me scratching me head...maybe I need more
| | coffee, but I'd still like to know.
| |
| | I'm thinking background cell gradient image? and the rest is sliding over
| it? If so, I thought bg cell images were not totally
| | supported??
| |
| | I'll probably regret posting this in ten minutes but here goes....push the
| button rob...
| |
| | TNX,
| |
| | Rob
| |
| | --
| | Non pensare che non ci siano coccodrilli perché
| | l'acqua è calma
| | From: "Crash Gordon"
| | email: (e-mail address removed)
| |
| |
| |
|
|
 
My current browser list:
- IE 4 / 5 / 5.5 / 6
- Firebird .6 / .7
- Firefox .8
- Opera 5 / 6 / 7
- Moz 1.31 / 1.4.1 / 1.5 / 1.6
- NS 4.08 / 4.8 / 7.1

17 browser/versions?!?! Is there a browserholics anonymous?

--
Jack Brewster - Microsoft FrontPage MVP

Don't have Opera...I guess I should dl it.
It works in Mozilla, but it doesnt collapse as far as it does in IE6.

I'm gonna stick with an old table/graphic solution for now until I learn
more css.

:-(




| Those are IE specific effects, I believe. Check the site out in a
different
| browser (Opera, Firefox) and the gradient doesn't appear to collapse.
|
| --
| Jack Brewster - Microsoft FrontPage MVP
|
message
| | oh ok.
|
| i'm not up to that part of my css book. i thought it may have been
something
| like this.
|
| tnx
|
| | | View Source to see the CSS applied to each table cell
| |
| |
|
style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFF
| FFF', endColorStr='#C5C5C5', gradientType='1')"
| | and
| |
|
style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#C5C
| 5C5', endColorStr='#8B8B8B', gradientType='1')"
| |
| | --
| |
| | _____________________________________________
| | SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| | "Warning - Using the F1 Key will not break anything!" (-;
| | To find the best Newsgroup for FrontPage support see:
| | http://www.net-sites.com/sitebuilder/newsgroups.asp
| | _____________________________________________
| |
| |
| message | | Howdie Awl...
| |
| | http://www.microsoft.com/technet/default.mspx
| |
| | In the top banner of a page like this one. How did they achieve the
| vertical (north/south) collapsing gray gradient between the
| | TechNet graphic and the Search bar graphic?
| |
| | I know how to do this with horizontal (east/west) gradients and tables
but
| this one's got me scratching me head...maybe I need more
| | coffee, but I'd still like to know.
| |
| | I'm thinking background cell gradient image? and the rest is sliding
over
| it? If so, I thought bg cell images were not totally
| | supported??
| |
| | I'll probably regret posting this in ten minutes but here goes....push
the
| button rob...
| |
| | TNX,
| |
| | Rob
| |
| | --
| | Non pensare che non ci siano coccodrilli perché
| | l'acqua è calma
| | From: "Crash Gordon"
| | email: (e-mail address removed)
| |
| |
| |
|
|
 
way too many :-)

I have opera now...pretty cool.
arent the fire ones the same as mozilla?


| My current browser list:
| - IE 4 / 5 / 5.5 / 6
| - Firebird .6 / .7
| - Firefox .8
| - Opera 5 / 6 / 7
| - Moz 1.31 / 1.4.1 / 1.5 / 1.6
| - NS 4.08 / 4.8 / 7.1
|
| 17 browser/versions?!?! Is there a browserholics anonymous?
|
| --
| Jack Brewster - Microsoft FrontPage MVP
|
| | Don't have Opera...I guess I should dl it.
| It works in Mozilla, but it doesnt collapse as far as it does in IE6.
|
| I'm gonna stick with an old table/graphic solution for now until I learn
| more css.
|
| :-(
|
|
|
|
| | | Those are IE specific effects, I believe. Check the site out in a
| different
| | browser (Opera, Firefox) and the gradient doesn't appear to collapse.
| |
| | --
| | Jack Brewster - Microsoft FrontPage MVP
| |
| message
| | | | oh ok.
| |
| | i'm not up to that part of my css book. i thought it may have been
| something
| | like this.
| |
| | tnx
| |
| | | | | View Source to see the CSS applied to each table cell
| | |
| | |
| |
| style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFF
| | FFF', endColorStr='#C5C5C5', gradientType='1')"
| | | and
| | |
| |
| style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#C5C
| | 5C5', endColorStr='#8B8B8B', gradientType='1')"
| | |
| | | --
| | |
| | | _____________________________________________
| | | SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| | | "Warning - Using the F1 Key will not break anything!" (-;
| | | To find the best Newsgroup for FrontPage support see:
| | | http://www.net-sites.com/sitebuilder/newsgroups.asp
| | | _____________________________________________
| | |
| | |
| | message | | | Howdie Awl...
| | |
| | | http://www.microsoft.com/technet/default.mspx
| | |
| | | In the top banner of a page like this one. How did they achieve the
| | vertical (north/south) collapsing gray gradient between the
| | | TechNet graphic and the Search bar graphic?
| | |
| | | I know how to do this with horizontal (east/west) gradients and tables
| but
| | this one's got me scratching me head...maybe I need more
| | | coffee, but I'd still like to know.
| | |
| | | I'm thinking background cell gradient image? and the rest is sliding
| over
| | it? If so, I thought bg cell images were not totally
| | | supported??
| | |
| | | I'll probably regret posting this in ten minutes but here goes....push
| the
| | button rob...
| | |
| | | TNX,
| | |
| | | Rob
| | |
| | | --
| | | Non pensare che non ci siano coccodrilli perché
| | | l'acqua è calma
| | | From: "Crash Gordon"
| | | email: (e-mail address removed)
| | |
| | |
| | |
| |
| |
|
|
 
I don't have a CSS book in front of me, how one put that code in the CSS
file?

I have this for the cell I want to work with:
/* Header - Border line, background color & image for headers */
.headerbody { background-color: #FFDC51; border: 1px #000000 solid;
background-image:
url(http://www.atvsource.com/images/site_images/header_topbar_002.jpg);
background-repeat: repeat-y; }

How would this fit into the above,

style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFD
C51', endColorStr='#FFE87C', gradientType='1')"
style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#C5C
5C5', endColorStr='#8B8B8B', gradientType='1')"







way too many :-)

I have opera now...pretty cool.
arent the fire ones the same as mozilla?


| My current browser list:
| - IE 4 / 5 / 5.5 / 6
| - Firebird .6 / .7
| - Firefox .8
| - Opera 5 / 6 / 7
| - Moz 1.31 / 1.4.1 / 1.5 / 1.6
| - NS 4.08 / 4.8 / 7.1
|
| 17 browser/versions?!?! Is there a browserholics anonymous?
|
| --
| Jack Brewster - Microsoft FrontPage MVP
|
message
| | Don't have Opera...I guess I should dl it.
| It works in Mozilla, but it doesnt collapse as far as it does in IE6.
|
| I'm gonna stick with an old table/graphic solution for now until I learn
| more css.
|
| :-(
|
|
|
|
| | | Those are IE specific effects, I believe. Check the site out in a
| different
| | browser (Opera, Firefox) and the gradient doesn't appear to collapse.
| |
| | --
| | Jack Brewster - Microsoft FrontPage MVP
| |
| message
| | | | oh ok.
| |
| | i'm not up to that part of my css book. i thought it may have been
| something
| | like this.
| |
| | tnx
| |
| | | | | View Source to see the CSS applied to each table cell
| | |
| | |
| |
|
style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFF
| | FFF', endColorStr='#C5C5C5', gradientType='1')"
| | | and
| | |
| |
|
style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#C5C
| | 5C5', endColorStr='#8B8B8B', gradientType='1')"
| | |
| | | --
| | |
| | | _____________________________________________
| | | SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| | | "Warning - Using the F1 Key will not break anything!" (-;
| | | To find the best Newsgroup for FrontPage support see:
| | | http://www.net-sites.com/sitebuilder/newsgroups.asp
| | | _____________________________________________
| | |
| | |
| | message | | | Howdie Awl...
| | |
| | | http://www.microsoft.com/technet/default.mspx
| | |
| | | In the top banner of a page like this one. How did they achieve the
| | vertical (north/south) collapsing gray gradient between the
| | | TechNet graphic and the Search bar graphic?
| | |
| | | I know how to do this with horizontal (east/west) gradients and tables
| but
| | this one's got me scratching me head...maybe I need more
| | | coffee, but I'd still like to know.
| | |
| | | I'm thinking background cell gradient image? and the rest is sliding
| over
| | it? If so, I thought bg cell images were not totally
| | | supported??
| | |
| | | I'll probably regret posting this in ten minutes but here goes....push
| the
| | button rob...
| | |
| | | TNX,
| | |
| | | Rob
| | |
| | | --
| | | Non pensare che non ci siano coccodrilli perché
| | | l'acqua è calma
| | | From: "Crash Gordon"
| | | email: (e-mail address removed)
| | |
| | |
| | |
| |
| |
|
|
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Back
Top