मैजिक सर्कल: सीएसएस पहेली

शुभ दिन, प्रिय Kravravchians। हाल ही में, ह्यूगो जिराउडेल , उर्फ ​​सीएसएस गॉब्लिन, एसएएसए हैकर और मार्जिन साइको ने अपने ब्लॉग पर एक बहुत ही दिलचस्प सीएसएस पहेली कार्य पोस्ट किया।



क्या आप इसे इस तरह बना सकते हैं, जो निम्न नियम हैं?

• केंद्र में सर्कल पारदर्शी होना चाहिए ताकि पृष्ठभूमि दिखाई दे
• बाएं और दाएं ब्लॉकों के बीच की दूरी, ऊपर और नीचे दोनों के बीच की दूरी समान होनी चाहिए
• यदि ब्लॉक में बच्चे हैं, तो सामग्री प्रदर्शित होनी चाहिए
• DOM को इस तरह दिखना चाहिए: ul> li> अनुभाग> शीर्ष लेख + पाद
• आप जावास्क्रिप्ट और छवियों का उपयोग नहीं कर सकते
• मैं इसे स्वयं पूरक करूंगा: आप CSS आकार और क्लिप पथ का उपयोग नहीं कर सकते

बहुत आलसी नहीं होने के लिए - फ्रेम पहले से ही है ।

कर चुके हैं?


मूल HTML:

<ul class="boxes"> <li class="box box-alpha"> <section class="box-content"> <header class="box-header"></header> <footer class="box-footer"></footer> </section> </li> <li class="box box-beta"> <section class="box-content"> <header class="box-header"></header> <footer class="box-footer"></footer> </section> </li> <li class="box box-gamma"> <section class="box-content"> <header class="box-header"></header> <footer class="box-footer"></footer> </section> </li> <li class="box box-delta"> <section class="box-content"> <header class="box-header"></header> <footer class="box-footer"></footer> </section> </li> </ul> 

मैं इस पोस्ट में उन शैलियों के साथ स्थान नहीं भरूंगा जो प्रतिबिंबित करती हैं और ब्लॉक करती हैं। मैं केवल केंद्र में एक सर्कल की उपस्थिति का संकेत दूंगा जो सभी उदाहरणों में समान है:

 .boxes:after { background: none repeat scroll 0 0 #34495E; border: 0.5em solid #2C3D50; border-radius: 50%; content: " "; height: 5.5em; left: 50%; margin-left: -2.75em; position: absolute; top: 10.75em; width: 5.5em; } 

पहला तरीका: रेडियल ग्रेडिएंट

आपको ऊपरी ब्लॉक के लिए सभी पाद तत्वों के लिए रंग और पारदर्शिता के साथ सही रेडियल ग्रेडिएंट सेट करने की आवश्यकता है और निचले ब्लॉकों के लिए सभी हेडर तत्व। पहली नज़र में, यह इसे हल करने का सबसे तुच्छ तरीका है, लेकिन इसमें एक आकर्षण है, जो जवाबदेही देने के लिए सीएसएस कैल्क () का उपयोग करना है:

 .box-alpha .box-footer { background: radial-gradient(circle at calc(100% + 2em) 7em , rgba(0, 0, 0, 0) 6em, #148F77 6em) repeat scroll 0 0 rgba(0, 0, 0, 0); } .box-beta .box-footer { background: radial-gradient(circle at -2em 7em , rgba(0, 0, 0, 0) 6em, #25A25A 6em) repeat scroll 0 0 rgba(0, 0, 0, 0); } .box-gamma .box-header { background: radial-gradient(circle at calc(100% + 2em) -2em , rgba(0, 0, 0, 0) 6em, #217DBB 6em) repeat scroll 0 0 rgba(0, 0, 0, 0); } .box-delta .box-header { background: radial-gradient(circle at -2em -2em , rgba(0, 0, 0, 0) 6em, #804399 6em) repeat scroll 0 0 rgba(0, 0, 0, 0); } 

दूसरा तरीका: छद्म तत्वों के लिए फ्रेम

मुझे लगता है कि यह सबसे आविष्कारशील समाधान है। शीर्षकों और पाद लेख तत्वों के लिए, प्रत्येक ब्लॉक के अनुसार, वांछित दिशा में मार्जिन सेट करें। फिर पाद लेख के साथ प्रत्येक अनुभाग और हेडर के लिए हम छद्म तत्व बनाते हैं:

 .box-alpha .box-content:before { border-color: #148F77 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #148F77; bottom: -7.5em; right: -7.5em; } .box-content:before { border: 10em solid #FF0000; content: ""; display: block; height: 0; position: absolute; width: 0; } .box-alpha .box-content:after { border-color: #148F77; bottom: -10em; right: -10em; } .box-content:after { border: 2em solid #FF0000; border-radius: 30em; content: ""; display: block; height: 12em; position: absolute; width: 12em; z-index: 0; } ... 

ध्यान दें: .box- अल्फा के लिए, जिसकी कोई चौड़ाई या ऊंचाई नहीं है। हम याद करते हैं कि कैसे हम सभी सीमा का उपयोग करके सीएसएस में तीर या त्रिकोण बनाने के लिए उपयोग किए जाते हैं। वही सिद्धांत यहाँ है।

तीसरा तरीका: छाया और नकारात्मक मार्जिन

मेरा पसंदीदा समाधान, सीएसएस में सबसे सूक्ष्म बारीकियों की गहन समझ का प्रदर्शन। पिछले संस्करण की तरह, तत्वों के लिए एक छद्म तत्व बनाएं और सही पैडिंग सेट करें। प्रत्येक ब्लॉक का तत्व, जिसका हिस्सा एक चौथाई सर्कल में कट जाना चाहिए, पूरी तरह से पारदर्शी है। पृष्ठभूमि को छद्म तत्व की विशाल बाहरी छाया द्वारा निर्धारित किया गया है।

 .block__element--cut:before { border-radius: 50%; content: ""; height: 8em; margin: -5em; position: absolute; width: 8em; z-index: -1; } .block:nth-child(1) .block__element--cut:before { bottom: 0; box-shadow: 0 0 0 40em #0F414C; right: 0; } .block:nth-child(2) .block__element--cut:before { bottom: 0; box-shadow: 0 0 0 40em #673A01; left: 0; } .block:nth-child(3) .block__element--cut:before { box-shadow: 0 0 0 40em rgba(187, 169, 255, 0.65); right: 0; top: 0; } .block:nth-child(4) .block__element--cut:before { box-shadow: 0 0 0 40em rgba(176, 214, 95, 0.65); left: 0; top: 0; } 

लेकिन यहां सबसे सुरुचिपूर्ण एक छाया बिल्कुल नहीं है। और एक नकारात्मक मार्जिन मूल्य का उपयोग कर : -5em । पूर्ण स्थिति सही, नीचे के साथ, मान मार्जिन-सही: -5em और मार्जिन-तल: -5em, क्रमशः, तत्व के लिए कार्य करेगा।

मूल ह्यूगो एसएएस समाधान यहां देखा जा सकता है । यह तीसरे उदाहरण की तरह बॉक्स-शैडो का उपयोग करता है। कल मेरे अनुवाद के अंत में याद करते हुए "केवल 90 के दशक के डेवलपर्स को यह याद है" , मैं यह कहना चाहता हूं कि 15 वर्षों में हम इन जंगली तरीकों पर भी मुस्कुराएंगे जो इस पोस्ट में दिए गए हैं।

ध्यान देने के लिए आप सभी का धन्यवाद।