Ho provato molto per il gradiente di testo. Ho trovato il codice per Safari e Chrome ma non è compatibile con altri browser. Voglio farlo funzionare senza usare l'immagine di sfondo. Se avete una soluzione adeguata, fornite gentilmente.Gradiente di testo cross browser in puro css senza utilizzare l'immagine di sfondo
È possibile farlo con i plugin jQuery.
Anche il plug-in Cufon potrebbe averlo, dovresti verificarlo. Potrebbe anche essere fatto con il plug-in Raphael o SVG e VML ma è difficile trovare una soluzione cross-browser CSS pura.
Solo per Chrome e Safari:
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
Per il resto dei browser si devono utilizzare alcuni JavaScript.
\t <style type="text/css">
\t \t h1 {
\t \t \t font-family: "Myriad Pro", sans-serif;
\t \t \t font-size: 40px;
\t \t \t font-weight: normal;
\t \t }
\t \t
\t \t /* --- start of magic ;-) --- */
\t \t .white-gradient {
\t \t \t position: relative;
\t \t }
\t \t .white-gradient:after {
\t \t \t content: '';
\t \t \t display: block;
\t \t \t position: absolute;
\t \t \t top: 0;
\t \t \t left: 0;
\t \t \t height: 100%;
\t \t \t width: 100%;
\t \t \t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0);
\t \t \t background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));
\t \t \t background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
\t \t \t background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
\t \t \t background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
\t \t \t background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
\t \t \t background: linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
\t \t }
\t \t /* --- end of magic ;-) --- */
\t </style>
\t
\t <h1 class="white-gradient">Pure CSS text gradient without any graphics</h1>Dovresti sottolineare che funziona solo su sfondi bianchi, ottima soluzione però! –
Non solo bianco, dato che puoi cambiare i colori nel css fornito. Tuttavia, il colore sfumato deve essere lo stesso, come il colore dello sfondo del testo. –
Commentando il tipo di una vecchia domanda, ma esiste un modo per nascondere quello sfondo bianco? – Rvervuurt
ho trovato il modo migliore per farlo è quello di utilizzare i gradienti SVG, è facile da fare e non richiede alcuna immagini, di seguito è un codice che crea un semplice gradiente testo utilizzando SVG.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FF6600;stop-opacity:1" />
<stop offset="100%" style="stop-coloR:#FFF000;stop-opacity:1" />
</linearGradient>
</defs>
<text fill="url(#grad1)" font-size="60" font-family="Verdana" x="50" y="100">
SVG Text Gradient</text>
</svg>È possibile modificare il valori x e y per creare un gradiente orizzontale/verticale o diagonale, è anche possibile applicare stili ad esso utilizzando un foglio di stile CSS, tutto quello che serve è una linea aggiuntiva di codice tra i tag defs.
<link href="style.css" type="text/css" rel="stylesheet"
xmlns="http://www.w3.org/1999/xhtml"/>
Questo metodo funziona nelle ultime versioni di Chrome, IE, Firefox e Safari. Puoi anche applicare sfumature radiali, sfocature e filtri, per ulteriori informazioni vai su W3 Schools.
+1 una soluzione completa, cross-browser, con testo dinamico e design indipendente. – dakab
Il collegamento è morto. Hai qualche alternativa? Inoltre, cos'è il "plugin cufon"? – dakab