Re: [css-d] Webkit syntax for stopped linear gradient

Tim Dawson Tue, 16 Sep 2014 17:18:25 -0700

Hello Karl,

Thanks. That works, and only differs from my standards version by the addition 
of '-webkit-'


It doesn't seem to matter whether one uses the short-hand 'background' or 
'background-image'.
I was working from a Sitepoint book that was published in 2011, hence all the 
'color-stop' stuff.

It seems that Chrome 37 isn't quite using the W3C standard yet.

I'm all set now, thank you.

Tim

On 17/09/2014 00:42, Karl DeSaulniers wrote:

Hi Tim,
This is what I am using and it has worked so far.
You can change the rgba()'s to your #COLORS if you wish.

background: rgba(249, 249, 249, 0.8);
background: -moz-linear-gradient(top,rgba(249, 249, 249, 0.8) 20%,rgba(215, 
215, 215, 0.8) 60%, rgba(177, 177, 177, 0.9));
background: -webkit-linear-gradient(top,rgba(249, 249, 249, 0.8) 20%,rgba(215, 
215, 215, 0.8) 60%, rgba(177, 177, 177, 0.9));
background: linear-gradient(top,rgba(249, 249, 249, 0.8) 20%,rgba(215, 215, 
215, 0.8) 60%, rgba(177, 177, 177, 0.9));
background: -khtml-linear-gradient(top,rgba(249, 249, 249, 0.8) 20%,rgba(215, 
215, 215, 0.8) 60%, rgba(177, 177, 177, 0.9));
background: -o-linear-gradient(top,rgba(249, 249, 249, 0.8) 20%,rgba(215, 215, 
215, 0.8) 60%, rgba(177, 177, 177, 0.9));
background: filter: 
progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(249, 249, 249, 
0.8)',endColorstr='rgba(177, 177, 177, 0.9)');
background: -ms-filter: 
"progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(249, 249, 249, 
0.8)', endColorstr='rgba(177, 177, 177, 0.9)')";

Also, I think you might be off a smidge.

//background-image:
background:
-webkit-gradient(linear, top, bottom,
  color-stop(0, #1B91FF),
  color-stop(60%, #1B91FF),
  color-stop(60%, #FEC409),
  color-stop(100%, #FEC409)
  );

HTH,

Best,
Karl


On Sep 16, 2014, at 6:36 PM, Tim Dawson <t...@ramasaig.com> wrote:

I'm trying to create a cross-browser stopped linear gradient, but can't get the 
-webkit- syntax right despite the reference books.

The 'gradient' is to have #1B91FF (a blue) in the top 60%, and #FEC409 (a 
yellow) in the bottom 40%. There should be a sharp division between the colours.

For the standards version I've got:

background-image: linear-gradient(top, #1B91FF 60%, #FEC409 60%, #FEC409 100%);

it works perfectly in Firefox (32), but not in Chrome 37 (which I thought it 
should ?)

For the webkit version I've tried several variants on:

background-image:
-webkit-gradient(linear, top, bottom,
  color-stop(0, #1B91FF),
  color-stop(60%, #1B91FF),
  color-stop(60%, #FEC409),
  color-stop(100%, #FEC409)
  );

but it produces nothing (not even a wrong gradient).

I hope my error is only a small one, but can someone put me right, please ?

Regards,

Tim Dawson

--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull  PA66 6BP

01681 700718
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull  PA66 6BP

01681 700718
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Webkit syntax for stopped linear gradient

Reply via email to