CSS Многострочный градиентный текст. -webkit-фон-клип - PullRequest
Новая
       25

CSS Многострочный градиентный текст. -webkit-фон-клип

1 голос
/ 28 января 2012

Я использую CSS для создания градиента моего текста ... Проблема в том, что мой текст многострочный, поэтому градиент не сбрасывается в каждой строке ... весь абзац становится 1 огромным градиентом!Могу ли я получить индивидуальный эффект градиента для каждой строки текста в моем разделителе?Вот мой код: 

<html>
<head>
<style type='text/css'>p.p1 {
    margin: 0.0px 0.0px 0.0px 50.0px; 
    font: 50.0px Helvitica; 
    font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica, Arial', 'Lucida Grande', 'sans-serif'; 
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
    }
</style>
</head>
<body bgcolor='#FFFFFF'>
<div style='word-wrap: break-word;'>
<p class='p1'>
<font face='helvetica' color='#000000'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id vestibulum lectus. Maecenas facilisis orci vitae urna pulvinar cursus. Etiam id laoreet metus. Cras vitae elit ipsum. Donec a sagittis nisi. Sed nec nisi nibh, fringilla fermentum quam. Vestibulum lorem felis, gravida et faucibus ac, ultrices nec lectus.
</font>
</p>
</div>
</body>
</html>

1 Ответ

1 голос
/ 28 января 2012

Я избавился от устаревших тегов и очистил код для вас .. 

p.p1 {
    margin: 0 0 0 50px; 
    font-size: 50px; 
    font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica, Arial', 'Lucida Grande', 'sans-serif'; 
    background: -webkit-repeating-linear-gradient(top, red 0px, blue 60px);
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
    }

Демо

...