मैं वास्तव में इस सीमा शैली से प्यार कर रहा हूं जिसे मैंने हाल ही में ट्यूबों पर देखा है:

enter image description here

यदि आप इसे साइट पर देखते हैं तो शायद यह बेहतर दिखाई देगा: http://markdotto.com/bootstrap/ ए>

मुझे विशेष रूप से दिलचस्पी है कि वे इस प्रभाव को कैसे बना रहे हैं, ऐसा लगता है कि नीचे की सीमा को हाइलाइट किया गया है जबकि शीर्ष को अंधेरा कर दिया गया है। मुझे पता है कि मैं इसे फ़ोटोशॉप में कैसे करूँगा, लेकिन वे इसे सीएसएस में कैसे कर रहे हैं?

code, pre {
  background-color: rgba(0, 0, 0, 0);
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.15)), to(rgba(0, 0, 0, 0)));
  /* Konqueror */

  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  /* FF 3.6+ */

  background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  /* IE10 */

  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.15)), color-stop(100%, rgba(0, 0, 0, 0)));
  /* Safari 4+, Chrome 2+ */

  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  /* Safari 5.1+, Chrome 10+ */

  background-image: -o-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  /* Opera 11.10 */

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(0, 0, 0, 0.15)', endColorstr='rgba(0, 0, 0, 0)', GradientType=0);
  /* IE6 & IE7 */

  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(0, 0, 0, 0.15)', endColorstr='rgba(0, 0, 0, 0)', GradientType=0)";
  /* IE8+ */

  background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  /* the standard */

  background-color: rgba(0, 0, 0, 0.3);
  font-family: "Monaco", Courier New, monospace;
  font-size: 12px;
  font-weight: normal;
  line-height: 20px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
}
code {
  padding: 3px 6px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
pre {
  margin: 20px 0;
  padding: 20px;
  color: #fff;
  -moz-border-radius: 6px;
  border-radius: 6px;
  white-space: pre-wrap;
}

मुझे पृष्ठभूमि में इतनी दिलचस्पी नहीं है जितनी कि सीमा। वास्तव में इसकी सराहना करने के लिए आपको साइट पर जाना होगा।

3
Naftuli Kay 15 नवम्बर 2011, 03:42
5
मुझे समझ नहीं आया... आपके प्रश्न में उत्तर शामिल है! :) आपके द्वारा पोस्ट किए गए कोड के बारे में आप क्या नहीं समझते हैं?
 – 
Yevgeny Simkin
15 नवम्बर 2011, 04:22
ओह, मुझे लगता है कि वह पूछ रहा है कि क्या आप वेबसाइट उदाहरण देखते हैं। जैसे ही बैकग्राउंड का रंग बदलता है, ग्रेडिएंट बदल जाता है। साइट बिना किसी देखभाल के वेबसाइट के माध्यम से ऐसा करने के बारे में कैसे जाती है, ढाल है।
 – 
John Riselvato
15 नवम्बर 2011, 05:27

3 जवाब

सबसे बढ़िया उत्तर

यह वास्तव में पूरा करने के लिए बहुत सीधा है। मैंने थोड़ा jsfiddle सेट अप किया है, इस तरह की रूपरेखा इस मामले में प्रभाव कैसे प्राप्त किया जा रहा है , आपके द्वारा पोस्ट किए गए कोड की व्याख्या करते हुए।

आशा है कि यह इसे साफ़ कर देगा! यदि नहीं, तो मुझे और अधिक विस्तार से बताने के लिए प्रेरित किया जाएगा। मुझे सीएसएस पसंद है और शायद ही कभी इसे अपने काम में इस्तेमाल करने का मौका मिलता है।

संपादित करें - jsfiddle से उत्तर:

<pre> का शीर्ष एक इनसेट ब्लैक, पारदर्शी बॉक्स-छाया के साथ काला कर दिया गया है:

box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25)

Rgba() का अर्थ है लाल, हरा, नीला, अल्फा। 0, 0, 0 का अर्थ काला है, और .25 का अर्थ है 25% अपारदर्शी, या 75% पारदर्शी।

<pre> के नीचे एक सामान्य, सफेद, एकल पिक्सेल पारदर्शी बॉक्स-छाया के साथ पंक्तिबद्ध है:

box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);

तो इनसेट ब्लैक शैडो गहराई देते हुए तत्व के अंदर की अध्यक्षता करता है, जबकि सफेद (255, 255, 255) छाया तत्व के नीचे 1 पिक्सेल लटकती है, जिससे हाइलाइट का भ्रम होता है।

अच्छी बात यह है कि इस कोड में दो घोषणाएँ संयुक्त हैं:

box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, 0.25);

नमूना में इस्तेमाल किया गया सीएसएस यहां दिया गया है, जिसमें विक्रेता प्रीफिक्स्ड घोषणाओं को संक्षिप्तता के लिए हटा दिया गया है:

body {
  background: url('http://subtlepatterns.com/patterns/debut_dark.png');
  padding: 30px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

p {
  font-family: sans-serif;
  margin: 10px 0px;
  font-size: 14px;
}

code {
  font-family: monospace;
  margin: 10px 0px;
}

pre {
  margin: 20px;
  padding: 20px;
  color: #fff;
  border-radius: 6px;
  white-space: pre-wrap;
  background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  background-color: rgba(0, 0, 0, 0.1);
  font-family: Menlo, monospace;
  font-size: 12px;
  font-weight: normal;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, 0.25);
}

वांछित प्रभाव देखने के लिए इसे <pre> तत्व पर लागू किया जा सकता है। यदि यह काम नहीं करता है, तो आपको बॉक्स-छाया और पृष्ठभूमि-छवि पर विक्रेता उपसर्ग लागू करने की आवश्यकता हो सकती है।

8
Steve Adams 4 अप्रैल 2014, 21:13
हां, मैं वास्तव में इस बारे में अधिक गहन पूर्वाभ्यास की सराहना करता हूं कि प्रभाव कैसे बनाया जाता है। ऐसा लगता है कि pre टैग में ढेर सारी स्टाइल चल रही है और मुझे इसे समझने में थोड़ी कठिनाई हो रही है। मैं अब box-shadow सामान समझता हूं, लेकिन मुझे वहां background-image और background-color शैलियों में कठिनाई हो रही है। हालांकि प्रतिभा काम करती है, और समझाने के लिए तैयार रहने के लिए धन्यवाद।
 – 
Naftuli Kay
16 नवम्बर 2011, 01:00
1
कोई दिक्कत नहीं है। इस मामले में, background-image जिस तरह की गहराई का हम अनुभव कर रहे हैं, उस पर जोर देने के लिए एक पारदर्शी ढाल उत्पन्न कर रहा है। फिर हमारा background-color पहले rgba(0,0,0,0) पर, फिर बाद में rgba(0,0,0,0.1) पर सेट होता है। मुझे लगता है कि यह markdotto.com/bootstrap से एक आकस्मिक अतिरेक है। मेरा मानना ​​​​है कि अगर पृष्ठभूमि-छवि विफल हो जाती है तो यह कुछ विपरीतता प्रदान करने के लिए है।
 – 
Steve Adams
16 नवम्बर 2011, 01:12
1
साथ ही, बैकग्राउंड-इमेज लीनियर ग्रेडिएंट को यहां बहुत अच्छी तरह से समझाया गया है। एक चीज जो इसे और अधिक सरल बना देगी: आप उन सभी को अनदेखा कर सकते हैं -मोज़/-वेबकिट/-ओ/आदि। ये विक्रेता उपसर्ग हैं; अंतिम युक्ति जारी होने तक हमारे साथ काम करने के लिए css3 युक्ति का कार्यान्वयन। सभी दोहराए गए कोड को एक पंक्ति के रूप में देखने का प्रयास करें - प्रत्येक घोषणा वास्तव में वही काम कर रही है, लेकिन एक अलग उपसर्ग के तहत। भ्रमित करने वाला, कष्टप्रद, लेकिन दुर्भाग्य से आवश्यक है।
 – 
Steve Adams
16 नवम्बर 2011, 01:15
1
कृपया वास्तविक उत्तर यहां SO पर जोड़ें। Jsfiddle लिंक स्थायी होने की गारंटी नहीं है।
 – 
Ricardo Tomasi
16 नवम्बर 2011, 01:53

प्रभाव का मुख्य भाग जिसके बारे में आप बात कर रहे हैं - किनारों की उपस्थिति, पृष्ठभूमि में ढाल नहीं जैसा कि अन्य उत्तरों द्वारा समझाया गया है - यह है:

-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);

वहां दो छायाएं लागू की जा रही हैं: एक मानक बॉक्स छाया (जिसे फ़ोटोशॉप "ड्रॉप शैडो" कहेगा) नीचे हल्के रंग (rgba(255, 255, 255, 0.25)) के साथ, और एक इनसेट (जिसे फ़ोटोशॉप "इनर" कहेगा) शैडो”) सबसे ऊपर गहरे रंग (rgba(0, 0, 0, 0.25)) के साथ।

4
Noah Witherspoon 15 नवम्बर 2011, 05:51
जब मैं इसे लेता हूं और इसे किसी तत्व पर लागू करता हूं, तो मैं वास्तव में बहुत ज्यादा नहीं देख रहा हूं। देखें jsfiddle.net/rfkrocktk/KYw7e आप सही कह रहे हैं, मैं वास्तव में कुरकुरा की तलाश में हूं , अच्छी दिखने वाली रूपरेखा।
 – 
Naftuli Kay
15 नवम्बर 2011, 06:44
3
यह काले रंग की पृष्ठभूमि के साथ काम नहीं करेगा, न ही सफेद अग्रभूमि के साथ। आपको दोनों की तुलना में गहरा/उज्ज्वल होने के लिए छाया की आवश्यकता है। देखें jsfiddle.net/SvMQ3
 – 
Ricardo Tomasi
15 नवम्बर 2011, 09:30
यह ग्रेडिएंट बैकग्राउंड के साथ भी सबसे अच्छा काम करता है, ताकि कंट्रास्ट देखा जा सके।
 – 
Nightfirecat
15 नवम्बर 2011, 10:30

ठीक है यह एक मुश्किल था। ऐसा लगता है कि उन्होंने जो कुछ किया वह एक अंधेरे से हल्के ढाल में काफी गहरे स्पष्ट पारदर्शी/अल्फा प्रभाव का उपयोग कर रहा था। इसलिए ऐसा लगता है कि यह वेबसाइटों के वॉलपेपर या पृष्ठभूमि के साथ बदल रहा है।

आपके पास कोड है इसलिए आपको एक उदाहरण देना व्यर्थ है। तो यह वास्तव में वेबसाइट की पृष्ठभूमि के साथ आंखों के लिए एक चाल है।

0
John Riselvato 15 नवम्बर 2011, 05:32