css tutorial pdf



सीएसएस हेक्साडेसिमल आरजीबीए? (7)

सीएसएस रंग मॉड्यूल स्तर 4 शायद 4 और 8 अंकों के हेक्साडेसिमल आरजीबीए नोटेशन का समर्थन करेगा!

तीन हफ्ते पहले (18 दिसंबर 2014) सीएसएस रंग मॉड्यूल स्तर 4 संपादक का मसौदा सीएसएस डब्ल्यू 3 सी वर्किंग ग्रुप में जमा किया गया था। हालांकि एक ऐसे राज्य में जो बदलने के लिए अतिसंवेदनशील है, दस्तावेज़ के वर्तमान संस्करण का तात्पर्य है कि कुछ हद तक भविष्य में सीएसएस 4 और 8 अंकों के हेक्साडेसिमल आरजीबीए नोटेशन दोनों का समर्थन करेगा।

नोट: निम्न उद्धरण में अप्रासंगिक भाग काट दिया गया है और जब आप इसे पढ़ते हैं तो स्रोत को भारी रूप से संशोधित किया जा सकता है (ऊपर वर्णित अनुसार, यह एक संपादक का मसौदा है और अंतिम दस्तावेज नहीं है)।
अगर चीजें बहुत बदल गई हैं, तो मुझे एक टिप्पणी छोड़ दो मुझे बताएं ताकि मैं इस जवाब को अपडेट कर सकूं!

§ 4.2। आरजीबी हेक्साडेसिमल नोटेशन: # आरआरजीजीबीबी

<hex-color> का सिंटैक्स एक <hash-token> टोकन है जिसका मान 3, 4, 6, या 8 हेक्साडेसिमल अंक होते हैं । दूसरे शब्दों में, एक हेक्स रंग एक हैश चरित्र के रूप में लिखा जाता है, "#", उसके बाद कुछ अंक 0-9 या अक्षरों से संबंधित होते हैं (अक्षरों का मामला कोई फर्क नहीं पड़ता - #00ff00 #00FF00 समान है)।

8 अंक

पहले 6 अंकों को 6 अंकों के नोटेशन के समान रूप से व्याख्या किया जाता है। अंकों की आखिरी जोड़ी, हेक्साडेसिमल संख्या के रूप में व्याख्या की गई, रंग के अल्फा चैनल को निर्दिष्ट करती है, जहां 00 एक पूर्ण पारदर्शी रंग का प्रतिनिधित्व करता है और ff पूरी तरह से अपारदर्शी रंग का प्रतिनिधित्व करता है।

उदाहरण 3
दूसरे शब्दों में, #0000ffcc rgba(0, 0, 100%, 80%) (थोड़ा-पारदर्शी नीला) के समान रंग का प्रतिनिधित्व करता है।

4 अंक

यह 8 अंकों के नोटेशन का एक छोटा सा संस्करण है, जिस तरह से 3-अंकों की सूचना है, वैसे ही "विस्तारित" है। हेक्साडेसिमल संख्या के रूप में व्याख्या किया गया पहला अंक, रंग के लाल चैनल को निर्दिष्ट करता है, जहां 0 न्यूनतम मान का प्रतिनिधित्व करता है और f अधिकतम का प्रतिनिधित्व करता है। अगले तीन अंक क्रमशः हरे, नीले और अल्फा चैनलों का प्रतिनिधित्व करते हैं।

सीएसएस रंगों के भविष्य के लिए इसका क्या अर्थ है?

इसका मतलब यह है कि यह मानते हुए कि यह स्तर 4 दस्तावेज़ से पूरी तरह से हटाया नहीं गया है, हम जल्द ही हमारे आरजीबीए रंग (या एचएसएलए रंग, यदि आप उनमें से एक हैं) को परिभाषित करने में सक्षम होंगे जो रंगों का समर्थन करने वाले ब्राउज़र में हेक्साडेसिमल प्रारूप में मॉड्यूल स्तर 4 का वाक्यविन्यास।

उदाहरण

elem {
    background: rgb(0, 0, 0);           /* RGB notation (no alpha). */
    background: #000;                   /* 3-digit hexadecimal notation (no alpha). */
    background: #000000;                /* 6-digit hexadecimal notation (no alpha). */
    background: rgba(0, 0, 0, 1.0);     /* RGBA notation. */

    /* The new 4 and 8-digit hexadecimal notation. */
    background: #0000;                  /* 4-digit hexadecimal notation. */
    background: #00000000;              /* 8-digit hexadecimal notation. */
}

मैं अपने क्लाइंट-फेस उत्पादों में इसका उपयोग कब कर पाऊंगा?

सभी चुटकुले एक तरफ: यह वर्तमान में केवल 2015 की शुरुआत है, इसलिए इन्हें कुछ समय तक किसी भी ब्राउज़र में समर्थित नहीं किया जाएगा - भले ही आपका उत्पाद केवल ब्राउज़र के सबसे अद्यतित काम पर काम करने के लिए डिज़ाइन किया गया हो, आप शायद किसी भी समय उत्पादन ब्राउज़र में कार्रवाई में इसे नहीं देख रहे हैं।

#RRGGBBAA रंग नोटेशन के लिए वर्तमान ब्राउज़र समर्थन देखें

हालांकि, उन्होंने कहा, जिस तरह से सीएसएस काम करता है इसका मतलब है कि हम वास्तव में आज इनका उपयोग शुरू कर सकते हैं! यदि आप वास्तव में इनका उपयोग करना शुरू करना चाहते हैं, तब तक जब तक आप एक पतन वापस जोड़ते हैं, तब तक कोई गैर-सहायक ब्राउज़र केवल नए गुणों को अनदेखा कर देगा जब तक उन्हें वैध समझा न जाए:

figure {
  margin: 0;
  padding: 4px;
  
  /* Fall back (...to browsers which don't support alpha transparency). */
  background: #FEFE7F;
  color: #3F3FFE;
  
  /* Current 'modern' browser support. */
  background: rgba(255, 255, 0, 0.5);
  color: rgba(0, 0, 255, 0.75);
  
  /* Fall... foward? */
  background: #ffff007F; /* Or, less accurately, #ff08 */
  color: #0000ffbe;      /* Or #00fc */
}
<figure>Hello, world!</figure>

जब तक आप इस उत्तर को किसी ब्राउज़र पर देख रहे हों जो सीएसएस में background और color गुणों का समर्थन करता है, तो उपरोक्त स्निपेट के परिणामस्वरूप <figure> तत्व इस तरह के समान दिखाई देगा:

हमारे <figure> तत्व का निरीक्षण करने के लिए विंडोज़ (v39.0.2171) पर क्रोम के नवीनतम संस्करण का उपयोग करके, हम निम्नलिखित देखेंगे:

6 अंकों की हेक्साडेसिमल गिरावट वापस rgba() मानों द्वारा ओवरराइड की जाती है, और हमारे 8-अंकों वाले हेक्साडेसिमल मानों को अनदेखा किया जाता है क्योंकि उन्हें वर्तमान में क्रोम के सीएसएस पार्सर द्वारा अमान्य माना जाता है। जैसे ही हमारा ब्राउज़र इन 8-अंकों के मानों का समर्थन करता है, ये rgba() वाले को ओवरराइड करेंगे।

https://src-bin.com

मुझे पता है कि आप लिख सकते हैं ...

background-color: #ff0000;

... अगर आप लाल कुछ चाहते हैं।

और आप लिख सकते हैं ...

background-color: rgba(255, 0, 0, 0.5);

... अगर आप कुछ लाल और पारदर्शी चाहते हैं।

क्या हेक्साडेसिमल में आंशिक रूप से पारदर्शी रंग लिखने का कोई छोटा रास्ता है? मुझे कुछ चाहिए:

background-color: #ff000088; <--- the 88 is the alpha

... या ...

background-color: #ff0000 50%;

मैं हेक्साडेसिमल में अपने सभी रंग प्राप्त कर रहा हूं, और उन्हें सभी को 0-255 पैमाने पर परिवर्तित करने के लिए परेशान करना है।


Answer #1

क्रोम 52+ अल्फा हेक्स supports :

background: #56ff0077;

Answer #2

प्रश्न में वृद्धि पोस्ट करने के बाद मुझे जवाब मिला। माफ़ कीजिये!

एमएस एक्सेल मदद की!

केवल हेक्स उपसर्ग को हेक्स रंग मान में जोड़ें जो अल्फा जोड़ने के लिए समतुल्य अस्पष्टता है जो% मान के रूप में है।

(आरबीजीए में प्रतिशत अस्पष्टता ऊपर वर्णित दशमलव के रूप में व्यक्त की जाती है)

Opacity %   255 Step        2 digit HEX prefix
0%          0.00            00
5%          12.75           0C
10%         25.50           19
15%         38.25           26
20%         51.00           33
25%         63.75           3F
30%         76.50           4C
35%         89.25           59
40%         102.00          66
45%         114.75          72
50%         127.50          7F
55%         140.25          8C
60%         153.00          99
65%         165.75          A5
70%         178.50          B2
75%         191.25          BF
80%         204.00          CC
85%         216.75          D8
90%         229.50          E5
95%         242.25          F2
100%        255.00          FF

Answer #3

मुझे डर है कि यह संभव नहीं है। आप जानते हैं कि rgba प्रारूप केवल एक ही है।


Answer #4

यहां देखें http://www.w3.org/TR/css3-color/#rgba-color

यह संभव नहीं है, संभवतः क्योंकि 0xFFFFFFFF 32 बिट पूर्णांक के लिए अधिकतम मान से अधिक है


Answer #5

background-color: #ff0000; opacity: 0.5; filter: alpha(opacity=50); /* in IE */ उपयोग क्यों नहीं करें background-color: #ff0000; opacity: 0.5; filter: alpha(opacity=50); /* in IE */ background-color: #ff0000; opacity: 0.5; filter: alpha(opacity=50); /* in IE */

यदि आप किसी पाठ या शायद तत्व के लिए रंग लक्षित करते हैं, तो यह करना बहुत आसान होना चाहिए।


Answer #6
RGB='#ffabcd';
A='0.5';
RGBA='('+parseInt(RGB.substring(1,3),16)+','+parseInt(RGB.substring(3,5),16)+','+parseInt(RGB.substring(5,7),16)+','+A+')';




css