क्या आपने कभी एक शुद्ध सीएसएस वेबसाइट देखी है जहां प्रत्येक तत्व सीएसएस के माध्यम से समाप्त हो गया है? CSS केवल स्टाइलिंग तत्वों से अधिक करता है। CSS आकृतियाँ वेब डिज़ाइनरों को त्रिभुज, वृत्त, बहुभुज, और बहुत कुछ जैसे कस्टम पथ बनाने की अनुमति देती हैं। इस तरह, अब आप एक पारदर्शी पृष्ठभूमि के साथ एक फ़्लोटिंग छवि डालने के लिए बाध्य नहीं हैं, केवल इसके चारों ओर एक आयताकार बॉक्स से निराश होने के लिए।
इस लेख में, हम विभिन्न आकृतियों को कोड करने के लिए CSS आकृतियों और कुछ कार्यात्मक मानों का उपयोग करेंगे।
मूल सीएसएस आकार बनाना
आइए मूल आकृतियों जैसे वर्ग, आयत, त्रिभुज, वृत्त और दीर्घवृत्त से शुरू करें।
वर्ग और आयत
CSS में बनाने के लिए वर्गाकार और आयत सबसे आसान आकार हैं। आपको बस इतना करना है कि a. बनाना है और दे दो ऊंचाई और एक चौड़ाई.
एचटीएमएल
सीएसएस
.आरईसी-वर्ग {
प्रदर्शन: फ्लेक्स;
अंतराल: 2em;
मार्जिन: 2em;
}
।वर्ग {
चौड़ाई: 15rem;
ऊंचाई: 15 रेम;
पृष्ठभूमि: आरजीबी (255, 123, 0);
}
आयत {
चौड़ाई: 24rem;
ऊंचाई: 14rem;
पृष्ठभूमि: आरजीबी (0, 119, 128);
}
आउटपुट:
वृत्त और दीर्घवृत्त
आपको बस एक असाइन करने की आवश्यकता है
बॉर्डर-त्रिज्या 50% से एक वर्ग तक और आपको एक वृत्त प्राप्त होगा। एक दीर्घवृत्त प्राप्त करने के लिए आयत के साथ भी ऐसा ही करें।एचटीएमएल
सीएसएस
।वृत्त {
चौड़ाई: 15rem;
ऊंचाई: 15 रेम;
पृष्ठभूमि: आरजीबी (255, 123, 0);
सीमा-त्रिज्या: 50%;
}
.दीर्घवृत्त {
चौड़ाई: 24rem;
ऊंचाई: 14rem;
पृष्ठभूमि: आरजीबी (0, 119, 128);
सीमा-त्रिज्या: 50%;
}
आउटपुट:
त्रिभुज
हम त्रिभुज बनाने के लिए बॉर्डर का उपयोग करेंगे। आश्चर्य है कि यह कैसे काम करता है? आपको बस इतना करना है कि सेट करना है चौड़ाई तथा ऊंचाई त्रिभुज से शून्य तक। इसका अर्थ है, आगे बढ़ना, वास्तविक चौड़ाई तत्व का होगा सीमा की चौड़ाई. इसके अलावा, आप पहले से ही जानते होंगे कि सीमा के किनारे एक दूसरे के 45-डिग्री विकर्ण हैं। प्रत्येक बॉर्डर को अलग-अलग रंग दें और उनमें से किन्हीं तीन को पारदर्शी पर सेट करें। अंत में, आपके पास अपना त्रिकोण होगा।
एचटीएमएल
सीएसएस
// सभी के लिए सामान्य
तन {
प्रदर्शन: फ्लेक्स;
अंतर: 5em;
मार्जिन: 15em;
}.नमूना {
ऊंचाई: 8.5em;
चौड़ाई: 8.5em;
सीमा-शीर्ष: 1em ठोस #9ee780;
सीमा-दाएं: 1em ठोस आरजीबी (240, 241, 141);
बॉर्डर-बॉटम: 1em सॉलिड आरजीबी (145, 236, 252);
सीमा-बाएं: 1em ठोस आरजीबी (248, 115, 106);
}.त्रिकोण {
ऊंचाई: 0;
चौड़ाई: 0;
बॉर्डर-टॉप: 5em सॉलिड #9ee780;
सीमा-दाएं: 5em ठोस आरजीबी (240, 241, 141);
बॉर्डर-बॉटम: 5em सॉलिड आरजीबी (145, 236, 252);
सीमा-बाएं: 5em ठोस आरजीबी (248, 115, 106);
}
आउटपुट:
आप के साथ खेल सकते हैं ऊंचाई तथा सीमा रंग विभिन्न प्रकार के त्रिभुज प्राप्त करने के लिए। उदाहरण के लिए, आप देकर ऊपर की दिशा की ओर इशारा करते हुए एक त्रिभुज बना सकते हैं सीमा-नीचे एक ठोस रंग जबकि अन्य सभी सीमाएँ पारदर्शी पर सेट हैं। साथ ही, आप के साथ खेलकर सही दिशा की ओर इशारा करते हुए एक त्रिभुज बना सकते हैं या एक समकोण त्रिभुज बना सकते हैं सीमा चौड़ाई तथा सीमा रंग.
एचटीएमएल
सीएसएस
.त्रिकोण-अप {
ऊंचाई: 0;
चौड़ाई: 0;
सीमा-शीर्ष: 5em ठोस पारदर्शी;
सीमा-दाएं: 5em ठोस पारदर्शी;
बॉर्डर-बॉटम: 5em सॉलिड आरजीबी (145, 236, 252);
सीमा-बाएं: 5em ठोस पारदर्शी;
}
.त्रिकोण-दाएं {
चौड़ाई: 0;
ऊंचाई: 0;
सीमा-शैली: ठोस;
सीमा-चौड़ाई: 4em 0 4em 8em;
सीमा-रंग: पारदर्शी पारदर्शी पारदर्शी आरजीबी (245, 149, 221);
}
.त्रिकोण-नीचे-दाएं {
चौड़ाई: 0;
ऊंचाई: 0;
सीमा-शैली: ठोस;
सीमा-चौड़ाई: 8em 0 0 8em;
सीमा-रंग: पारदर्शी पारदर्शी पारदर्शी आरजीबी (151, 235, 158);
}
आउटपुट:
CSS का उपयोग करके उन्नत आकार बनाना
आप उपयोग कर सकते हैं ::इससे पहले तथा ::उपरांतछद्म तत्वों उन्नत आकार बनाने के लिए। स्थिति और परिवर्तन गुणों के बुद्धिमान उपयोग के साथ, आप शुद्ध सीएसएस का उपयोग करके आसानी से जटिल आकार बना सकते हैं।
स्टार आकार (5-अंक)
आपको परिवर्तन के रोटेट मान का उपयोग करके सीमाओं में हेरफेर करना होगा। विचार a. का उपयोग करके दो पक्ष बनाना है वर्ग = "स्टार", अन्य दो पक्ष का उपयोग कर रहे हैं ::उपरांत तत्व, और अंतिम पक्ष का उपयोग कर ::इससे पहले तत्व।
एचटीएमएल
सीएसएस
.स्टार-पांच {
मार्जिन: 3.125em 0;
स्थिति: रिश्तेदार;
प्रदर्शन क्षेत्र;
चौड़ाई: 0em;
ऊंचाई: 0em;
सीमा-दाएं: 6.25em ठोस पारदर्शी;
सीमा-नीचे: 4.3em ठोस आरजीबी (255, 174, 81);
सीमा-बाएं: 6.25em ठोस पारदर्शी;
परिवर्तन: घुमाएँ (35डिग्री);
}
.स्टार-पांच: पहले {
सीमा-नीचे: 5em ठोस आरजीबी (255, 174, 81);
सीमा-बाएं: 2em ठोस पारदर्शी;
सीमा-दाएं: 1.875em ठोस पारदर्शी;
स्थिति: निरपेक्ष;
ऊंचाई: 0;
चौड़ाई: 0;
शीर्ष: -45 पीएक्स;
बाएं: -65px;
प्रदर्शन क्षेत्र;
विषय: '';
ट्रांसफॉर्म: रोटेट (-35 डिग्री);
}
.स्टार-पांच: के बाद {
स्थिति: निरपेक्ष;
प्रदर्शन क्षेत्र;
शीर्ष: 3 पीएक्स;
बाएं: -105px;
चौड़ाई: 0;
ऊंचाई: 0;
सीमा-दाएं: 6.25em ठोस पारदर्शी;
सीमा-नीचे: 4.3em ठोस आरजीबी (255, 174, 81);
सीमा-बाएं: 5.95em ठोस पारदर्शी;
ट्रांसफ़ॉर्म: रोटेट (-70deg);
विषय: '';
}
आउटपुट:
पंचकोण
आप एक समलम्ब और एक त्रिभुज को मिलाकर एक पंचभुज बना सकते हैं। उपयोग बॉर्डर तथा स्थिति गुण उन्हें आकार दें और समूहित करें।
एचटीएमएल
सीएसएस
पेंटागन {
स्थिति: रिश्तेदार;
चौड़ाई: 10em;
बॉक्स-साइज़िंग: सामग्री-बॉक्स;
सीमा-चौड़ाई: 10em 5em 0;
सीमा-शैली: ठोस;
सीमा-रंग: आरजीबी (7, 185, 255) पारदर्शी;
मार्जिन-टॉप: 20rem;
मार्जिन-बाएं: 10rem;
}
पेंटागन: पहले {
विषय: "";
स्थिति: निरपेक्ष;
ऊंचाई: 0;
चौड़ाई: 0;
शीर्ष: -18em;
बाएं: -5em;
सीमा-चौड़ाई: 0 10em 8em;
सीमा-शैली: ठोस;
सीमा-रंग: पारदर्शी पारदर्शी आरजीबी (7, 185, 255);
}
आउटपुट:
हीरा
हीरे की आकृति बनाने के लिए स्थिति का उपयोग करके ऊपर और नीचे की ओर इशारा करते हुए दो त्रिकोणों को समूहित करें। हाँ, हम उपयोग करेंगे बॉर्डर इन त्रिभुजों को बनाने के गुण।
एचटीएमएल
सीएसएस
हीरा {
चौड़ाई: 0;
ऊंचाई: 0;
स्थिति: रिश्तेदार;
शीर्ष: -3em;
सीमा: 3em ठोस पारदर्शी;
सीमा-नीचे-रंग: आरजीबी (129, 230, 255);
}
.हीरा: के बाद {
विषय: '';
चौड़ाई: 0;
ऊंचाई: 0;
स्थिति: निरपेक्ष;
बाएं: -3em;
शीर्ष: 3em;
सीमा: 3em ठोस पारदर्शी;
सीमा-शीर्ष-रंग: आरजीबी (129, 230, 255);
}
आउटपुट:
आप नीचे दिखाए गए अनुसार शीर्ष-त्रिकोण की ऊंचाई को बदलकर हीरे की ढाल का आकार बना सकते हैं:
एचटीएमएल
सीएसएस
.हीरा-ढाल
{
चौड़ाई: 0;
ऊंचाई: 0;
सीमा: 3em ठोस पारदर्शी;
बॉर्डर-बॉटम: 1.25em सॉलिड आरजीबी (71, 194, 231);
स्थिति: रिश्तेदार;
शीर्ष: -3em;
}
.डायमंड-कट: के बाद {
विषय: '';
स्थिति: निरपेक्ष;
बाएं: -3em;
शीर्ष: 1.25em;
चौड़ाई: 0;
ऊंचाई: 0;
सीमा: 3em ठोस पारदर्शी;
बॉर्डर-टॉप: 4.4em सॉलिड आरजीबी (71, 194, 231);
}
आउटपुट:
दिल
दिल का आकार थोड़ा सख्त होता है लेकिन आप इसे इस्तेमाल करके कर सकते हैं ::इससे पहले तथा ::उपरांत छद्म तत्व। आप के विभिन्न मूल्यों का उपयोग कर सकते हैं परिवर्तन उन्हें अलग-अलग कोणों से घुमाने के लिए जब तक कि वे पूरी तरह से दिल का आकार न बना लें। अंत में, आप सेट कर सकते हैं बदलने मूल के उस बिंदु को सेट करने के लिए जिसके चारों ओर परिवर्तन लागू किया गया है।
एचटीएमएल
सीएसएस
।दिल {
चौड़ाई: 6.25em;
ऊंचाई: 55em;
स्थिति: रिश्तेदार;
}
दिल: पहले,
दिल: के बाद {
विषय: "";
चौड़ाई: 3em;
ऊंचाई: 5em;
स्थिति: निरपेक्ष;
बाएं: 3em;
शीर्ष: 0;
पृष्ठभूमि: लाल;
सीमा-त्रिज्या: 3em 3em 0 0;
ट्रांसफ़ॉर्म: रोटेट (-45deg);
परिवर्तन-मूल: 0 100%;
}
दिल: के बाद {
बाएं: 0;
ट्रांसफॉर्म: रोटेट (45 डिग्री);
परिवर्तन-मूल: 100% 100%;
}
आउटपुट:
शुद्ध सीएसएस आकृतियों के साथ प्रयोग
अब आपको विभिन्न शुद्ध सीएसएस छवियों से परिचित होना चाहिए जिन्हें कोड की कुछ पंक्तियों को लिखकर बनाया जा सकता है। एक सुपर-फास्ट वेबसाइट बनाना अब कोई व्यस्त काम नहीं है क्योंकि आप जानते हैं कि कोड के साथ कैसे खेलना है। सबसे अच्छी बात यह है कि आप अपनी आवश्यकता के अनुसार विभिन्न आकृतियों और रंगों में हेरफेर करके ब्रांड की आवाज के साथ प्रतिध्वनित हो सकते हैं। इसलिए, प्रयोग जारी रखें और सीएसएस द्वारा पूरी तरह से भयानक आकृतियों को आकर्षित करने के नए तरीके खोजें।
सभी शुरुआती वेब देवों को कॉल करना: यह ट्यूटोरियल आपको केवल HTML और CSS का उपयोग करके अपने स्वयं के उत्तरदायी नेवबार बनाने के लिए आवश्यक कौशल प्रदान करेगा!
आगे पढ़िए
- प्रोग्रामिंग
- सीएसएस
- वेब डिजाइन
- वेब विकास
नैंसी अत्यधिक प्रतिक्रियाशील वेबसाइटों और वेब प्रतियों के साथ कुशल सामग्री रणनीति बनाने में माहिर हैं। वह एक स्वतंत्र तकनीकी लेखिका हैं, जो ट्रेंडिंग तकनीकों पर पैनी नज़र रखती हैं।
हमारे न्यूज़लेटर की सदस्यता लें
तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!
सब्सक्राइब करने के लिए यहां क्लिक करें