CSS3 बॉर्डर-इमेज प्रॉपर्टी मेकिंग फोटोज वाकई कूल!
सीमाएँ बनाना कोई नई बात नहीं है एचटीएमएल और सीएसएस; हम शुरुआत से ही सीमाओं को जोड़ने में सक्षम हैं। आप ठोस सीमाओं, बिंदीदार सीमाओं, धराशायी सीमाओं आदि से परिचित हो सकते हैं.
लेकिन, नई CSS3 सीमा-छवि संपत्ति के साथ, HTML तत्व पर सीमाएं बनाना अधिक उन्नत होता जा रहा है; ठीक है, सीधे शब्दों में कहें, तो अब हम स्रोत के रूप में एक छवि का उपयोग करके एक सीमा को जोड़ने में सक्षम हैं जो हमें और अधिक आकर्षक सीमाओं को जोड़ने की अनुमति देगा। सब ठीक है, अब देखते हैं कि यह संपत्ति कैसे काम करती है.
सिंटैक्स और ब्राउज़र समर्थन
CSS3 में बॉर्डर इमेज को निम्नलिखित शॉर्टहैंड सिंटैक्स का उपयोग करके परिभाषित किया गया है:
बॉर्डर-इमेज: [इमेज सोर्स] [स्लाइस] [चौड़ाई] [आउटसेट] [रिपीट];
ऊपर सिंटैक्स W3C का आधिकारिक संस्करण है जो केवल क्रोम में समर्थित है, जबकि ओपेरा, फ़ायरफ़ॉक्स और सफारी को अभी भी उपसर्ग संस्करण की आवश्यकता है (-ओ-, -moz-, -वेबकिट-), और इंटरनेट एक्सप्लोरर अनिश्चित रूप से इस संपत्ति का समर्थन नहीं करता है.
इसके अलावा, [चौड़ाई] और यह [शुरू] इस में मूल्य सीमा की छवि संपत्ति अभी तक किसी भी ब्राउज़र में समर्थित नहीं है, हालांकि, चौड़ाई मान का उपयोग करके बदला जा सकता है सीमा चौड़ाई संपत्ति.
तो, संक्षेप में, अभी के लिए हम केवल के मूल्य को लागू कर सकते हैं [छवि स्रोत], [टुकड़ा] तथा [दोहराने] .
बॉर्डर-इमेज: [इमेज सोर्स] [स्लाइस] [रिपीट];
छवि स्लाइस
इससे पहले कि हम इस संपत्ति को प्रदर्शित करने के लिए आगे बढ़ें, आइए बात करते हैं “छवि टुकड़ा” सबसे पहले यह एक संपत्ति की घोषणा करने में कुछ नया है। यहाँ छवि का टुकड़ा छवि के कट को परिभाषित करेगा जो क्रमशः शीर्ष, दाएं, नीचे और बाएं से छवि बिंदुओं को लेता है, जो बाद में छवि को नौ खंडों में विभाजित करेगा, जैसा कि निम्नलिखित छवि के साथ सचित्र है.
ऊपर की छवि में, आप देखेंगे कि अनुभाग 1, 3, 7 तथा 9 सीमा के कोनों, और वर्गों बन जाएगा 2, 4, 6 तथा 8 सीमा किनारे या रेखा बन जाएगी, जिससे यह सुनिश्चित हो जाएगा कि वह खंड जहां किनारे बन जाएगा वह पुन: प्रयोज्य या फैलने योग्य है.
स्लाइस का मूल्य ए के साथ घोषित किया जा सकता है पिक्सेल इकाई या प्रतिशत (%) लचीला माप के लिए इकाई.
अधिक संदर्भ:
- सीएसएस पृष्ठभूमि और सीमा स्तर 3
फोटो फ्रेम बनाना
अब, एक वास्तविक उदाहरण में संपत्ति का प्रदर्शन करते हैं.
इस बार, हम इसे लागू करने जा रहे हैं सीमा की छवि एक फोटो फ्रेम बनाने के लिए संपत्ति और हम स्रोत के रूप में नीचे की छवि का उपयोग करेंगे। हमने छवि को सावधानीपूर्वक मापा है ताकि सामग्री की चौड़ाई और ऊंचाई की परवाह किए बिना इसे ठीक से कटा हुआ, दोहराया और बढ़ाया जा सके.
ध्यान दें: आप ऊपर दिए गए चित्र को इस लिंक से डाउनलोड कर सकते हैं.
इसके अलावा, इस प्रदर्शन में हम फोटो के रूप में फ्रॉम मी टू यू द्वारा इस तेजस्वी सिनेमोग्राफ का उपयोग करेंगे.
(इमेज सोर्स: फ्रॉम मी टू यू)
मार्कअप
मार्कअप इस रूप में सरल है:
को बदलने के लिए मत भूलना images_2 / css3 सीमा छवि संपत्ति बनाने-फ़ोटो-सच-cool_3.jpg अपनी खुद की फोटो के साथ.
शैलियों
और फिर, चलो इसे एक फ्रेम का उपयोग कर देते हैं सीमा की छवि.
यदि आप ऊपर की छवि को देखते हैं, तो हमारी छवि चौड़ाई है 180px कुल मिलाकर। इस मान को तब विभाजित किया जा सकता है 6 प्रत्येक विभाजन जो किया जा रहा है 30px; और इसलिए हम छवि के लिए टुकड़ा होगा 30px.
यदि आप स्लाइस के लिए लंबाई मान का उपयोग करते हैं, तो आपको बाहर करना चाहिए पिक्सल इकाई, क्योंकि यह स्वचालित रूप से अनुवाद किया जाएगा पिक्सेल, लेकिन अगर आप प्रतिशत का उपयोग करने का निर्णय लेते हैं तो आपको अभी भी जोड़ना होगा (%).
छवि पुनरावृत्ति के लिए, हम डिफ़ॉल्ट का उपयोग करेंगे; दोहराना. वैकल्पिक रूप से, आप उपयोग कर सकते हैं खिंचाव और चिंता मत करो, सीमा छवि अभी भी सुंदर दिखेगी.
img बॉर्डर-इमेज: url ("इमेज / फ्रेम.पंज") 30 रिपीट; -o-border-image: url ("images / फ्रेम.png") 30 रिपीट; -मोज़-बॉर्डर-इमेज: url ("images / फ्रेम.png") 30 रिपीट; -webkit- बॉर्डर-इमेज: url ("इमेज / फ्रेम.पिंग") 30 रिपीट; सीमा-चौड़ाई: 30 पीएक्स; इसके अलावा, हम छवि को ब्राउज़र विंडो के केंद्र में भी रखना चाहते हैं और साथ ही दस्तावेज़ को पृष्ठभूमि बनावट जोड़कर उसे अधिक आकर्षक बनाने के लिए चाहते हैं.
html पृष्ठभूमि: url ('चित्र / lightpaperfibers.png'); .wrapper मार्जिन: 20 पीएक्स ऑटो; ऊंचाई: 476px; चौड़ाई: 675px; पाठ-संरेखण: केंद्र; सब ठीक है, मुझे लगता है कि हम यहाँ कर रहे हैं, अब इसे एक ब्राउज़र में देखते हैं.
- डेमो
- स्रोत डाउनलोड करें
क्या आपको ऐसा लगता है कि आप हॉगवर्ट्स में एक जादुई पेंटिंग देख रहे हैं?
अंतिम विचार
इस सीमा की छवि निस्संदेह CSS3 परिवार में एक अच्छा जोड़ है; अब हम सरल सादे सीमाओं तक सीमित नहीं रहेंगे.
और इस पोस्ट में, हमने आपको दिखाया है कि कैसे हम सामग्री के बारे में या इस मामले में फोटो के आयाम (चौड़ाई और ऊंचाई) की चिंता किए बिना एक छवि फ्रेम बना सकते हैं। ऊंचाई और चौड़ाई लचीली हो सकती है, जब तक कि सीमा का स्रोत रिपीटेबल या स्ट्रेचेबल हो.
अंत में, यदि आप अभी भी थोड़ा हैरान हैं सीमा की छवि, एक उपकरण है जिसका उपयोग आप एक और आसानी से बनाने में मदद करने के लिए कर सकते हैं: बॉर्डर इमेज टूल
