2014-12-18 23 views
5

क्या एक पुरानी धारीदार पाठ-छाया प्रभाव प्राप्त करने के लिए एक साफ और सुरुचिपूर्ण तरीका है?सीएसएस केवल धारीदार पाठ-छाया प्रभाव

आपको एक उदाहरण देता करने के लिए, मैं इस तरह सीएसएस कुछ के साथ पुन: पेश करना चाहते हैं:

enter image description here

मैं चाहता धारियों फ़ॉन्ट से एक अलग रंग का हो सकता है।

+0

मुझे शक है तो आप आसानी से सीएसएस में ऐसा कर सकते हैं, एसवीजी एक विकल्प नहीं है कर रहे हैं? –

+0

हां, एसवीजी निश्चित रूप से स्वागत है। – Aranel

+0

@ImagineWebDesign मैं अगर यह सीएसएस-केवल (और अधिक सुरुचिपूर्ण और कुशल समाधान) के माध्यम से लागू करने के लिए संभव हो नहीं है, एसवीजी के बाहर की कोशिश कर रहा में रुचि होगी। – Aranel

उत्तर

2

http://jsfiddle.net/kntz6h01/2/

यह निकटतम मैं के साथ आ सकता है, लेकिन यह केवल वेबकिट ब्राउज़रों के साथ काम करता है और पाठ-छाया की लंबाई के मामले में बहुत अनुकूलन योग्य नहीं है। टेक्स्ट को डुप्लिकेट करने के लिए टैग में एक विशेषता की भी आवश्यकता होती है।

मूल रूप से यह, -webkit-repeating-linear-gradient के साथ एक धारीदार पृष्ठभूमि बनाने

-webkit-background-clip: text; 
-webkit-text-fill-color: transparent; 

के साथ पृष्ठभूमि बाहर मास्किंग और :after छद्म तत्व के साथ पाठ की प्रतिलिपि और इसे करने के लिए एक पाठ-छाया लागू किया जाता है।

शायद यह बहुत उपयोगी नहीं है।

+1

Thats क्या मैं क्या करने जा रहा था, लेकिन यह केवल वेबकिट में समर्थित है:/ –

+0

हाँ, यह प्रदर्शन कैसे unpowerful सीएसएस है अवधारणा का एक सबूत के और अधिक है ... यहां तक ​​कि अगर यह सभी ब्राउज़रों के साथ संगत था, मैं वास्तव में इस का उपयोग कर किसी कल्पना नहीं कर सकते। – szupie

संबंधित मुद्दे