Geek Answers Handbook

Linear gradient does not work in Chrome

After a good search, I was stuck with a linear gradient that works in Firefox but not in Chrome.

I added -webkit- before the linear gradient, as described in one link, but still does not work. I think the problem is in the gradient axis

My code

 <nav class="top_menu"> <ul class="black_high"> <li class="first active"> <a href="#">Home</a> </li> <li> <a href="#">news</a> </li> </ul> </nav> 
 .top_menu ul li.active a::after { position: absolute; bottom: 8px; left: 0; width: 100%; height: 2px; transform:none; content: ''; opacity: 1; background: #fff; background: linear-gradient(left, transparent 0%,#fff 50%,transparent 100%); background: -moz-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%); background: -webkit-gradient(left, transparent 0%,#fff 50%,transparent 100%); }

Creates a fiddle here - http://jsfiddle.net/h2zu5xx2/4/

Any hints / suggestions will do their best. Thanks in advance.

+7
css google-chrome css3 linear-gradients
source share
2 answers

First of all, note that -webkit-gradient was designed by Apple and implemented in 2008 in Webkit-based web browsers (e.g. Safari 4), which has quite a different syntax than the W3C standard:

 -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

For example:

 background: -webkit-gradient(linear, left top, right top, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));

That is why you could not get it to work in your case.

A year later, Mozilla introduced -moz-linear-gradient (starting with Firefox 3.6), which also differs from the old version of Webkit, but then implemented in Webkit under -webkit-linear-gradient :

 -moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+)

However, the standard version of W3C linear-gradient is a quiet, formal syntax for the expression linear-gradient() :

 linear-gradient() = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> ) <side-or-corner> = [left | right] || [top | bottom]

As you can see from your published code, another mistake is the lack of to <side> in the W3C version. Therefore, in your case, it should be:

An example is here .

 background: -webkit-gradient(linear, left top, right top, color-stop(0%, transparent), color-stop(50%,#fff), color-stop(100%,transparent)); /* Chrome, Safari4+ */ background: -webkit-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%); /* Chrome10+, Safari5.1+ */ background: -moz-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%); /* FF3.6+ */ background: linear-gradient(to left, transparent 0%,#fff 50%,transparent 100%); /* W3C */
+14
source share

Use

 background: -webkit-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);

as a similar definition for Mozilla.

0
source share

More articles:


All Articles