CSS3 सच CSS3 काम कर फ़ायरफ़ॉक्स, सफ़ारी, और गूगल क्रोम के द्वारा समर्थित मसौदे में उल्लिखित आदेश के कई के साथ गति को इकट्ठा शुरू होता है. हमने सोचा कि हम एक साथ हमारे पसंदीदा में से कुछ डाला था. इससे पहले कि हम शुरू हो CSS3 आदेश ब्राउज़र - विशिष्ट वाक्यविन्यास की आवश्यकता के लिए उन्हें काम करने के लिए .

मोज़िला फ़ायरफ़ॉक्स के लिए हम उदाहरण के लिए MOZ - उपसर्ग, उपयोग करने की आवश्यकता है :

MOZ सीमा त्रिज्या:

और वेबकिट - उपसर्ग सफारी के लिए, उदाहरण के लिए :

वेबकिट सीमा त्रिज्या:

1. बॉर्डर त्रिज्या

CSS3 सीमा त्रिज्या आदेश एक तत्व पर घुमावदार कोनों बनाता है. 4 या अधिक छवियों का उपयोग करने के लिए बनाने के बजाय घुमावदार कोनों निम्न आदेश का उपयोग करें:

मोज़िला फ़ायरफ़ॉक्स के लिए / * * /
MOZ सीमा त्रिज्या: 20px;

सफारी और गूगल क्रोम के लिए / * * /
- वेबकिट सीमा त्रिज्या: 20px;
}

2. बॉक्स छाया

एक छाया CSS3 बॉक्स छाया कमांड का उपयोग कर तत्वों के लिए लागू किया जा सकता है. बॉक्स छाया तीन संख्यात्मक मानों प्लस रंग इस प्रभाव को लागू करने के लिए स्वीकार करता है. ये संख्या हैं:

1. क्षैतिज की दूरी छाया की भरपाई - एक सकारात्मक मूल्य का मतलब है सही और बाईं ओर एक नकारात्मक मूल्य के लिए छाया डाली जाएगी
2. खड़ी की दूरी छाया की भरपाई - एक सकारात्मक मूल्य का मतलब है छाया नीचे डाली और एक नकारात्मक मूल्य से ऊपर
3. आप कितनी धुँधली छाया करना चाहते हैं

एक रंग मान के अलावा के साथ छाया पूरा हो गया है:

मोज़िला फ़ायरफ़ॉक्स के लिए / * * /
- MOZ बॉक्स छाया: 5px 5px 5px b6ebf7 #;

सफारी और गूगल क्रोम के लिए / * * /
वेबकिट - बॉक्स छाया: 5x 5px 5px b6ebf7 #;

3. पारदर्शिता या आरजीबीए

पारदर्शिता हमेशा मुश्किल कर दिया गया है. विभिन्न ब्राउज़रों ऐतिहासिक विभिन्न आदेशों का उपयोग पारदर्शिता लागू है. इस विसंगति को पार ब्राउज़र सतत हम नए CSS3 आरजीबीए पृष्ठभूमि संपत्ति के अलावा है, लेकिन सिद्धांत रूप में इस आदेश को और अधिक तर्कसंगत है. प्रथम, द्वितीय और तृतीय लाल, हरे और नीले रंग मूल्यों (0-255) क्रमशः अल्फा चैनल या पारदर्शिता (0-1) द्वारा पीछा कर रहे हैं - आदेश 4 मूल्यों के होते

आरजीबीए आदेश के लिए ब्राउज़र विशेष उपसर्गों (MOZ -, वेबकिट) की आवश्यकता नहीं कर रहे हैं:

# {Box3
पृष्ठभूमि रंग: आरजीबीए (110, 142, 185, 0.5);
}

पृष्ठभूमि रंग आदेश 0.5 में एक अच्छी पृष्ठभूमि नीली भूरी या ब्राउज़रों कि CSS3 आरजीबीए संपत्ति समझ में 50% की अस्पष्टता कहते हैं.

दुर्भाग्य से इंटरनेट एक्सप्लोरर भी पृष्ठभूमि रंग आदेश रेंडर करने का प्रयास लेकिन आरजीबीए नहीं समझते. सुनिश्चित करें कि पृष्ठभूमि रंग भी IE में सेट कर दिया जाता है एक IE केवल हैक की आवश्यकता है. निम्न उदाहरण में: आखरी बच्चे छद्म चयनकर्ता इंटरनेट जो एक्सप्लोरर नहीं समझती इसे बाहर करने के लिए प्रयोग किया जाता है.

शरीर: आखरी बच्चे box3 # {
/ * सभी आईई ब्राउज़रों का उपयोग कर बहिष्कृत करें: आखरी बच्चे * /
पृष्ठभूमि रंग: आरजीबीए (110, 142, 185, 0.5) महत्वपूर्ण;
}

4. स्तंभ

स्तंभों को जोड़ने की क्षमता CSS3 के लिए जोड़ा गया है. कंटेनर के भीतर अस्थायी तत्वों के बजाय हम स्तंभ संख्या, चौड़ाई और नियम सेट कर सकते हैं:

मोज़िला फ़ायरफ़ॉक्स के लिए / * * /
MOZ स्तंभ गिनती: 2;
MOZ कॉलम अंतराल: 20px;
MOZ - स्तंभ नियम: 1px ठोस # 6e8eb9;

सफारी और गूगल क्रोम के लिए / * * /
वेबकिट स्तंभ गिनती: 2;
वेबकिट कॉलम अंतराल: 20px;
वेबकिट - स्तंभ नियम: 1px ठोस # 6e8eb9;
}

5. एकाधिक पृष्ठभूमि छवियों

पृष्ठभूमि कल्पना हमेशा प्रतिबंधात्मक किया गया है जब यह तथ्य यह है आप केवल एक तत्व प्रति एक पृष्ठभूमि छवि को लागू कर सकते हैं के कारण सीएसएस आता है. यह CSS3 के साथ मामले में जो बस उन्हें अल्पविराम - अलग तत्व प्रति एकाधिक छवियों की अनुमति देता है नहीं है.

दोनों को छोड़ दिया और आप एक छोटे स्टाइल के साथ, निम्न आदेश का उपयोग कर सकते हैं एक तत्व की सही पर एक छवि जगह:

padding: 20px 0;
}

यह आदेश हो जाएगा गलत इंटरनेट एक्सप्लोरर के द्वारा गाया के रूप में यह एक ही तत्व पर 2 पृष्ठभूमि छवियों को स्वीकार नहीं करता है. एक बाहर सभी आईई हैक की आवश्यकता है.

# Box5 blockquote {
/ * सभी ब्राउज़रों के लिए, बस एक खुली बोली * /
पृष्ठभूमि: url (/ मैं quotel.gif /) 0 0 नहीं दोहराने;
padding: 20px 0;
}

शरीर: आखरी बच्चे # box5 blockquote {
/ * सभी आईई ब्राउज़रों का उपयोग कर बहिष्कृत करें: आखरी बच्चे * /
/ * फिर दो छवियों / *
पृष्ठभूमि: url (/ / i quotel.gif) नहीं दोहराने 0 0, url (/ / i quoter.gif) 100% 0 नहीं दोहराने;
}

6. पृष्ठभूमि ढ़ाल

CSS3 पृष्ठभूमि ढ़ाल अत्यंत लचीला कर रहे हैं और जटिल पैटर्न बनाने के लिए इस्तेमाल किया जा सकता है. इसके सरलतम पर सीएसएस रैखिक ढाल की अनुमति देता है एक ढाल ऊपर से नीचे तक एक तत्व के लिए लागू किया जा करने के लिए और सही करने के लिए छोड़ दिया.

मोज़िला फ़ायरफ़ॉक्स में एक CSS3 ढाल का यह उदाहरण एक बॉक्स के नीचे 'बक्से ऊंचाई का सिर्फ 20% के लिए एक हल्के नीले रंग ढाल लागू होता है

सफारी कम सहज ज्ञान युक्त लेकिन अधिक लचीला दृष्टिकोण रंग रोकने के मूल्यों का उपयोग कर का उपयोग करता है. सफारी विशिष्ट कोड का एक उदाहरण इस प्रकार है (कृपया ध्यान दें रैखिक बाहर के बजाय कोष्ठक में शामिल है):

# {Box8
पृष्ठभूमि: - वेबकिट - ढाल (रेखीय, नीचे बाएँ, बाएँ शीर्ष, रंग रोक (0, b6ebf7 #), रंग - बंद (0.20, FFF #));
}

7. रोटेशन

CSS3 घुमाएगी संपत्ति एक पैरामीटर के रूप में स्वीकार डिग्री के साथ भी परिणत आदेश का उपयोग तत्वों के रोटेशन की अनुमति देता है.

<code> # box9 {
MOZ - परिवरतित: घुमाएगी (2deg);
वेबकिट - परिवरतित: घुमाएगी (2deg);
} </ Code>

8. रूपरेखा

Outilines CSS3 विनिर्देशन में शामिल कर रहे हैं और दोनों एक सीमा और एक रूपरेखा के लिए एक ही तत्व के लिए लागू किया जा अनुमति देते हैं.

रूपरेखा संपत्ति सीमा आदेश को समान है. अतिरिक्त ऑफसेट संपत्ति लेकिन सीमा को आगे अंदर या तत्व के बाहर स्थानांतरित करने के लिए अनुमति देता है.

के तहत दायर: व्यवस्थापक द्वारा सीएसएस