सीएसएस के साथ हार्ट शेप कैसे बनाएं

हमारे दिल के आकार की नींव के रूप में तत्व.

फिर, हम इसे चौड़ाई और ऊंचाई को समान रूप से निर्दिष्ट करके एक वर्ग बनाते हैं। एक पृष्ठभूमि रंग चुनें जिसे आप पसंद करते हैं.

 .दिल के आकार की स्थिति: रिश्तेदार; चौड़ाई: 200px; ऊंचाई: 200 पीएक्स; पृष्ठभूमि-रंग: आरजीबीए (250,184,66, 0.8);  

अगला, हम मंडलियां बनाएंगे.

नए तत्वों को जोड़ने के बजाय, हम छद्म तत्वों का उपयोग करेंगे, : से पहले तथा :बाद. हमने पहले सेट किया : से पहले छद्म तत्व हमारे पहले चक्र के रूप में। हम इसे चौड़े और ऊंचाई पर समान आकार के साथ एक वर्ग बनाते हैं जैसे हमने डिव के साथ किया था। फिर हम इसे 50% की सीमा-त्रिज्या देकर एक वृत्त में बदलते हैं और इसे चौकोर के बाईं ओर रखते हैं.

 .दिल के आकार: पहले स्थिति: निरपेक्ष; नीचे: 0px; बाएं: -100 पीएक्स; चौड़ाई: 200px; ऊंचाई: 200 पीएक्स; सामग्री: "; -webkit- सीमा-त्रिज्या: 50%; -मोज़-बॉर्डर-त्रिज्या: 50%; -ओ-सीमा-त्रिज्या: 50%; सीमा-त्रिज्या: 50%; पृष्ठभूमि-रंग: rgba (250,184,66; , 0.8); 

एक साथ वर्ग के साथ हम इस तरह एक परिणाम होगा:

उसके बाद, हम छद्म तत्व के साथ दूसरा सर्कल बनाते हैं :बाद हमारे द्वारा बनाए गए पहले सर्कल के समान शैलियों के साथ। फिर, हम इसे वर्ग के शीर्ष पर भी स्थित करते हैं.

 .दिल के आकार: के बाद स्थिति: निरपेक्ष; शीर्ष: -100 पीएक्स; सही: 0px; चौड़ाई: 200px; ऊंचाई: 200 पीएक्स; सामग्री: "; -webkit- सीमा-त्रिज्या: 50%; -मोज़-बॉर्डर-त्रिज्या: 50%; -ओ-सीमा-त्रिज्या: 50%; सीमा-त्रिज्या: 50%; पृष्ठभूमि-रंग: rgba (250,184,66; , 0.8); 

परिणाम इस प्रकार हैं:

हम छद्म तत्व चयनकर्ताओं को निम्न प्रकार से जोड़कर इन दो शैलियों को जोड़ सकते हैं:

 .ह्रदय-आकार: पहले, .अर्थात-आकार: बाद स्थिति: निरपेक्ष; चौड़ाई: 200px; ऊंचाई: 200 पीएक्स; सामग्री: "; -webkit- सीमा-त्रिज्या: 50%; -मोज़-बॉर्डर-त्रिज्या: 50%; -ओ-सीमा-त्रिज्या: 50%; सीमा-त्रिज्या: 50%; पृष्ठभूमि-रंग: rgba (250,184,66; , 0.8); .हर्ट-शेप: इससे पहले बॉटम: 0px; लेफ्ट: -100px;; हियर-शेप: टॉप: -100px; राईट: 0px; 

टा-दा! हमारे पास एक दिल का आकार है, हालांकि यह अभी तक सही दिशा में नहीं है। इसे सीधा करने के लिए, हम CSS3 के परिवर्तन का उपयोग करेंगे.

परिवर्तन को आकार के मुख्य तत्वों को दिया जा सकता है; यहाँ, इसका मतलब है कि वर्ग। जब तब्दील हो जाता है, तो छद्म तत्व मुख्य तत्व के बाद स्वचालित रूप से अपनी स्थिति बदल देगा.

यहां हम दिल को घुमाएंगे इसलिए यह देखा गया है “खड़ा है”.

 .दिल के आकार का -वेबकैट-ट्रांसफ़ॉर्म: रोटेट (45deg); -मोज़-ट्रांसफ़ॉर्म: रोटेट (45 डिग्री); -ms-transform: रोटेट (45deg); -ओ-परिवर्तन: घुमाव (45 डिग्री); परिवर्तन: घुमाएँ (45 डिग्री);  

और यही हमारा दिल अब जैसा दिखता है.

परिणाम:

ऊपर दिल के आकार का पूरा कोड निम्नानुसार है, HTML में:

और हमारे सीएसएस पर, यह इस तरह होगा:

 .दिल के आकार की स्थिति: रिश्तेदार; चौड़ाई: 200px; ऊंचाई: 200 पीएक्स; -वेबकैट-ट्रांसफॉर्म: रोटेट (45 डीजी); -मोज़-ट्रांसफ़ॉर्म: रोटेट (45 डिग्री); -ms-transform: रोटेट (45deg); -ओ-परिवर्तन: घुमाव (45 डिग्री); परिवर्तन: घुमाएँ (45 डिग्री); पृष्ठभूमि-रंग: आरजीबीए (250,184,66, 1);  .हर्ट-शेप: पहले, .हर्ट-शेप: के बाद स्थिति: निरपेक्ष; चौड़ाई: 200px; ऊंचाई: 200 पीएक्स; सामग्री: "; -webkit- सीमा-त्रिज्या: 50%; -मोज़-बॉर्डर-त्रिज्या: 50%; -ओ-सीमा-त्रिज्या: 50%; सीमा-त्रिज्या: 50%; पृष्ठभूमि-रंग: rgba (250,184,66; , 1); .हर्ट-शेप: इससे पहले बॉटम: 0px; लेफ्ट: -100px;; हियर-शेप: टॉप: -100px; राईट: 0px; 

ध्यान दें कि अब हम अल्फा चैनल को सेट करते हैं आरजीबीए (250,184,66, 1) करने के लिए पृष्ठभूमि में 1 पारदर्शिता को दूर करने के लिए। अब यही हमारा दिल दिखता है.

अब जब हमारे पास एक सही दिल का आकार है, तो हम कर सकते हैं पृष्ठभूमि को दूसरे रंग में बदलें (जैसे गुलाबी या लाल) सहजता से। यहाँ केवल नकारात्मक पक्ष यह है कि हम एक सीमा नहीं जोड़ सका ढेर तत्वों के कारण आकार के लिए। बॉर्डर लाइन जोड़ने से दिल अजीब लगेगा.

निष्कर्ष

CSS3 के साथ हार्ट शेप जैसी आकृति बनाना अब आसानी से संभव है। सीमा-त्रिज्या संपत्ति हमें करने की अनुमति देती है एक चक्र में तत्वों या एक छद्म तत्व भी बनाते हैं. CSS3 के परिवर्तन के साथ, हम कर सकते हैं वस्तु के निर्देशांक को घुमाना या ले जाना आसानी से.

आप केवल अपनी रचनात्मकता और कल्पना से सीमित हैं!