2017-07-07 14 views
10

मैं इस छवि को सीएसएस में फिर से बनाने की कोशिश कर रहा हूं। enter image description hereडबल बॉक्स/सीमा? क्या यह सीएसएस में संभव है?

यह मुझे अब तक प्रयोग करने से मिला है। मैंने दूसरे बॉक्स के रूप में कार्य करने के लिए बॉक्स-छाया का उपयोग किया। मुझे यकीन नहीं है कि ऐसा करने का कोई बेहतर तरीका है या नहीं?

h4 { 
 
    font-family: sans-serif; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    border: solid 3px black; 
 
    border-radius: 5px; 
 
    text-decoration: none; 
 
    font-weight: 600; 
 
    color: black; 
 
    letter-spacing: 2px; 
 
    padding: 20px 15px; 
 
    background: white; 
 
    box-shadow: 10px 5px 0px 0px #ffffff, 11px 7px 0px 2px #000000; 
 
}
<h4>3. Scouting for a location</h4>

enter image description here

उत्तर

10

आप बिल्कुल स्थिति छद्म तत्व के माध्यम से इस लक्ष्य को हासिल कर सकते हैं। सीएसएस विरासत के माध्यम से संपत्ति डुप्लिकेशन से बचें।

.border { 
 
    text-align: center; 
 
    border: solid 3px black; 
 
    border-radius: 5px; 
 
    text-decoration: none; 
 
    font-weight: 600; 
 
    color: black; 
 
    letter-spacing: 2px; 
 
    padding: 20px 15px; 
 
    margin: 15px 15px; 
 
    background: white; 
 
    
 
    position: relative; /* new */ 
 
} 
 

 
/* new */ 
 
.border:after { 
 
    content: ""; 
 
    position: absolute; 
 
    display: block; 
 
    background: inherit; 
 
    border-radius: inherit; 
 
    border: inherit; 
 
    left: 2px; 
 
    top: 2px; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: -1; 
 
}
<div class="border">3. Scouting for a location</div>

+2

चीजों को सुसंगत रखने के लिए 'उत्तराधिकारी' का अच्छा उपयोग। – showdev

+0

@Showdev धन्यवाद, तो इसे अपने उत्तर में भी कॉपी करें :) –

+0

यदि मैं आपकी प्रतिलिपि बनाता हूं, तो मैं अपने अनावश्यक उत्तर को भी हटा सकता हूं। लेकिन शायद दो अलग-अलग उदाहरण उपयोगी हैं, उदाहरण के लिए यदि कोई व्यक्ति दो सीमाओं को अलग-अलग शैली में बनाना चाहता है। * शग * – showdev

0

उपयोग एक निरपेक्ष तैनात :: के बाद या :: अपनी z- सूचकांक तत्व में ही की तुलना में कम है छद्म तत्व से पहले और।

+0

इस बाहर की कोशिश करेंगे। धन्यवाद! – Solus

4

इस उदाहरण को आजमाएं

आशा है कि यह आपकी मदद करेगा।

.border { 
 
text-align: center; 
 
border: solid 3px black; 
 
border-radius: 5px; 
 
text-decoration: none; 
 
font-weight: 600; 
 
color: black; 
 
letter-spacing: 2px; 
 
padding: 20px 15px; 
 
margin: 15px 15px; 
 
background: white; 
 
-webkit-box-shadow: 3px 3px 0px 0px #ffffff, 3px 3px 0px 3px #000000; 
 
-moz-box-shadow: 3px 3px 0px 0px #ffffff, 3px 3px 0px 3px #000000; 
 
box-shadow: 3px 3px 0px 0px #ffffff, 3px 3px 0px 3px #000000; 
 
}
<div class="border">Title</div>

संपादित

यहाँ अब आप देख सकते हैं कि मैं 3px करने के लिए box-shadow बना दिया है और अब सही पक्ष कोने।

+3

विक्रेता प्रीफिक्स्ड 'बॉक्स-छाया' की कोई ज़रूरत नहीं है। वे ब्राउज़र के बहुत पुराने संस्करणों के लिए हैं। –

+1

मुझे यह समाधान पसंद है, सिवाय इसके कि छाया का "फैल त्रिज्या" भाग मूल सीमा के सापेक्ष कोनों के वक्रता को बढ़ाने के लिए प्रतीत होता है। यह मेरे लिए पूरी तरह से वांछनीय नहीं है, लेकिन इससे दूसरों के लिए कोई फर्क नहीं पड़ता। – showdev

+0

बॉक्सशैड पिक्सल के साथ प्रयास करें या आपकी आवश्यकता के अनुसार descrease .. जैसे 8px से 7px या 9px .. –

5

box-shadow अवधारणा के पीछे की अवधारणा यह है कि दो छाया, एक सफेद और एक काला, दूसरी काला सीमा अनुकरण करने के लिए ओवरलैप होता है। लेकिन काली छाया केवल उस दिशा में दिखाई देती है जहां से सफेद छाया से ऑफसेट होता है, इसलिए मूल सीमा और काले छाया के बीच एक अंतर स्पष्ट होता है (जैसा कि ओपी के मूल पोस्ट में दिखाया गया है)।

"spread radius" की काली छाया इस अंतर (चतुराई से demonstrated by Nirav Joshi) को खत्म करने के लिए उपयोग कर सकता है, लेकिन फिर कोनों की वक्रता और बढता है और दो सीमाओं अलग लग रहे हो।

मूल सीमा नकल करने के लिए, मैं ::after का उपयोग करेंगे एक बिल्कुल-तैनात pseudo-element पैदा करते हैं और z-index का उपयोग मूल तत्व के पीछे रखने के लिए करने के लिए। यह सुनिश्चित करने के लिए कि सीमा वास्तव में डुप्लिकेट की गई है, मुझे मूल तत्व से सीमा रंग और त्रिज्या विरासत में प्राप्त करने के लिए Vadim Ovchinnikov's idea पसंद है।

.border { 
 
    position: relative; 
 
    text-align: center; 
 
    border: solid 3px black; 
 
    border-radius: 5px; 
 
    text-decoration: none; 
 
    font-weight: 600; 
 
    color: black; 
 
    letter-spacing: 2px; 
 
    padding: 20px 15px; 
 
    margin: 15px 15px; 
 
    background: white; 
 
} 
 

 
.border::after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 3px; 
 
    left: 3px; 
 
    border: solid 3px black; 
 
    border-radius: 5px; 
 
    z-index: -1; 
 
}
<h4 class="border">3. SCOUTING FOR A LOCATION</h4>

+0

ओह, यह नहीं देखा कि @ एब्रलेली ने पहले से ही यह सुझाव दिया है। – showdev

+1

यह ठीक है, आपका उत्तर बहुत अधिक पूर्ण है क्योंकि यह वास्तव में ओपी के कोड का उपयोग करके सुझाव लागू करता है। – TylerH

संबंधित मुद्दे