CSS3 के फूल गुलदस्ता

थोड़ी सी पृष्ठभूमि: 8 मार्च को मैंने अपने ब्लॉग पर फूलों का ऐसा गुलदस्ता यहां पोस्ट किया। एक हफ्ते के भीतर, कई लोगों ने इसके कार्यान्वयन में रुचि ली - और आज तक काफी संक्षेप में उत्तर दिया - सीमा-त्रिज्या, इनर-ग्रेडिएंट और ट्रांसफॉर्म का उपयोग करना।
लेकिन अगर किसी को दिलचस्पी थी, तो एक विस्तृत मैनुअल क्यों नहीं लिखा?
आवश्यकताओं में से एक प्रति फूल की वस्तुओं की न्यूनतम संख्या थी - यह मामूली कोड परिवर्तन के साथ किसी भी संख्या में रंगों का उपयोग करने की अनुमति देगा। मुझे केवल 5 वस्तुएं मिलीं, जिनमें तना और पत्ती शामिल है, लेकिन यदि आप चाहें, तो आप अधिक जटिल फूल खींच सकते हैं।

कोड की सादगी और विज़ुअलाइज़ेशन के लिए, मैं उपसर्गों को छोड़ दूंगा, लेकिन मुझे आपको चेतावनी देनी चाहिए कि WebKit इंजन (Safari और Chrome) के ब्राउज़र बिना उपसर्ग के ट्रांसफ़ॉर्म प्रॉपर्टी को नहीं समझते हैं - आपको अतिरिक्त रूप से -webkit- ट्रांसफ़ॉर्म प्रॉपर्टी को निर्दिष्ट करना होगा। सभी ब्राउज़र ढाल और छाया को समझते हैं (इस लेख के ढांचे के भीतर मैं खुद को खोजकर्ता को एक ब्राउज़र पर विचार नहीं करने की अनुमति देता हूं, लेकिन आप चाहें तो इसे इसके लिए आकर्षित कर सकते हैं)।

सबसे पहले, सभी पंखुड़ियों के लिए एक सामान्य रिक्त बनाएँ:

.petalbottomright, .petalbottomleft, .petaltopcenter{ background: #601719; background: linear-gradient(top, #da2b2a, #601719); border:1px solid #000; box-shadow: 1px 1px 4px #333; } 

रंग और ढाल के कारण सवाल नहीं होना चाहिए, और अनियमितता को छिपाने के लिए फ्रेम और छाया सेट किया गया है, अगर मैं ऐसा कह सकता हूं तो "सीएसएस विरोधी अलियासिंग"।

तो सही पालि:

 .petalbottomright{ position:absolute; top:10px; width: 30px; height: 83px; border-top-right-radius: 74px; border-bottom-left-radius: 56px; transform: rotate(355deg); } 

आयामों के कारण प्रश्न नहीं होने चाहिए। हम दाहिने ऊपरी और बाएँ निचले कोनों (क्रमशः बॉर्डर-टॉप-राइट-रेडियस और बॉर्डर-बायीं-बाईं-त्रिज्या) को गोल करते हैं, और परिवर्तन का उपयोग करके अपनी धुरी के चारों ओर पूरे ब्लॉक को घुमाते हैं।

हम बाएं पंखुड़ी को दाएं के साथ सादृश्य द्वारा करते हैं:

 .petalbottomleft{ position:absolute; top:10px; margin-left:30px; width: 36px; height: 86px; border-top-left-radius: 74px; border-bottom-right-radius: 46px; transform: rotate(12deg); } 

केंद्रीय पंखुड़ी, सबसे छोटी:

 .petaltopcenter{ margin-left:15px; width: 40px; height: 40px; border-top-left-radius: 74px; transform: rotate(50deg); } 

अब उपजा है, पहले कटाई से निपटने के लिए:

 .stem1, .stem2, .stem3{ position:absolute; margin-left:30px; width: 10px; height: 180px; background: linear-gradient(left, #028e31, #601719); } 

ध्यान दें कि ढाल ऊपर से नीचे तक नहीं जाती है, लेकिन बाएं से दाएं जाती है।

और उपजी के लिए इंडेंटेशन, यह मुझे लग रहा था कि उन्हें अलग बनाया जाना चाहिए:

 .stem1{margin-top:70px;} .stem2{margin-top:90px;} .stem3{margin-top:80px;margin-left:23px;} 

पत्ते बचे थे, मेरा वर्कपीस इस तरह निकला:

 .leftleaf, .rightleaf, .centerleaf{ position:absolute; width: 60px; height: 30px; background: linear-gradient(left, #028e31, #601719); } 

और पत्तियां खुद को केवल कोनों के इंडेंटेशन और त्रिज्या के साथ अलग करती हैं:

 .leftleaf { margin-top: 120px; margin-left: 24px; border-bottom-left-radius: 32px; border-top-right-radius: 30px; } .rightleaf { margin-top: 170px; margin-left: -23px; border-bottom-right-radius: 36px; border-top-left-radius: 36px; } .centerleaf { margin-top: 120px; margin-left: -28px; border-bottom-right-radius: 38px; border-top-left-radius: 32px; } 

हमारे पास पहले से ही फूल हैं, उन्हें एक गुलदस्ता में इकट्ठा करने का समय है। यहाँ परिणामी HTML है:

  <div class="flower1"> <div class="stem1"></div> <div class="petaltopcenter"></div> <div class="petalbottomright"></div> <div class="petalbottomleft"></div> <div class="centerleaf"></div> </div> <div class="flower2"> <div class="stem2"></div> <div class="petaltopcenter"></div> <div class="petalbottomright"></div> <div class="petalbottomleft"></div> <div class="rightleaf"></div> </div> <div class="flower3"> <div class="stem3"></div> <div class="petaltopcenter"></div> <div class="petalbottomright"></div> <div class="petalbottomleft"></div> <div class="leftleaf"></div> </div> 

प्रत्येक फूल में तीन पंखुड़ियाँ, एक तना और एक पत्ती होती है, जिसे कंटेनर फूल 1, फूल 2 और फूल 3 के अंदर रखा जाता है। और हम विभिन्न कोणों पर खुद फूलों की व्यवस्था करेंगे, ताकि यह एक गुलदस्ता की तरह दिखे:

 .flower1{ margin-left:82px; position:absolute; transform: rotate(357deg) scale(1,1.2); -webkit-transform: rotate(357deg) scale(1,1.2); } .flower2{ margin-top:30px; position:absolute; transform: rotate(335deg) scale(1,1.2); -webkit-transform: rotate(335deg) scale(1,1.2); } .flower3{ margin-left:172px; position:absolute; transform: rotate(20deg) scale(1.1,1.2); -webkit-transform: rotate(20deg) scale(1.1,1.2); } 

और निश्चित रूप से, कोई भी आपको अपने आप को केवल तीन रंगों तक सीमित करने के लिए मजबूर नहीं करता है - उनमें से अधिक, बेहतर। महिलाओं के लिए;)