khanh khanh - 1 year ago 98
HTML Question

Gradient from transparent to color in CSS

My Boss give me an image (please see below) and told him I would make his site look the same. Here is my code, but it doesn't look like the image:

HTML

<div class="clearfix" id="footer">
<ul>
<li><a href="/pages/facility">Become a Virtual Active Facility</a></li>
<li><a href="/pages/about">About Us</a></li>
<li class="last"><a href="/pages/contact">Contact</a></li>
</ul>
</div>


CSS

#footer {
background: -moz-linear-gradient(left center, white, white) repeat scroll 0 0 transparent;
margin-bottom: 25px;
margin-top: 25px;
opacity: 0.6;
padding: 10px 25px;
width: 914px;
}


alt text

How can I get the result to look the same?

Answer Source

Your gradient is defined as going from 'white' to 'white'. In other words, there is no gradient.

In the final 2014 syntax:

background-image: linear-gradient(to right, transparent, white);

Note that prefixed versions (moz-, webkit-, o-, etc) use a different syntax, for backwards compatibility.