Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Gradient from transparent to color in CSS

Tags:

html

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?

like image 380
khanh Avatar asked Nov 30 '22 17:11

khanh


1 Answers

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.

like image 189
Peter Avatar answered Dec 09 '22 17:12

Peter