Làm cách nào để kết hợp bóng văn bản CSS và "nền-hình ảnh: -webkit-gradient"

Question

Tôi đang cố gắng đạt được hiệu ứng đổ bóng + văn bản trong Chrome/Safari bằng cách sử dụng bóng văn bản CSS và kết hợp văn bản bóng và background-image: -webkit-gradient, xem ví dụ blw. Tôi chỉ có thể làm cho một trong những hiệu ứng được áp dụng (nếu tôi thêm cái bóng gradient biến mất. Tôi đang làm gì sai?

h1 { 
font-size: 100px; 
background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black)); 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent; 
text-shadow: 0 1px 1px #fff; 
} 

Answer 1

Gradient "biến mất" vì text-shadow là về mặt kĩ trên nền.

1. Các văn bản (đó là trong suốt)
2. Cái bóng
3. nền.

Chúng tôi có thể làm việc này bằng cách sao chép văn bản và đặt nó bên dưới layer gốc, sau đó áp dụng cái bóng đó, for example:

h1 { 
    position: relative; 
    font-size: 100px; 
    text-align: center; 
    } 

    h1 div { 
    background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    position: absolute; 
    width: 100%; 
} 
    h1:after { 
    text-shadow: 10px 10px 11px #fff; 
    color: transparent; 
    } 

    #hello:after { 
     content: 'Hello World'; 
    } 

<h1 id="hello"><div>Hello World</div></h1> 

Answer 2

Câu trả lời này cũng tương tự như câu trả lời bằng cách @KennyTM trên, ngoại trừ câu trả lời của anh ta có bóng cứng được mã hóa thành CSS, không phù hợp với văn bản động như trong CMS. Ngoài ra, phương pháp của anh ta đòi hỏi một ID riêng cho mỗi cá thể, điều này sẽ rất tẻ nhạt nếu bạn định sử dụng hiệu ứng này rất nhiều. Ví dụ dưới đây sử dụng một lớp thay thế và cho phép văn bản động.

Hãy thử điều này:

h1 { 
    position: relative; 
    font-size: 100px; 
    text-align: center; 
} 

h1 div { 
    background-image: -webkit-gradient(linear, left top, left bottom, from(teal), to(black)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    position: absolute; 
    width: 100%; 
} 
h1:after { 
    text-shadow: 2px 2px 2px #000000; 
    color: transparent; 
} 

.gradient-shadow:after { 
    content: attr(title); /* Pulls the text from the 'title' attribute to make the shadow */ 
} 

Và rồi trong HTML của bạn:

<h1 class="gradient-shadow" title="Hello World"><div>Hello World</div></h1> 

Chỉ cần chắc chắn rằng các văn bản trong <div> phù hợp với văn bản trong các thuộc tính title.

Với một số định dạng bổ sung (tôi sử dụng Helvetica Neue siêu nhẹ và một nền tối), bạn có thể nhận được một cái gì đó ảnh hưởng như thế này: http://cl.ly/image/2C0k0I3W271D

Answer 3

Khi không có các yếu tố đánh dấu HTML hoặc giả có thêm bạn có thể đạt được hiệu ứng này sử dụng bộ lọc thuộc tính và chức năng đổ bóng. Phương pháp này cũng hoạt động với hình nền và độ dốc.

h1 { 
    font:54px 'Open Sans', 'Helvetica', Arial, sans-serif; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#787878), to(#484848)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    -webkit-filter: drop-shadow(2px 2px #333); 
      filter: drop-shadow(2px 2px #333); 
} 

Fiddle: https://jsfiddle.net/eywda89g/