All Articles Web
CSS3 लेआउट ऑब्जेक्ट्स पर गोल कोनों में बनाया गया
Geoff Blake on Thu, April 21st | 0 comments
If you haven't been doing much reading up yet on what's new in CSS3, it's pretty awesome. There are all sorts of newly introduced possibilities, including gradients, multiple columns, border images, a

यदि आप कर नहीं किया गया है ज्यादा में नया क्या है पर अभी तक पढ़ने 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 में गोल कोनों खींच है, लेकिन पता है कि यह अतिरिक्त काम का एक सा है, और हो सकता है कि कुछ है कि हम में एक भविष्य टिप में मिल सकता है. कुछ समय के लिए, हालांकि, अन्य सभी ब्राउज़रों में अपने गोल कोनों का आनंद!

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


Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: