Adobe Community: Gradient color help

Currently Being Moderated

1. Zabeth69,

Jul 15, 2012 7:05 PM in reply to BcSurvivor08

Report

This, according to Louis Lazaris:

http://www.impressivewebs.com/css3-linear-gradient-syntax/

view plain ?

#element {
background: -moz-linear-gradient(black, white); /* FF 3.6+ */
background: -ms-linear-gradient(black, white); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(black, white); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */
background: linear-gradient(black, white); /* the standard */
}

I note that Louis does not use "background-image" but just "background".

Beth

|

Mark as:

Currently Being Moderated

2. Nancy O.,

Jul 16, 2012 10:58 AM in reply to BcSurvivor08

Report

For future reference, bookmark this gradient generator. It creates the necessary code for you.

http://www.colorzilla.com/gradient-editor/

Nancy O.

|

Mark as:

Currently Being Moderated

3. BcSurvivor08,

Jul 16, 2012 1:36 PM in reply to Nancy O.

Report

Thank you, I've made progress with your help, but everything in the "container" div isn't white. I've got my css like this:

#outer {
margin:10px auto;
width:1005px;
    background: -moz-linear-gradient(top, #FFFFFF 14%, #1b75bc 60%); /* FF 3.6+ */
    background: -ms-linear-gradient(top, #FFFFFF 14%, #1b75bc 60%); /* IE10 */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #1b75bc)); /* Safari 4+, Chrome 2+ */
    background: -webkit-linear-gradient(top, #FFFFFF 14%, #1b75bc 60%); /* Safari 5.1+, Chrome 10+ */
    background: -o-linear-gradient(top, #FFFFFF 14%, #1b75bc 60%); /* Opera 11.10 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#1b75bd'); /* IE6 & IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#1b75bc')"; /* IE8+ */
    background: linear-gradient(top, #FFFFFF 14%, #1b75bc 60%); /* the standard */
}

#container {
width: 965px;
background-color: #ffffff;
margin: 0 auto;
}

but this doesnt work.

Here is the newly uploaded page: http://www.liquidatorwarehouse.com/boards.html

Thanks for your help!!

|

Mark as:

Currently Being Moderated

4. Nancy O.,

Jul 16, 2012 1:47 PM in reply to BcSurvivor08

Report

Not too sure what effect you're going for.

Do you have a screenshot?

Nancy O.

|

Mark as:

Currently Being Moderated

5. BcSurvivor08,

Jul 16, 2012 3:18 PM in reply to Nancy O.

Report

This is the top section of the page Im trying to duplicate

This is the bottom half:

|

Mark as:

Currently Being Moderated

6. Nancy O.,

Jul 17, 2012 11:58 AM in reply to BcSurvivor08

Report

Copy & Paste this into a new, blank page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">

#outer {
margin:10px auto;
width:1000px;
background: -moz-linear-gradient(top, #FFFFFF 14%, #1b75bc 60%); /* FF 3.6+ */ 
background: -ms-linear-gradient(top, #FFFFFF 14%, #1b75bc 60%); /* IE10 */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #1b75bc)); /* Safari 4+, Chrome 2+ */ 
background: -webkit-linear-gradient(top, #FFFFFF 14%, #1b75bc 60%); /* Safari 5.1+, Chrome 10+ */ 
background: -o-linear-gradient(top, #FFFFFF 14%, #1b75bc 60%); /* Opera 11.10 */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#1b75bd'); /* IE6 & IE7 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#1b75bc')"; /* IE8+ */ 
background: linear-gradient(top, #FFFFFF 14%, #1b75bc 60%); /* the standard */ 
} 

#header {min-height: 100px; border:1px dotted red;}

#inner {
width: 920px;
background-color: #FFF;
margin: 0 auto;
padding:12px;
}

#footer {text-align:center; padding: 8px;}

</style>
</head>

<body>
<div id="outer">
<div id="header"> HEADER </div>

<div id="inner">
<p>INNER</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel sollicitudin lorem. Mauris a lectus ut nisi bibendum eleifend vitae sed sapien? Suspendisse imperdiet ultricies dui, feugiat condimentum lacus ultrices eget. Vivamus bibendum dolor vel justo pellentesque eget lobortis tortor convallis. </p>
<p>Nam vel leo non felis gravida faucibus sit amet sit amet elit. Etiam facilisis leo in augue malesuada ut faucibus arcu vulputate. Morbi a metus quis ipsum varius adipiscing. In hac habitasse platea dictumst. Phasellus sit amet orci ac magna elementum elementum et a ante. Vestibulum auctor elementum enim. Cras ultrices consectetur felis vitae lacinia. Etiam iaculis dolor nec enim egestas ultrices. In hac habitasse platea dictumst. Aenean at eros turpis, et semper dui. </p>
<p>Quisque facilisis ultricies semper. Phasellus commodo adipiscing congue. Donec eget elit mi, ut lobortis mi. Sed at magna urna, id fermentum purus! Vivamus fermentum molestie rhoncus. Nunc felis magna, interdum eu sodales ut, feugiat in nisl. Aenean vitae odio magna, id aliquet dui. Etiam lobortis enim sit amet ligula pharetra eu scelerisque tortor placerat. Proin pharetra velit massa, id suscipit nisl. Vivamus sollicitudin quam ac dui imperdiet in blandit erat cursus? In varius, urna quis molestie ultrices, velit leo malesuada ligula, quis molestie velit diam sit amet dui. Aenean eu tellus in leo congue gravida et ut erat. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum nisi nisl, blandit at accumsan vel, rutrum ut odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet suscipit luctus? Aliquam in. </p>
</div>

<div id="footer"> FOOTER</div>

<!--end outer--></div>
</body>
</html>

Nancy O.

|

Mark as:

Currently Being Moderated

7. Al Sparber,

Jul 17, 2012 12:03 PM in reply to Nancy O.

Report

Hi Nancy,

Just a quick not that may or may not be relevant to what the user wants

to accomplish...

Using Direct X filters in IE9 will tend to kill standards based effects

such as border-radius. IE10, on the other hand, has full support for all

CSS3 standards.

--

Al Sparber - PVII

http://www.projectseven.com

Dreamweaver Menus | Galleries | Widgets

|

Mark as:

Currently Being Moderated

8. BcSurvivor08,

Jul 17, 2012 3:04 PM in reply to Nancy O.

Report

Nancy, that made progress, but still not quite there. Here is how I integrated the css you supplied above:

#outer {
margin:10px auto;
width:1010px;
background: -moz-linear-gradient(top, #FFFFFF 14%, #1b75bc 60%); /* FF 3.6+ */
background: -ms-linear-gradient(top, #FFFFFF 14%, #1b75bc 60%); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #1b75bc)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(top, #FFFFFF 14%, #1b75bc 60%); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(top, #FFFFFF 14%, #1b75bc 60%); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#1b75bd'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#1b75bc')"; /* IE8+ */
background: linear-gradient(top, #FFFFFF 14%, #1b75bc 60%); /* the standard */
}

#header {min-height: 100px; background:#ffffff;}

#container {
width: 965px;
background-color: #FFF;
margin: 0 auto;

}

And here is the updated page: http://www.liquidatorwarehouse.com/boards.html

The gradient color is still showing up inside the container. I dont understand why if I have a container div with background as white, why isnt everything inside that div on a white background. Makes no sense to me.......

Thanks so much for helping me with this!!!

|

Mark as:

Dreamweaver

Gradient color help

Jul 15, 2012 6:39 PM

More Like This

Bookmarked By (0)

Answers + Points = Status