Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Gradients in CSS? 1

Status
Not open for further replies.
markdmac

markdmac

MIS
Dec 20, 2003
12,340
US
I hope someone out here can help me. I'm just learning CSS and trying to incorporate style sheets into my ASP web site.

I have a body tag that looks like this:
Code: 
<body id="msviRegionGradient2" width="50%" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#A1C5D7', endColorStr='#00000000', gradientType='0')" link="#000000" vlink="#000000" alink="#99CCFF" onload="FP_preloadImgs(/*url*/'images/button2.jpg',/*url*/'images/button3.jpg',/*url*/'images/button5.jpg',/*url*/'images/button6.jpg',/*url*/'images/buttonB.jpg',/*url*/'images/buttonC.jpg',/*url*/'images/buttonE.jpg',/*url*/'images/buttonF.jpg',/*url*/'images/button1A.jpg',/*url*/'images/button1B.jpg',/*url*/'images/button1D.jpg',/*url*/'images/button1E.jpg',/*url*/'images/button10.jpg',/*url*/'images/button11.jpg',/*url*/'images/button12.jpg',/*url*/'images/button22.jpg',/*url*/'images/button23.jpg',/*url*/'images/buttonA1.jpg',/*url*/'images/buttonF1.jpg',/*url*/'images/button24.jpg',/*url*/'images/button2D.jpg',/*url*/'images/button2E.jpg')">

This works great in my ASP, but I have no idea how to break it down to incorporate it into a style sheet so I don't need to specify all of this code in all the pages of the site.

All the examples I've found are fairly easy to follow when setting simple HTML properties, but nothing I have found helps explain how to do something like this. Can anyone help me?

Thanks in advance.

Mark
 
Sort by date Sort by votes
Persistnce paid off. I managed to figure it out. here is what I used:

Code: 
body
{
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#A1C5D7, endColorStr=#00000000, gradientType=0);
onload:"FP_preloadImgs(/*url*/images/button2.jpg,/*url*/images/button3.jpg,/*url*/images/button5.jpg,/*url*/images/button6.jpg,/*url*/images/buttonB.jpg,/*url*/images/buttonC.jpg,/*url*/images/buttonE.jpg,/*url*/images/buttonF.jpg,/*url*/images/button1A.jpg,/*url*/images/button1B.jpg,/*url*/images/button1D.jpg,/*url*/images/button1E.jpg,/*url*/images/button10.jpg,/*url*/images/button11.jpg,/*url*/images/button12.jpg,/*url*/images/button22.jpg,/*url*/images/button23.jpg,/*url*/images/buttonA1.jpg,/*url*/images/buttonF1.jpg,/*url*/images/button24.jpg,/*url*/images/button2D.jpg,/*url*/images/button2E.jpg)" 
}

a:link {color:#000000}
a:visited {color:#000000}
a:hover {color:blue}
a:active {color:#99CCFF}

I hope you find this post helpful. Please let me know if it was.

Regards,

Mark
 
Upvote 0 Downvote
Like this
Code: 
<style> body {width:50%;
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#A1C5D7', endColorStr='#00000000', gradientType='0');}</style>
I believe this is it. You would put the above code in your style sheet.

Glen
 
Upvote 0 Downvote
thanks anyway Glen.

I hope you find this post helpful. Please let me know if it was.

Regards,

Mark
 
Upvote 0 Downvote
There's a couple of problems with your body {} rule...
Code: 
filter:progid:DXImageTransform.Microsoft.Gradient( ...
The [tt]filter:[/tt] rule, and all that goes in it is a Microsoft-only thing. Users of modern browsers won't see your gradient effect. You might be better off using a background image.
Code: 
onload:"FP_preloadImgs( ...
There's no such CSS rule as [tt]onload[/tt]. This will be ignored. If you want to preload those images, you'll have to make those javascript calls in your HTML.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
When you post extremely long strings like that, PLEASE break them SOMEWHERE, or put the occasional space in them so the system can break them. Having the page come out 2 feet wide is REALLY annoying.

Thanks.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
Thanks Chris for pointing out that the gradient is an IE only feature.

I've added code to my ASP to detect the browser and if the browser type is not MSIE it does a response.write for the bgcolor to give a similar look to the page.

Thanks also for letting me know about the onload.

I hope you find this post helpful. Please let me know if it was.

Regards,

Mark
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
816
pmonett
pmonett
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
819
spamjim
spamjim
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
642
PeDa
PeDa
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top