Pirouzfar

linear-gradient funkar inte i Firefox

Jag satt och brottades med att linear-gradient inte fungerade som jag ville i Firefox men fungerade fint i IE och Chrome.
Lösningen var enkel.

Jag ville enkelt åstadkomma en gradient på min text för att indikera att det finns mer att läsa med en läs mer-knapp.

 

Mina regler:

background-image: -webkit-gradient(linear, left 0%, left 50%, from(transparent), to(#ffffff));
  background-image: -webkit-linear-gradient(top, transparent, 0%, #ffffff, 50%);
  background-image: -moz-linear-gradient(top, transparent 0%, #ffffff 50%);
  background-image: linear-gradient(to bottom, transparent 0%, #ffffff 50%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#ffffffff', GradientType=0);


Men jag fick istället en mörk effekt 

Istället för att skicka in transparent så ändrade jag till rgba(255,255,255,0) så fungerade det klockrent

background-image: -webkit-gradient(linear, left 0%, left 50%, from(rgba(255, 255, 255, 0)), to(#ffffff));
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), 0%, #ffffff, 50%);
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 50%);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 50%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffffff', GradientType=0);

Kärleksmetoden - Älska livet!

by Pirouzfar

Kontakta mig

 

Copyright © 2013 Pirouzfar.se