सीएसएस के साथ आंतरिक पाठ छाया

Question

मैं वर्तमान में CSS3 के साथ खेल रहा हूं और इस तरह से एक पाठ प्रभाव को प्राप्त करने की कोशिश कर रहा हूं (काली धुंधली आंतरिक छाया)।

लेकिन मुझे पाठ के अंदर पाठ छाया बनाने का कोई तरीका नहीं मिल रहा है । मुझे आश्चर्य है कि क्या यह अभी भी संभव है क्योंकि बॉक्स-शैडो तत्व छाया को इस तरह से प्रस्तुत करने में सक्षम है:

box-shadow: inset 0px -5px 10px 0px rgba(0, 0, 0, 0.5);

कोई विचार?

Comments

इसके लिए कोई जवाब नहीं अगर आप कुछ ऑप्टिकल भ्रमों के लिए तैयार नहीं हैं ...

— अरिया कार्टर-वीर

Answer 1

यहाँ एक छोटी सी चाल है जिसे मैंने :beforeऔर :afterछद्म तत्वों का उपयोग करके खोजा है :

.depth {
    color: black;
    position: relative;
}
.depth:before, .depth:after {
    content: attr(title);
    color: rgba(255,255,255,.1);
    position: absolute;
}
.depth:before { top: 1px; left: 1px }
.depth:after  { top: 2px; left: 2px }

शीर्षक विशेषता को सामग्री के समान होना चाहिए। डेमो: http://dabblet.com/gist/1609945

Comments

अच्छा! क्रिएटिव :) अभी भी नहीं के रूप में Photoshop-esque के रूप में मैं यह होना चाहते हैं। आप प्रत्येक 5px आंतरिक छाया ऑफ़सेट प्राप्त करने के लिए प्रत्येक को 5px में शीर्ष / बाएँ मान सेट कर सकते हैं, लेकिन फिर अक्षर दूसरे छोर पर लीक हो जाता है - जो 1px और 2px के लिए बहुत अच्छा लगता है, लेकिन उच्च मूल्यों के लिए अजीब है।

— एरीक्ट्यूबर्ट

हाँ, यह केवल तल पर सफेद रंग के एक मामूली संकेत के साथ अच्छा लगता है। 2px से अधिक किसी भी रूप को नष्ट कर देता है।

— वेब_डिजाइनर

बहुत बढ़िया! आप इसका उपयोग श्वेत पाठ को करने के लिए भी कर सकते हैं। अपारदर्शिता को .9 पर पंप करके, या .1 पर अपारदर्शिता द्वारा उभरे हुए किनारों का निर्माण करें और रंगों को उलट दें। (+1)

— JohnB

महान समाधान। (बहुत बुरा लगता है हम महान पाठ प्रभाव के लिए तो कुछ वर्षों के लिए CSS4 के लिए प्रतीक्षा या करना होगा, लेकिन, फ़े पाठ ढ़ाल के साथ संयोजन में विफल रहता

— माइकल Trouw

क्रोम में यह अच्छा है, मैं एफएफ के लिए एक वैकल्पिक फॉल-बैक करने के लिए संघर्ष कर रहा हूं, जो जेएस और एक नेमप्लेट क्लास का उपयोग किए बिना क्रोम पर लागू नहीं होगा। कोई विचार। PS एक खूबसूरती से एक leathr प्रभाव बीजी पर काम करता है, एक ब्रांडिंग टिकट की तरह दिखता है।

— विल हैंकॉक

Answer 2

आप इसे पाठ-छाया, erm somethink का उपयोग करके ऐसा करने में सक्षम होना चाहिए:

.inner_text_shadow
{
    text-shadow: 1px 1px white, -1px -1px #444;
}

यहाँ एक उदाहरण है: http://jsfiddle.net/ekDNq/

Comments

हम, हाँ, तरह। इन मापदंडों के साथ दृश्य प्रभाव समान है, लेकिन यह अभी भी फ़ॉन्ट के पीछे छाया है। अंदर नहीं। मेरे उदाहरण में मैंने इनसेट छाया को भी धुंधला कर दिया है और इससे यहां प्रभाव नष्ट हो जाएगा। तो ... सबसे अच्छा समाधान अभी तक लेकिन अभी भी सिर्फ एक दृश्य भ्रम हैक;)

— ericteubert

ध्यान दें कि आप ऐसा करके फ़ॉन्ट को आसान बना रहे हैं। छोटे और मध्यम आकार के फोंट के लिए, जो आप नहीं चाहते हो सकता है।

— जोनातन लिटके

Answer 3

यहाँ मेरी सबसे अच्छी कोशिश है:

    .inner_shadow {
    color:transparent;
    background-color:white;
    text-shadow: 0 0 20px rgba(198,28,39,0.8), 0 0 0 black;
    font-family:'ProclamateHeavy';  // Or whatever floats your boat
    font-size:150px;
    }

   
    <span class="inner_shadow">Inner Shadow</span>
   

समस्या यह है कि किनारों के चारों ओर बहने वाली छाया को कैसे क्लिप किया जाए !!! मैंने बैकग्राउंड-क्लिप: टेक्स्ट का उपयोग करके वेबकिट में कोशिश की, लेकिन वेबकिट पृष्ठभूमि के ऊपर छाया को प्रस्तुत करता है इसलिए यह काम नहीं करता है।

सीएसएस के साथ एक टेक्स्ट मास्क बनाना?

शीर्ष मुखौटा परत के बिना पाठ पर एक सच्ची आंतरिक छाया करना असंभव है।

शायद किसी को W3C जोड़ने की सलाह देनी चाहिए बैकग्राउंड-क्लिप : रिवर्स-टेक्स्ट , जो टेक्स्ट के अंदर फिट होने के लिए बैकग्राउंड को काटने के बजाय बैकग्राउंड के माध्यम से मास्क को काट देगा।

या तो पाठ-छाया को पृष्ठभूमि के हिस्से के रूप में प्रस्तुत करें और इसे पृष्ठभूमि-क्लिप के साथ क्लिप करें: पाठ।

मैंने इसके ऊपर एक समान टेक्स्ट एलिमेंट को बिल्कुल पोजिशन करने की कोशिश की, लेकिन समस्या बैकग्राउंड-क्लिप की है: टेक्स्ट में बैकग्राउंड को फिट करने के लिए बैकग्राउंड क्रॉप किया जाता है, लेकिन हमें इसके उल्टा चाहिए।

मैंने पाठ-स्ट्रोक का उपयोग करने की कोशिश की: 20px सफेद; इस तत्व और इसके ऊपर के दोनों पर, लेकिन पाठ स्ट्रोक के रूप में अच्छी तरह से बाहर चला जाता है।

वैकल्पिक तरीके

चूंकि वर्तमान में सीएसएस में एक औंधा-पाठ मुखौटा बनाने का कोई तरीका नहीं है, आप अपने प्रभाव को प्राप्त करने के लिए तीन परतों के साथ एसवीजी या कैनवस में बदल सकते हैं और एक पाठ प्रतिस्थापन छवि बना सकते हैं।

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

कैनवस के साथ इसे हासिल करना कठिन होगा क्योंकि इसमें एसवीजी जैसी परतों के साथ डोम नहीं है।

आप एसवीजी या तो सर्वर-साइड का उत्पादन कर सकते हैं, या ब्राउज़र में जावास्क्रिप्ट टेक्स्ट-रिप्लेसमेंट विधि के रूप में।

आगे की पढाई:

एसवीजी बनाम कैनवस:

http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

एसवीजी टेक्स्ट के साथ क्लिपिंग और मास्किंग:

http://www.w3.org/TR/SVG/text.html#TextElement

Comments

मैंने एक उदाहरण के साथ आपकी सबसे अच्छी कोशिश पर अधिक विस्तृत विवरण पोस्ट किया है । इसकी जांच - पड़ताल करें!

— अल्बा मेंडेज़

इसका उदाहरण बहुत चरम पर ले जाया गया ।

— अल्बा मेंडेज़

आपके उदाहरण में एक बाहरी छाया है

— एलेक्सक

Answer 4

^{Kendo451 के उत्तर में CSS की अधिक सटीक व्याख्या ।}

फैंसी-हैकी इनर शैडो इल्यूजन पाने का एक और तरीका है,
जिसे मैं तीन सरल चरणों में समझाता हूँ। कहो कि हमारे पास यह HTML है:

<h1>Get this</h1>

और यह सीएसएस:

h1 {
  color: black;
  background-color: #cc8100;
}

चरण 1

पाठ को पारदर्शी बनाकर शुरू करते हैं:

h1 {
  color: transparent;
  background-color: #cc8100;
}

चरण 2

अब, हम उस पृष्ठभूमि को पाठ के आकार में क्रॉप करते हैं:

h1 {
  color: transparent;
  background-color: #cc8100;
  background-clip: text;
}

चरण 3

अब, जादू: हम एक धुंधला डाल देंगे text-shadow, जो पृष्ठभूमि के सामने होगा , इस प्रकार एक आंतरिक छाया की छाप देगा!

h1 {
  color: transparent;
  background-color: #cc8100;
  background-clip: text;
  text-shadow: 0px 2px 5px #f9c800;
}

अंतिम परिणाम देखें ।

Downsides?

• केवल वेबकिट में काम करता है ( background-clipनहीं हो सकता text)।
• एकाधिक छाया? सोचना भी मत।
• आपको बाहरी चमक भी मिलती है।

Comments

"कई परछाइयाँ? मत सोचो भी।" किस बारे में text-shadow: 1px 1px 1px #000, 3px 3px 5px blue;?

— मोरफियस

@Morpheus इस विधि के डाउनसाइड में से एक यह है कि आप पाठ में एक से अधिक छाया नहीं लगा सकते हैं।

— अल्बा मेंडेज़

इस उदाहरण का आकार और चमक दूसरों को देखना मुश्किल बना रहा है। क्या आप शायद इन्हें कोड स्निपेट में बदल सकते हैं? धन्यवाद!

— जोश हबदास

Answer 5

मार्कअप में पोस्ट रैपर या डुप्लिकेट सामग्री की आवश्यकता के बिना एक सुरुचिपूर्ण उदाहरण :

:root {
  background: #f2f2f2;
}
h1 {
  background-color: #565656;
  font: bold 48px 'Futura';
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.8);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}

<center>
  <h1>Text With Inner Shadow</h1>
</center>

डार्क बैकग्राउंड पर भी अच्छा लगता है:

:root {
  --gunmetal-gray: #2a3439;
  background: var(--gunmetal-gray);
}

h1[itemprop="headline"] {
  font-family: 'Futura';
  font-size: 48px;
  padding-bottom: 0.35rem;
  font-variant-caps: all-small-caps;
  background-color: var(--gunmetal-gray);
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.1);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  filter: brightness(3);
}

<center>
  <h1 itemprop="headline">Text With Inner Shadow</h1>
</center>

और मुझे लिंक और ME2 लिंक

Comments

सरल और मार्कअप के लिए किसी भी समायोजन की आवश्यकता नहीं है। अच्छा कार्य!

— जोश हबडास

Answer 6

आप ऐसा कर सकते हैं। दुर्भाग्य से पाठ-छाया पर इनसेट का उपयोग करने का कोई तरीका नहीं है, लेकिन आप इसे रंग और स्थिति के साथ नकली कर सकते हैं। धब्बा को नीचे ले जाएं और ऊपर दाईं ओर छाया की व्यवस्था करें। कुछ इस तरह से हो सकती है चाल:

background-color:#D7CFBA;
color:#38373D;
font-weight:bold;
text-shadow:1px 1px 0 #FFFFFF;

... लेकिन आपको वास्तव में सावधान रहने की ज़रूरत है कि आप किन रंगों का उपयोग करते हैं अन्यथा यह बंद हो जाएगा। यह अनिवार्य रूप से एक ऑप्टिकल भ्रम है इसलिए हर संदर्भ में काम नहीं करेगा। यह वास्तव में छोटे फ़ॉन्ट आकारों में बहुत अच्छा नहीं लगता है, इसलिए इसके बारे में भी जागरूक रहें।

Comments

नहीं वास्तव में मैं क्या देख रहा हूँ। आपके प्रस्ताव का प्रभाव दिलचस्प है लेकिन मेरे द्वारा पोस्ट किए गए उदाहरण से बहुत दूर है।

— इरिटिक्यूबर्ट

फिर उस मामले में CSS3 के साथ कोई जवाब नहीं है। क्षमा करें, मैं मदद नहीं कर सका।

— होल्स्क

इस उत्तरbackground-clip में दिखाए गए अनुसार इनसेट शैडो का उपयोग संभव है ।

— जोश हबडास

Answer 7

कई छाया या इस तरह के कुछ भी फैंसी के लिए कोई ज़रूरत नहीं है, आपको बस अपनी छाया को नकारात्मक y- अक्ष में ऑफसेट करना होगा।

एक प्रकाश पृष्ठभूमि पर अंधेरे पाठ के लिए:

text-shadow: 0px -1px 0px rgba(0, 0, 0, .75);

यदि आपके पास एक अंधेरा पृष्ठभूमि है तो आप बस रंग और y- स्थिति को उल्टा कर सकते हैं:

text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);

आरजीबी मूल्यों, अस्पष्टता और धुंधलेपन के साथ प्रभाव को ठीक से प्राप्त करने के लिए चारों ओर खेलें। यह इस बात पर बहुत निर्भर करेगा कि आपके पास कौन सा रंग फ़ॉन्ट और पृष्ठभूमि है, और फ़ॉन्ट जितना अच्छा होगा, उतना बेहतर होगा।

Comments

अभी भी सिर्फ एक ऑप्टिकल भ्रम है, कोई वास्तविक आंतरिक छाया नहीं है।

— ericteubert

... सभी छाया एक ऑप्टिकल भ्रम नहीं हैं?

— चार्ली श्लिसेर

आप @ क्रोधी हैं ... वास्तव में इसका मतलब है

— जेमी हटबर

Answer 8

भिन्नता के इस छोटे से रत्न को आज़माएं:

text-shadow:0 1px 1px rgba(255, 255, 255, 0.5);

मैं आमतौर पर "कोई जवाब नहीं" एक चुनौती के रूप में लेता हूं

Comments

यह फ़ॉन्ट के निचले भाग में एक सफेद रूपरेखा बनाता है लेकिन मुझे काले धुंधले आंतरिक छाया की तलाश थी ।

— ericteubert

इसने मेरे लिए सबसे अच्छा काम किया, खासकर जब छोटे पाठ को छायांकित किया। मैं सुझाव देता हूं कि यदि आपके फ़ॉन्ट रंग के साथ सही दिखने के लिए आरजीबी मूल्यों को थोड़ा मोड़ना आवश्यक है।

— कोरी शायर

Answer 9

मैंने कई प्रस्तावित समाधानों को देखा है, लेकिन कोई भी ऐसा नहीं था जिसकी मैं उम्मीद कर रहा था।

यहां मेरा सबसे अच्छा हैक है , जहां रंग पारदर्शी है, पृष्ठभूमि और शीर्ष पाठ-छाया अलग-अलग opacities के साथ एक ही रंग हैं, मुखौटा का अनुकरण करते हैं, और दूसरा पाठ-छाया एक गहरा, रंग का अधिक संतृप्त संस्करण है वास्तव में चाहते हैं (HSLA के साथ करने के लिए बहुत आसान)।

(btw, पाठ और स्टाइल एक डुबकी धागे की ओपी पर आधारित )

Answer 10

मेरे पास कुछ उदाहरण हैं जहां मुझे पाठ पर आंतरिक छाया की आवश्यकता है, और निम्नलिखित ने मेरे लिए अच्छी तरह से काम किया है:

.inner {
    color: rgba(252, 195, 67, 0.8);
    font-size: 48px;
    text-shadow: 1px 2px 3px #fff, 0 0 0 #000;
}

यह पाठ की अपारदर्शिता को 80% तक सेट करता है, और फिर दो छाया बनाता है:

• पहली एक सफेद छाया है (यह मानते हुए कि पाठ एक सफेद पृष्ठभूमि पर है) बाईं ओर से 1px और ऊपर से 2px, 3px धुंधला है।
• दूसरी एक काली छाया है जो 80% अस्पष्टता पाठ के माध्यम से दिखाई देती है, लेकिन पहली छाया के माध्यम से नहीं, जिसका अर्थ है कि यह केवल पाठ अक्षरों के अंदर दिखाई देता है जहां पहली छाया विस्थापित होती है (बाईं ओर से 1px और ऊपर से 2px)। इस दृश्यमान छाया के धब्बा को बदलने के लिए, पहली परत छाया के लिए धब्बा पैरामीटर को संशोधित करें।

चेतावनियां

• यह केवल तभी काम करेगा जब पाठ का वांछित रंग 100% अस्पष्टता के बिना प्राप्त किया जा सकता है।
• यह केवल तभी काम करेगा जब पृष्ठभूमि का रंग ठोस हो (इसलिए, यह प्रश्नकर्ता के विशिष्ट उदाहरण के लिए काम नहीं करेगा जहां पाठ एक पाठ पृष्ठभूमि पर बैठता है)।

Answer 11

यहाँ एक लिंक दिया गया है कि यह कैसे करना है, यह वही होना चाहिए जो आप देख रहे हैं:

http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/

Answer 12

ऐसा लगता है कि यह काम कर रहा है: http://tips4php.net/2010/08/nice-css-text-shadow-fffff/

वह उस प्रभाव को प्राप्त करने के लिए कई परछाइयों का उपयोग कर रहा है जैसा कि यहाँ बताया गया है: http://www.w3.org/Style/Examples/007/text-shadow#multiple

Answer 13

लगता है हर किसी को इस का जवाब मिल गया। मुझे @Web_Designer से समाधान पसंद है। लेकिन यह उतना जटिल होने की आवश्यकता नहीं है और आप अभी भी धुंधली आंतरिक छाया प्राप्त कर सकते हैं जिसकी आपको तलाश है।

http://dabblet.com/gist/3877605

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

.depth:before {
    content: attr(title);
    color: transparent;
    position: absolute;
    text-shadow: 2px 2px 4px rgba(255,255,255,0.3);
}

Answer 14

यह आसानी से मैंने देखा है सबसे अच्छा उदाहरण है। http://lab.simurai.com/carveme/

स्रोत gitthub पर है https://github.com/simurai/lab/tree/gh-pages/carveme

Comments

आपके लिंक मृत हैं

— 10 उत्तर

Answer 15

:before :afterWeb_designer द्वारा तकनीक का निर्माण , यहाँ कुछ ऐसा है जो आपके रूप के करीब आता है:

सबसे पहले, अपने पाठ को आंतरिक छाया का रंग (ओपी के मामले में काला-ईश) बनाएं।

अब, मूल पाठ का एक पारदर्शी डुप्लिकेट बनाने के लिए psuedo वर्ग के बाद का उपयोग करें: इसके ऊपर सीधे रखा गया है। कोई ऑफसेट के साथ एक नियमित पाठ छाया असाइन करें। मूल पाठ रंग को छाया में असाइन करें, और आवश्यकतानुसार अल्फा समायोजित करें।

http://dabblet.com/gist/2499892

जैसे आप PS में करते हैं, आपको छाया आदि का पूर्ण नियंत्रण नहीं मिलता है, लेकिन छोटे धब्बा मानों के लिए यह काफी निष्क्रिय है। छाया पाठ की सीमा से आगे निकल जाती है, इसलिए यदि आप उच्च विपरीत पृष्ठभूमि-अग्रभूमि वाले वातावरण में काम कर रहे हैं, तो यह स्पष्ट होगा। कम विपरीत वस्तुओं के लिए, विशेष रूप से एक ही रंग के साथ, यह बहुत ध्यान देने योग्य नहीं है। उदाहरण के लिए, मैं इस तकनीक का उपयोग करके धातु की पृष्ठभूमि में बहुत अच्छा दिखने वाला etched पाठ बनाने में सक्षम हूं।

Answer 16

यहां TRUE इनसेट टेक्स्ट शैडो के लिए बैकग्राउंड-क्लिप CSS3 प्रॉपर्टी का उपयोग करने का एक शानदार समाधान दिया गया है:

.insetText {
    background-color: #666666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}

Comments

यह लिंक अब टूटता हुआ प्रतीत होता है।

— निक व्हाइट व्हाइट

वेबकिट में अच्छा लग रहा है, लेकिन अभी भी फ़ायरफ़ॉक्स 18 के लिए एक नहीं जाना है।

— gmeben

इसका सीमित समर्थन हो सकता है, लेकिन मुझे यह बहुत पसंद है क्योंकि यह वास्तव में इनसेट है।

— जूलियन के

Answer 17

यहाँ कुछ विचारों को देखने के बाद मैं यहाँ आया हूँ। मुख्य विचार यह है कि पाठ का रंग दोनों छायाओं के साथ मिश्रित होता है, और ध्यान दें कि यह एक ग्रे पृष्ठभूमि पर उपयोग किया जा रहा है (अन्यथा सफेद अच्छी तरह से दिखाई नहीं देगा)।

.inset {
    color: rgba(0,0,0, 0.6);
    text-shadow: 1px 1px 1px #fff, 0 0 1px rgba(0,0,0,0.6);
}

Answer 18

इनसेट पाठ छाया के लिए इस उदाहरण का प्रयास करें। यहाँ HTML है

<h1 class="inset-text-shadow">Inset text shadow trick</h1>

और सीएसएस

body {
    background: #f8f8f8;
}
h1 {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 6em;
    line-height: 1em;
}
.inset-text-shadow {
    /* Shadows are visible under slightly transparent text color */
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

}

Demo on Jsfiddle

Answer 19

text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);

बॉक्स छाया के लिए:

-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);

आप ऑनलाइन पाठ और बॉक्स छाया देख सकते हैं: ऑनलाइन पाठ और बॉक्स छाया

अधिक उदाहरण के लिए आप इस पते पर जा सकते हैं: अधिक उदाहरण कोड फ्रीकूप

Answer 20

इसे प्राप्त करने का बहुत सरल तरीका है

.inner{color: red; text-shadow: 0 -1px 0 #666;} // #666 is the color of the inner shadow

Voilà

Answer 21

छोटे-ईश बटन पर सामान्य आकार के पाठ के लिए

छोटे टेक्स्ट लेटरिंग के साथ छोटे बटन पर उपयोग किए जाने पर मुझे इस पृष्ठ पर अन्य विचार अपनी प्रभावकारिता खोने के लिए मिले। यह उत्तर रॉबर्टपिट के उत्तर पर विस्तृत है ।

यहाँ छोटी सी बात है:

text-shadow: 1px 1px transparent, -1px -1px black;

$('button').click(function(){
  $('button').removeClass('btnActive');
  $(this).addClass('btnActive');
});

body{background:#666;}
.btnActive{
  border: 1px solid #aaa;
  border-top: 1px solid #333;
  border-left: 1px solid #333;
  color: #ecf0f8;
  background-color: #293d70;
  background-image: none;
  text-shadow: 1px 1px transparent, -1px -1px black;
  outline:none;
}

button{
  border: 1px solid #446;
  border-radius: 3px;
  color: white;
  background-color: #385499;
  background-image: linear-gradient(-180deg,##7d94cf,#1c294a 90%);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  xxtext-shadow: 1px 1px 2px navy;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btnActive">Option One</button>
<button>Option Two</button>

ध्यान दें:

मैंने इस साइट का उपयोग रंगों की चमक के लिए किया है।

Answer 22

मैं इसे इस साइट से उपयोग कर रहा हूं, यह भी अच्छा लग रहा है। यह पर एक नज़र डालें इनर छाया

Comments

जिस व्यक्ति ने इसे वोट किया है, वह कह सकता है कि यह कैसे अस्वीकृत हो सकता है। यदि यह उत्तर प्रश्न से भटक गया है? या आपको लगता है कि मैं एक स्पैमर हूं .. अगर आप समझा सकते हैं तो मैं यहां अपना जवाब अपडेट कर सकता हूं

— vkGunasekaran

+1 Web_Designer के रूप में समान उत्तर लेकिन बेहतर समझाया गया। हो सकता है कि downvoter को यह तथ्य पसंद नहीं आया हो कि आपका उत्तर मूल रूप से शुरुआती पोस्ट के उत्तर के समान था। लेकिन यहाँ तुम जाओ। मैंने आपको इसके लिए मुआवजा दिया :)

— जूल्स कॉल

बस नीचे उतारा गया। न केवल यह एक डुप्लिकेट है, लेकिन यह समस्या की व्याख्या नहीं करता है, या कोई स्निपेट नहीं देता है, यह केवल एक लिंक है। यह मेरी राय में, लेखक की ओर से न्यूनतम प्रयास को दर्शाता है। IMHO, और FTR।

— अल्बा मेंडेज़