Độ dốc cầu vồng trên văn bản trong CSS

Question

Cách tốt nhất để đạt được thiết kế này trong CSS là gì?

và điều này:

Nhờ sự giúp đỡ của bạn!

Answer 1

Sau đây là cách bạn có thể tạo cơ bản dốc cầu vồng tuyến tính (không tích hợp với văn bản nào):

#grad1 { 
 
    height: 200px; 
 
    background: red; /* For browsers that do not support gradients */ 
 
    background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet); /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet); /* Standard syntax (must be last) */ 
 
}

<div id="grad1"></div>

Hoặc cách khác, bạn có thể sử dụng một trong những máy phát điện gradient (tôi thích this one).

Và đây là sự tích hợp văn bản:

#grad1 { 
 
    background: red; 
 
    background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet); 
 
    background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet); 
 
    background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet); 
 
    background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
    font-size: 20vw; 
 
}

<h1 id="grad1">Fake Text</h1>

phần chính đây là background-clip và text-fill-color tài sản, nhưng hãy sẵn sàng, không phải tất cả các trình duyệt sẽ hỗ trợ nó. Để biết thêm về các mục kiểm tra khả năng tương thích trình duyệt với tên giống gần đáy của trang này:

background-clip

text-fill-color

Answer 2

Tôi có xu hướng sử dụng số gradient generator này. Thêm màu sắc tại các điểm khác nhau và sử dụng tùy chọn xoay.

Nó sẽ tạo CSS cho bạn.

Answer 3

Nếu bạn cần cùng gradient cho một cái gì đó sử dụng văn bản như thế này.

h1 { 
 
    background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
    font-size: 60px; 
 
    line-height: 60px; 
 
}

<h1>100% Unicorn</h1>

Nhưng text-fill màu isn't hỗ trợ trong Internet Explorer. Vì vậy, có lẽ tốt hơn nên sử dụng png hoặc svg trong nền trước.

Answer 4

Trong file CSS:

.rainbow { 
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22)); 

background-image: gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22)); 

color:transparent; 

border: 2px dotted white; 

-webkit-background-clip: text; 

background-clip: text; 

} 

quả