Có thể cắt bỏ hiệu ứng văn bản như thế này chỉ bằng CSS/CSS3 không?

Question

Có thể cắt bỏ hiệu ứng văn bản như thế này chỉ bằng CSS/CSS3 không? hoặc hình ảnh là lựa chọn duy nhất để có được hiệu ứng này.

Answer 1

này nên làm việc:
Dưới đây là một mẹo nhỏ tôi đã khám phá bằng cách sử dụng :before và :after giả yếu tố:

http://dabblet.com/gist/1609945

Answer 2

Bạn có thể sử dụng các kiểu chữ-shadow để thiết lập một cái bóng ở góc trên bên trái. Nó sẽ trông gần với những gì bạn đang tìm kiếm, nhưng theo như tôi biết không có cách nào để làm chính xác những gì bạn đang tìm kiếm trong CSS/CSS3

Answer 3

text-shadow là bạn của bạn. See this page cho nhiều ví dụ về những gì bạn có thể đạt được với nó. Ví dụ # 8 có vẻ đầy hứa hẹn.

Answer 4

gì bạn thực sự cần cho rằng hiệu ứng đặc biệt là inset:

text-shadow: inset #000 0 0 0.10em; /* THIS DOESN'T WORK */ 

Unfortunately: "< bóng > cũng giống như định nghĩa cho 'chiếc hộp-bóng' bất động sản ngoại trừ các từ khoá 'inset' không phải là được phép. "

Answer 5

Có bạn có thể đạt được hiệu ứng này với CSS và văn bản, nhưng hơi điên rồ. Về cơ bản, bạn tạo ra một loạt các gradient màu xám và tuyến tính css3 có độ mờ bằng không và cẩn thận định vị chúng trên văn bản của bạn. Nhưng bạn nên làm điều này trong photoshop.

Answer 6

Một slightly softer way của việc sử dụng các giả yếu tố Web_Designer đề cập:

.depth { 
    display: block; 
    padding: 50px; 
    color: black; 
    font: bold 7em Arial, sans-serif; 
    position: relative; 
} 

.depth:after { 
    text-shadow: rgba(255,255,255,0.2) 0px 0px 1.5px; 
    content: attr(title); 
    padding: 50px; 
    color: transparent; 
    position: absolute; 
    top: 1px; 
    left: 1px; 
} 

Đơn giản hơn một chút - để có được vành mềm e trầm cảm bạn sử dụng các văn bản bóng của: sau khi giả và làm cho nó minh bạch, hơn là sử dụng hai pseudos. Đối với tâm trí của tôi, nó trông sạch hơn rất nhiều - nó có thể làm việc ở kích thước lớn hơn nhiều. Tôi không biết nó nhanh như thế nào, mặc dù có thể bạn sẽ sử dụng văn bản bóng tối một cách tiết kiệm.

Answer 7

Tôi thấy điều này http://jsfiddle.net/NeqCC/

Nó hỗ trợ nền trắng và chữ màu tối

Tất cả tín dụng đi vào tác giả

HTML

<!-- 
CSS3 inset text-shadow trick 
Written down by Jyri Tuulos 
http://about.me/jyrituulos 

Effect originally found at http://timharford.com/ 
All credits for originality go to Finalised Design (http://finalisedesign.com/) 

Note that this trick only works for darker text on solid light background. 
--> 
<h1 class="inset-text">Inset text-shadow trick</h1> 

CSS

body { 
    /* This has to be same as the text-shadows below */ 
    background: #def; 
} 
h1 { 
    font-family: Helvetica, Arial, sans-serif; 
    font-weight: bold; 
    font-size: 6em; 
    line-height: 1em; 
} 
.inset-text { 
    /* Shadows are visible under slightly transparent text color */ 
    color: rgba(10,60,150, 0.8); 
    text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def; 
} 
/* Don't show shadows when selecting text */ 
::-moz-selection { background: #5af; color: #fff; text-shadow: none; } 
::selection { background: #5af; color: #fff; text-shadow: none; }