Próbowałem dużo dla gradientu tekstu. Znalazłem kod safari i chrome, ale nie jest on zgodny w innych przeglądarkach. Chcę, aby działało bez użycia obrazu tła. Jeśli masz jakieś właściwe rozwiązanie, uprzejmie dostarcz.Gradient tekstu w przeglądarce w czystym css bez użycia obrazu tła
Możesz to zrobić z wtyczkami jQuery.
Wtyczka Cufon też może mieć, powinieneś to sprawdzić. Można to również zrobić za pomocą wtyczki Raphael lub SVG i VML, ale trudno znaleźć proste rozwiązanie CSS dla różnych przeglądarek.
Tylko dla Chrome i 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)));
Dla reszty przeglądarek trzeba użyć trochę 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>Powinieneś zauważyć, że działa to tylko na białym tle, to świetne rozwiązanie! –
Nie tylko biały, ponieważ można zmienić kolory w dostarczonym css. Jednak kolor gradientu musi być taki sam, jak kolor tła tekstu. –
Komentowanie pewnego rodzaju starego pytania, ale czy istnieje sposób na ukrycie tego białego tła? – Rvervuurt
mogę znaleźć najlepszy sposób, aby to zrobić jest użycie gradienty SVG, to jest łatwe do zrobienia i nie wymaga żadnych obrazów, poniżej jest jakiś kod, który tworzy prosty gradientu tekstu za pomocą 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>Można zmienić wartości X i Y, aby utworzyć gradient poziomy/pionowy lub ukośny, można również zastosować style do niej przy użyciu stylów CSS, wszystko to odbywa się dodatkowy wiersz kodu między tagami defs.
<link href="style.css" type="text/css" rel="stylesheet"
xmlns="http://www.w3.org/1999/xhtml"/>
Ta metoda działa w najnowszych wersjach Chrome, IE, Firefox i Safari. Możesz również zastosować gradienty radialne, rozmycia i filtry, aby uzyskać więcej informacji, przejdź do W3 Schools.
+1 Dokładne, wieloprzeglądowe, dynamiczne i niezależne od projektu rozwiązanie. – dakab
Link nie działa. Czy masz jakąś alternatywę? Co to jest "wtyczka cufon"? – dakab