Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Old 09-09-2009, 07:30 PM Color Change
Average Talker

Posts: 24
Name: Ryan
Trades: 0
Hey all,

Just wondering on how sites like http://www.track-ip.com/ they can have their background progressively get lighter or darker as you scroll on the page.

Thanks!
RJGolf is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 09-09-2009, 07:36 PM Re: Color Change
vangogh's Avatar
Post Impressionist

Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
The site you linked to is using an image. The image is the gradient you see, but only 20px wide. The image set as a background image on the body and repeated horizontally.

I believe css3 has support for creating gradients, but for now and the near future we'll be using images for things like this.
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 09-09-2009, 07:37 PM Re: Color Change
chrishirst's Avatar
Missing! presumed drunk.

Posts: 41,517
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
they use a graduated background image.

RC the page, select "Show background image"
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- I SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 09-09-2009, 07:45 PM Re: Color Change
Average Talker

Posts: 24
Name: Ryan
Trades: 0
So there's no way to replicate that using css code?
RJGolf is offline
Reply With Quote
View Public Profile
 
Old 09-09-2009, 07:49 PM Re: Color Change
vangogh's Avatar
Post Impressionist

Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
You can use css3 like I mentioned above, but it won't work in IE yet. If you want the gradient in IE then you're going to use an image or javascript. The image will be much easier.

Here's how you could do it in code for webkit browsers (Safari, Chrome). Mozilla browsers should be similar except you'll use -moz in front instead of -webkit.
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 09-09-2009, 07:54 PM Re: Color Change
Average Talker

Posts: 24
Name: Ryan
Trades: 0
Quote:
Originally Posted by vangogh View Post
You can use css3 like I mentioned above, but it won't work in IE yet. If you want the gradient in IE then you're going to use an image or javascript. The image will be much easier.

Here's how you could do it in code for webkit browsers (Safari, Chrome). Mozilla browsers should be similar except you'll use -moz in front instead of -webkit.
Thanks for the link, although it's very confusing for me.
RJGolf is offline
Reply With Quote
View Public Profile
 
Old 09-09-2009, 08:02 PM Re: Color Change
Average Talker

Posts: 24
Name: Ryan
Trades: 0
Also, is there anyway to make a nav bar like that without Photoshop?
RJGolf is offline
Reply With Quote
View Public Profile
 
Old 09-09-2009, 08:10 PM Re: Color Change
chrishirst's Avatar
Missing! presumed drunk.

Posts: 41,517
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
You mean the navigation that is all in HTML, CSS and text with just one very small background image? (which isn't actually necessary).

And BTW there are far more image editors than Adobe Photo Shop.
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- I SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 09-09-2009, 08:14 PM Re: Color Change
Average Talker

Posts: 24
Name: Ryan
Trades: 0
Yes, I guess how would I recreate a similar nav bar?
RJGolf is offline
Reply With Quote
View Public Profile
 
Old 09-10-2009, 08:08 AM Re: Color Change
chrishirst's Avatar
Missing! presumed drunk.

Posts: 41,517
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
you could use a floated list, or floated divs in a container with a background colour.

or simply set the <a>nchor elements to display:block and float them in a container
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- I SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 09-10-2009, 08:25 AM Re: Color Change
chrishirst's Avatar
Missing! presumed drunk.

Posts: 41,517
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
A very quick example -> http://www.modtalk.co.uk/_site/demos/menu/horizontal/
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- I SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Reply     « Reply to Color Change
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.50385 seconds with 12 queries