I’m trying to create a gradient using variables, but I am getting an error.
This is what I’m trying to use:
background: rgb($brand-blue); /* Old browsers */
background: -moz-linear-gradient(left, rgba($brand-blue,1) 0%, rgba($brand-green,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba($brand-blue,1) 0%,rgba($brand-green,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba($brand-blue,1) 0%,rgba($brand-green,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$brand-blue', endColorstr='$brand-green',GradientType=1 ); /* IE6-9 */
any ideas how to get round this?
Admittedly I know nothing about css preprocessors, but it seems to work if you do it this way.
background: linear-gradient(to right, $brand-blue 0%, $brand-green 100%);
Since you were using full opacity, no need for rgba, and I would probably make life easier and lose the fall-backs, maybe just keep the plain colour one as a token gesture.
If you need rgba then you could break it down like this:
background: linear-gradient(to right, rgba($brand-bluer, $brand-blueg, $brand-blueb,0.5) 0%,rgba($brand-greenr,$brand-greeng, $brand-greenb,0.5) 100%);
The way I did it worked with RGBA too, that wasn’t an issue. I only removed it and mentioned it because it seemed pointless in this instance where both had an A value of 1.
Yes, I realised that you could do that if you don’t mind hard coding the transparency (which I assumed was to be separate as it may change for various elements etc).
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.