👨🏼‍🎤 📩 👎🏼 ब्लॉक सीमाओं के लिए CSS3 ढाल 💯 🦅 🌋

इस लेख में, मैं CSS3 का उपयोग करके किसी भी ब्लॉक की सीमाओं के लिए एक ढाल बनाने के लिए विकल्पों में से एक दिखाऊंगा।

अंतिम संस्करण में, हमें एक बटन मिलता है, जो ऊपर स्क्रीनशॉट में है।

हम इस तरह के एक लेआउट के साथ काम करेंगे:

<html> <body> <a href="http://google.com" class="magicButton">I am a button!</a> </body> </html>

पहले बटन के लिए एक सरल स्टाइल सेट करते हैं

 .magicButton { color: #444; font: bold 16px arial; background: #e4e4e4; border: 1px solid transparent; /*    */ border-radius: 3px; padding: 8px 12px; text-decoration: none; text-shadow: 0 1px 1px rgba(255,255,255,0.75); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 3px 6px -3px rgba(0,0,0,0.25); }

फिर हम आगे बढ़ते हैं, वास्तव में, हैक करने के लिए।

हमारी सीमा के स्थान पर एक ढाल बनाने के लिए, हमें पहले इसे वहां रखना होगा ( पृष्ठभूमि-उत्पत्ति: बॉर्डर-बॉक्स; ), और फिर इसे फसल दें ताकि यह बिल्कुल इसी जगह पर हो ( पृष्ठभूमि-क्लिप: बॉर्डर-बॉक्स; )।
मुख्य भाग तैयार है, अब यह केवल हमारी ढाल को बनाए रखने के लिए है। इस उदाहरण में, मैं हल्के भूरे रंग के टन में ढाल का उपयोग करता हूं, यदि आप एक हल्के पृष्ठभूमि पर बटन का उपयोग नहीं करते हैं, तो ढाल के रंगों को तदनुसार बदलना होगा।

 linear-gradient(#e4e4e4, #ccc);

लेकिन ग्रेडिएंट सेट करने के बाद, समस्या दिखाई देती है कि बटन की पूरी पृष्ठभूमि उसी तरह से भरी हुई है। ऐसा करने के लिए, हम एक और ढाल लागू करेंगे, केवल इस बार हम इसे पैडिंग-बॉक्स के भीतर स्थिति देंगे और फसल देंगे।

और टोगा में हमें यह बटन मिलता है: jsfiddle.net/CyberAP/DzHUj

इस तकनीक के विपक्ष:

आप मुख्य पृष्ठभूमि के लिए एक पारदर्शी ढाल का उपयोग नहीं कर सकते, ओवरले होगा। लेकिन पारदर्शी स्ट्रोक बनाने के लिए काफी संभव है।
बॉर्डर-त्रिज्या के साथ एक समस्या है, किनारों पर 3px से अधिक के मूल्य के साथ, ढाल को ध्यान से क्लिप किया जाना शुरू होता है। मुझे अभी तक कोई समाधान नहीं मिला है।

लेकिन प्लसस हैं:

कोई चित्र और अतिरिक्त ट्रैफ़िक नहीं।
आप उन्हें संयोजित करने के लिए स्ट्रोक, यहां तक कि रेडियल के लिए कोई भी ढाल सेट कर सकते हैं।
किसी भी सीमा चौड़ाई के साथ काम करता है।

ब्लॉक सीमाओं के लिए CSS3 ढाल

More articles: