khanh khanh - 4 months ago 15
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

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.

Comments