2011-12-05 44 views
11

Tôi đã có một chút nhìn xung quanh và không thể tìm thấy bất cứ điều gì về điều này.văn bản css gradient

Nếu tôi có đoạn văn bản, có cách nào, có thể với CSS3 để dần dần thay đổi màu của văn bản khi nó đi xuống trang? thay vì cách mà gradient thực hiện nó, bởi vì điều đó chỉ thực hiện trên từ chứ không phải toàn bộ đoạn văn bản.

Vì vậy, tôi muốn một số văn bản bắt đầu trắng và sau đó mờ dần thành màu đen khi nó đến cuối đoạn văn.

Tôi thực sự không chắc chắn nó có thể được thực hiện ... Có lẽ có một kịch bản java có thể làm điều đó.

Cảm ơn.

Trả lời

9

Bạn có thể làm điều đó bằng CSS nhưng nó sẽ chỉ làm việc trong các trình duyệt webkit (Chrome và Safari): http://jsfiddle.net/joshnh/DphXz/

+1

Thật đáng kinh ngạc .... Nhưng thật đáng tiếc khi chỉ có trình duyệt webkit của nó .... Tôi tự hỏi liệu có bất kỳ công việc nào cho IE và firefox không !? cảm ơn vì điều đó. – ragebunny

+0

Hy vọng rằng các trình duyệt khác sẽ bắt đầu triển khai các tính năng này, nhưng cho đến lúc đó nó chỉ là một trang web không may. – joshnh

1

tôi đã có thể làm điều gì đó tương tự trong css tinh khiết, tuy nhiên, nó không hoạt động trong IE, vì nó không hỗ trợ bất động sản hỗn hợp-pha trộn chế độ css: http://caniuse.com/#feat=css-mixblendmode

Mã đoạn mã bên dưới. Hy vọng nó sẽ giúp ai đó.

<html> 
<head> 
<style> 
.gradient { 
    position: relative; 
    content: ''; 
    display: block; 
    width: 260px; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(140,198,63,1)), color-stop(100%, rgba(30,71,146,1))); 
    background: -webkit-linear-gradient(left, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%); 
    background: -moz-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%); 
    background:  -ms-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%); 
    background:  -o-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%); 
    background:   linear-gradient(to right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%); 
} 
.gradient p { 
    color: #000; 
    background: #fff; 
    mix-blend-mode: lighten; 
} 
</style> 
</head> 
<body> 
    <div class="gradient"> 
     <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
    </div> 
</body> 
</html> 
Các vấn đề liên quan