X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

मुफ्त प्रीमियम प्रवेश

हमारे प्रीमियम हब लेख, परियोजना फ़ाइलें और से प्रत्येक ट्यूटोरियल वीडियो के पहले 10% के पूरे पुस्तकालय प्रवेश ऑनलाइन ट्यूटोरियल पुस्तकालय .

अपने मुफ़्त खाता बनाएँ!

CSS3 लेआउट ऑब्जेक्ट्स पर गोल कोनों में बनाया गया
  • CSS3 लेआउट ऑब्जेक्ट्स पर गोल कोनों में बनाया गया

Google अनुवाद के द्वारा अनुवादित

यदि आप कर नहीं किया गया है ज्यादा में नया क्या है पर अभी तक पढ़ने CSS3 , यह बहुत भयानक है. नव शुरू की संभावनाओं के सभी प्रकार के gradients, एकाधिक स्तंभों, सीमा छवियों एक है, और हम यहाँ पर एक नज़र हो, सीमा त्रिज्या में बात कर रही हूँ, सहित रहे हैं. बॉर्डर त्रिज्या हमें हमारी वेब लेआउट में अन्यथा आयताकार वस्तुओं पर गोल कोनों सेट करने की अनुमति देता है.

Current versions of each popular browser support the new border radius property, but unfortunately it simply doesn't render in earlier versions. And that's the thorn in many web designer's side. However, I'll show you a cool trick to ensure it works in nearly every browser.

चरण 1 - एक CSS3 सीमा त्रिज्या लागू

पहले, चलो सीमा त्रिज्या लागू. अपनी शैली पत्रक में, नियम है कि आप करने के लिए गोल कोने प्रभाव लागू करना चाहते हैं लगता है. अक्सर, यह है कि एक div तत्व को नियंत्रित एक आईडी चयनकर्ता हो जाएगा. भी यकीन है कि आप भी एक पृष्ठभूमि रंग या एक सीमा (या दोनों) के आवेदन कर रहे हैं कोनों इतनी है कि आप देख सकते हैं!

अगला, "सीमा" त्रिज्या अपने शासन के लिए संपत्ति, एक मूल्य के बाद जोड़ें. उच्च मूल्य तुम का उपयोग करें, अधिक कोने गोल.

यहाँ, मैं मेरे # सामग्री आईडी चयनकर्ता, जो div है कि मेरे पृष्ठ की सामग्री रखती है को नियंत्रित करने के लिए सीमा त्रिज्या आवेदन कर रहा हूँ, के रूप में आप शामिल स्क्रीन शॉट में देख सकते हैं. अपने काम को बचाने और बाहर अपने ब्राउज़र में अपने काम की जांच करने के लिए सुनिश्चित करें.

यदि आप अभी भी 90 डिग्री कोनों हो रही है, तो अपने ब्राउज़र कि इस सुविधा का समर्थन नहीं करता है. लेकिन बातों में पैक नहीं है अभी. चलो बाहर मैंने पहले उल्लेख किया है कि शांत चाल की जाँच करें.

चरण 2 - गोल कॉर्नर प्रभाव सुनिश्चित करना वर्क्स

के रूप में उल्लेख किया है, केवल लोकप्रिय ब्राउज़रों के नवीनतम संस्करण CSS3 सीमा त्रिज्या संपत्ति का समर्थन करते हैं. तो आप कैसे सुनिश्चित करें कि अपने लेआउट उपयोगकर्ताओं को जो अभी भी ब्राउज़रों कि एक संस्करण या दो पीछे कर रहे हैं का उपयोग कर रहे हैं के लिए काम करेंगे कर सकते हैं? आप कुछ अतिरिक्त कोड का उपयोग कर सकते हैं, के रूप में निम्नानुसार है.

पहले, चलो में जोड़ "MOZ सीमा त्रिज्या:" एक त्रिज्या के मान के द्वारा पीछा किया . इस लक्ष्य क्या छिपकली ब्राउज़रों के रूप में जाना जाता है - सबसे विशेष रूप से फ़ायर्फ़ॉक्स.

अगले, चलो में जोड़ "वेबकिट सीमा त्रिज्या:" एक ही मूल्य है कि हम ऊपर प्रयोग किया जाता द्वारा पीछा किया. यह सब WebKit आधारित ब्राउज़रों क्रोम और सफारी जैसे मारा हूँ. एक बार जोड़ा, अपने काम को बचाने और अपने ब्राउज़र को ताज़ा करें.

चरण 3 - अपवाद नियम साबित

अब इंटरनेट एक्सप्लोरर, हर वेब डिजाइनर की पसंदीदा ब्राउज़र (इस प्रकार) के बारे में क्या, आप से पूछना? खैर, उपरोक्त विकल्पों में से सभी काम नहीं करेगा. वास्तव में, कोड है कि हम इस बात के लिए जोड़ दिया है बस Explorer के द्वारा नजरअंदाज कर दिया जाएगा, और कोनों सिर्फ अपनी डिफ़ॉल्ट में 90 डिग्री स्टाइल है, जो इसे तोड़ने से बेहतर है प्रस्तुत करना होगा, है ना?! यह संभव है के लिए रवाना IE में गोल कोनों खींच है, लेकिन पता है कि यह अतिरिक्त काम का एक सा है, और हो सकता है कि कुछ है कि हम में एक भविष्य टिप में मिल सकता है. कुछ समय के लिए, हालांकि, अन्य सभी ब्राउज़रों में अपने गोल कोनों का आनंद!

सीएसएस अद्भुत है. पर अधिक डिस्कवर फ्लोटिंग सीएसएस लेआउट डिजाइनिंग .


Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link