2017-12-19 67 views
6

मैं यह पूरा करने के (लाल रंग की पृष्ठभूमि कोई आपत्ति नहीं है) enter image description hereसीएसएस - एक पाठ रूपरेखा के साथ पाठ छाया को जोड़ो?

तो यहाँ है कि मैं क्या मैं पाठ के चारों ओर एक सीमा प्राप्त कर सकते हैं मिल गया है कोशिश कर रहा हूँ लेकिन फिर मैं एक पाठ छाया के साथ संयोजित नहीं कर सकते। .. मैं इसके पास कैसे आ सकता हूं? शायद यह :before :after बयान के साथ कुछ है?

h1, h2 { 
 
    font-family: Chicago; 
 
    font-size: 38px; 
 
    color: #FFFFFF; 
 
    letter-spacing: 1.73px; 
 
    
 
    
 
    
 

 
    /* 
 
    text-shadow: 0 0 5px #000000; 
 
    
 
    THIS WILL GIVE THE TEXT THE SHADOW*/ 
 
    
 
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
 
    /*THIS WILL GIVE THE TEXT THE BORDER*/ 
 
    
 
    /*How can I combine these two?*/ 
 
}
<h1>CSS ZEN GARDEN</h1> 
 
<h1>THE BEAUTY OF CSS DESIGN</h1>

+1

हो सकता है कि यह एक सही जवाब है https://stackoverflow.com/questions/13287164/css3-text-effect-text-outline-and-shadow-effect – maharr

+1

https://jsfiddle.net/kyxrb4bk /? –

उत्तर

1

हो सकता है कि इस समाधान के लिए आप क्या देख रहे है:

h1 { 
 
    -webkit-text-stroke: 1px black; 
 
    color: white; 
 
    text-shadow: 
 
    3px 3px 5px #000, 
 
    -1px -1px 5px #000, 
 
    1px -1px 5px #000, 
 
    -1px 1px 5px #000, 
 
     1px 1px 5px #000; 
 
}
<h1>CSS ZEN GARDEN</h1> 
 
<h1>THE BEAUTY OF CSS DESIGN</h1>

1

this बेला पर एक नजर है। आप -webkit-पाठ-स्ट्रोक का उपयोग करें और फिर आप स्ट्रोक का उपयोग कर सकते हैं और अलग से

h1, h2 { 
 
    font-family: Chicago; 
 
    font-size: 38px; 
 
    color: #FFFFFF; 
 
    letter-spacing: 1.73px; 
 
    -webkit-text-stroke: 1px black; 
 
    }
<h1>CSS ZEN GARDEN</h1> 
 
<h1>THE BEAUTY OF CSS DESIGN</h1>

शैडो करने के लिए है।

1

यह सुनिश्चित नहीं है कि आप यही चाहते हैं, लेकिन X और Y के साथ बस एक और मान जोड़ना -2px पर सेट करना चाहिए।

h1, h2 { 
 
    font-family: Chicago; 
 
    font-size: 38px; 
 
    color: #FFFFFF; 
 
    letter-spacing: 1.73px; 
 
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, -2px -2px 10px black; 
 
}
<h1>CSS ZEN GARDEN</h1> 
 
<h1>THE BEAUTY OF CSS DESIGN</h1>

ध्यान दें कि ऊपर स्निपेट में मैं -2px -2px 10px black जोड़ दिया है जो है -2pxX है, अन्य Y है और पिछले जो 10px है छाया प्रसार है।

1

आपकी तलाश में क्या कुछ है।

h1, h2 { 
 
    font-family: Chicago; 
 
    font-size: 38px; 
 
    color: #FFFFFF; 
 
    letter-spacing: 1.73px; 
 
    
 
    
 
    
 

 
    color: white; 
 
    text-shadow: 1px 1px 2px black, 0 0 5px black, 0 0 5px black; 
 
}
<h1>CSS ZEN GARDEN</h1> 
 
<h1>THE BEAUTY OF CSS DESIGN</h1>

1

कवर लायक सभी ब्राउज़रों के लिए यह एक का प्रयास करें:

h1, h2 { 
 
    font-family: Chicago; 
 
    font-size: 38px; 
 
    color: #FFFFFF; 
 
    letter-spacing: 1.73px; 
 
    
 
    
 
    text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #fff, 1px -1px 0 #000, -1px 1px 0 #000; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */ 
 

 
filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1); /* IE<10 */ 
 

 
}
<h1>CSS ZEN GARDEN</h1> 
 
<h1>THE BEAUTY OF CSS DESIGN</h1>

या

h1, h2 { 
 
    font-family: Chicago; 
 
    font-size: 38px; 
 
    color: #FFFFFF; 
 
    letter-spacing: 1.73px; 
 
    
 
    
 

 
    
 
    -webkit-text-stroke-width: 2px; 
 
    -webkit-text-stroke-color: #000; 
 

 

 
}
<h1>CSS ZEN GARDEN</h1> 
 
<h1>THE BEAUTY OF CSS DESIGN</h1>

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