Background -> text

[bruno-]

Ecco il css che ho attribuito spensieratamente al mio compare h1

h1
{
font-family: kaushan_scriptregular;
background:-moz-linear-gradient(0% 100% 89deg, #866400, #FF4E28 100%)
 -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

*/ chiude gli occhi a mo' di mistero /*

Il punto è che non funzica :/
La scritta rimane grigia (come definito in body{}

Si può fare qualcosa? E per la compatibilità? Si può scegliere un colore alternativo nel caso di mancata compatibilità?

Mi viene in mente adesso che potrei adoperare "!importantissimo", ma non so dove (dato che non vedo "text-colour" nelle definizioni di h1.


A voi esperti.

[tampertools]

background:-moz-linear-gradient(0% 100% 89deg, #866400, #FF4E28 100%)
Questo non funziona su webkit



-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
Questi funzionano solo su webkit

Quindi inizia a mettere a posto i prefissi

[bruno-]

background:-moz-linear-gradient(0% 100% 89deg, #866400, #FF4E28 100%)
Questo non funziona su webkit



-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
Questi funzionano solo su webkit

Quindi inizia a mettere a posto i prefissi

Uh grazie, ma che son i prefissi? :gratta:

[tampertools]

-webkit-, -moz-, ecc...
Cerca su internet quali di quelle proprietà vano "prefixate".
Di sicuro devi aggiungere questo:
background:-webkit-linear-gradient(0% 100% 89deg, #866400, #FF4E28 100%);

E poi aggiungi anche tutto senza prefissi

[bruno-]

-webkit-, -moz-, ecc...
Cerca su internet quali di quelle proprietà vano "prefixate".
Di sicuro devi aggiungere questo:
background:-webkit-linear-gradient(0% 100% 89deg, #866400, #FF4E28 100%);

E poi aggiungi anche tutto senza prefissi

Conosci un editor per questo?

Edit:

background: #866400;
background: -moz-linear-gradient(top,  #866400 0%, #ff4e28 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#866400), color-stop(100%,#ff4e28));
background: -webkit-linear-gradient(top,  #866400 0%,#ff4e28 100%);
background: -o-linear-gradient(top,  #866400 0%,#ff4e28 100%);
background: -ms-linear-gradient(top,  #866400 0%,#ff4e28 100%);
background: linear-gradient(to bottom,  #866400 0%,#ff4e28 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#866400', endColorstr='#ff4e28',GradientType=0 );

[bruno-]

Non è risolto:


Il codice stesso risulterà solo così:
http://pkspritesearch.altervista.org/hi1-index.phpHo letto un articolo che implementava l'utilizzo di

 -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

In un altro articolo invece spiegavano che nei browsers senza webkit, il codice da me postato sopra non funzionerà mai.
Allora ri ricorre a ciò:

text { fill: url(#wood); }

Nell'esempio si riempiva una scritta con un'immagine... Ora devi aiutarmi a riempire il testo con un gradient :/

[tampertools]

Non ho mai usato questa proprietà, ma penso che si possa usare

 fill: linear-gradient(...);

Con tutti i prefissi.

Conosci un editor per questo?

Io uso l'editor Adobe Brackets con il plugin autoprefixer (che sistema tutto quando salvo)

[bruno-]

Non ho mai usato questa proprietà, ma penso che si possa usare

 fill: linear-gradient(...);

Con tutti i prefissi.

Ovviamente è una proprietà inesistente, ergo non funziona.

Io uso l'editor Adobe Brackets con il plugin autoprefixer (che sistema tutto quando salvo)

Io dispongo solo di PS :/