Go Back   Forums > Community Chatterbox > Tech Corner > Programming
Memberlist Forum Rules Search Today's Posts Mark Forums Read
Search Forums:
Click here to use Advanced Search

Reply
 
Thread Tools Display Modes
Old 02-04-2011, 06:50 PM   #1
wackypanda
Abandonia nerd

 
Join Date: Jan 2011
Location: ,
Posts: 51
Default Creating a gradient in CSS

More hack student coding incoming.

I need to create a gradient background using CSS without using background-image. Right now that's being handled with this:
Code:
html{
	background: #e8e8e8; /* fallback for non-support */
	background: -webkit-gradient(linear, left bottom, left top, from(#e8e8e8), to(#8c8c8c)); /* Safari and Chrome */
	background: -moz-linear-gradient(top, #8c8c8c, #e8e8e8); /* Firefox 3.6+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8c8c8c', endColorstr='#e8e8e8'); /* IE8 */
	}
body, #header, #footer {
	width: 720px;
	}
body {
	padding: 10px 10px 10px 10px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 15px;
	-moz-border-radius: 15px; /* Firefox */
	background-color: #ffffff;
	}
The body selector is included because IE won't display its white background over the html background with this code, which is one of the main things I need to resolve. The other is the general sense of hackery. I don't know if there's a cure for that though.

Thanks in advance.
wackypanda is offline                         Send a private message to wackypanda
Reply With Quote
Old 06-04-2011, 10:29 PM   #2
_r.u.s.s.
I'm not Russ
but an ex-alektorophobic
 
_r.u.s.s.'s Avatar


 
Join Date: May 2005
Location: Nitra, Slovakia
Posts: 6,533
Default

a word of advice from an experienced user: don't

1 x n pngs are very cheap in size. it's not worth the trouble
__________________
_r.u.s.s. is offline                         Send a private message to _r.u.s.s.
Reply With Quote
Old 09-04-2011, 04:42 AM   #3
wackypanda
Abandonia nerd

 
Join Date: Jan 2011
Location: ,
Posts: 51
Default

It was an assignment requirement, and CSS cleanliness was not. I would never make a serious website like that.

Well, it's been graded, and I didn't do as well as I'd hoped. In hindsight, I could have combined all the background images into one image file with a transparent background and used background-position. That would be murder to load though. Better luck next time, I guess.

Thanks for taking the time to reply.
wackypanda is offline                         Send a private message to wackypanda
Reply With Quote
Old 12-04-2011, 06:25 PM   #4
Japo
Autonomous human
 
Japo's Avatar


 
Join Date: Mar 2006
Location: ,
Posts: 4,613
Default

I just heard that the latest version of some browsers support CSS3, which includes gradients:

http://www.dynamicdrive.com/style/cs...ear_gradients/

I don't know a lot about CSS but it seems there wasn't any satisfactory solution before. But I don't know if IE supports CSS3--Chrome, Firefox, Opera and Safari reportedly do.
__________________
Life starts every day anew. Prospects not so good...
Japo is offline                         Send a private message to Japo
Reply With Quote
Old 12-04-2011, 11:35 PM   #5
Ohne Mitleid
Brazen Pangolin
 
Ohne Mitleid's Avatar


 
Join Date: Dec 2010
Location: ,
Posts: 202
Default

Quote:
Originally Posted by Japo View Post
I just heard that the latest version of some browsers support CSS3, which includes gradients:

http://www.dynamicdrive.com/style/cs...ear_gradients/

I don't know a lot about CSS but it seems there wasn't any satisfactory solution before. But I don't know if IE supports CSS3--Chrome, Firefox, Opera and Safari reportedly do.
http://msdn.microsoft.com/en-us/ie/ff468705#_CSS3
IE9 ambiguously claims they offer "more support" for CSS3... pfffft!
Ohne Mitleid is offline                         Send a private message to Ohne Mitleid
Reply With Quote
Old 13-04-2011, 03:15 PM   #6
wackypanda
Abandonia nerd

 
Join Date: Jan 2011
Location: ,
Posts: 51
Default

Support for CSS3 never seems to be total. I didn't use the official syntax for gradients because none of my browsers (Firefox 3.6.16, IE8, forgot which Chrome) actually supported it, although Firefox and Chrome did have their own syntax for gradients. The other CSS3 property I wound up using was border-radius, which Chrome supports the official syntax for but Firefox 3.6+ and IE8 don't.

Hence the "more support" nonsense.
wackypanda is offline                         Send a private message to wackypanda
Reply With Quote
Reply


Similar Threads
Thread Thread Starter Forum Replies Last Post
Creating a DOS 6.22 install CD Doink Tech Corner 10 30-01-2014 06:06 PM
Need Help Creating CD-ROM Rip Expack2 Tech Corner 9 27-10-2010 08:40 AM
Creating Your Own Brushes. Sean Art Tutorials 9 07-10-2005 05:16 PM
Creating Your Own Patterns Sean Art Tutorials 0 03-10-2005 06:25 PM

Thread Tools
Display Modes

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
Forum Jump
 


The current time is 09:36 AM (GMT)

 
Powered by vBulletin® Version 3.7.1
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.