मैं वास्तव में इस सीमा शैली से प्यार कर रहा हूं जिसे मैंने हाल ही में ट्यूबों पर देखा है:
यदि आप इसे साइट पर देखते हैं तो शायद यह बेहतर दिखाई देगा: 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 जवाब
यह वास्तव में पूरा करने के लिए बहुत सीधा है। मैंने थोड़ा 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> तत्व पर लागू किया जा सकता है। यदि यह काम नहीं करता है, तो आपको बॉक्स-छाया और पृष्ठभूमि-छवि पर विक्रेता उपसर्ग लागू करने की आवश्यकता हो सकती है।
pre टैग में ढेर सारी स्टाइल चल रही है और मुझे इसे समझने में थोड़ी कठिनाई हो रही है। मैं अब box-shadow सामान समझता हूं, लेकिन मुझे वहां background-image और background-color शैलियों में कठिनाई हो रही है। हालांकि प्रतिभा काम करती है, और समझाने के लिए तैयार रहने के लिए धन्यवाद।
background-image जिस तरह की गहराई का हम अनुभव कर रहे हैं, उस पर जोर देने के लिए एक पारदर्शी ढाल उत्पन्न कर रहा है। फिर हमारा background-color पहले rgba(0,0,0,0) पर, फिर बाद में rgba(0,0,0,0.1) पर सेट होता है। मुझे लगता है कि यह markdotto.com/bootstrap से एक आकस्मिक अतिरेक है। मेरा मानना है कि अगर पृष्ठभूमि-छवि विफल हो जाती है तो यह कुछ विपरीतता प्रदान करने के लिए है।
प्रभाव का मुख्य भाग जिसके बारे में आप बात कर रहे हैं - किनारों की उपस्थिति, पृष्ठभूमि में ढाल नहीं जैसा कि अन्य उत्तरों द्वारा समझाया गया है - यह है:
-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)) के साथ।
ठीक है यह एक मुश्किल था। ऐसा लगता है कि उन्होंने जो कुछ किया वह एक अंधेरे से हल्के ढाल में काफी गहरे स्पष्ट पारदर्शी/अल्फा प्रभाव का उपयोग कर रहा था। इसलिए ऐसा लगता है कि यह वेबसाइटों के वॉलपेपर या पृष्ठभूमि के साथ बदल रहा है।
आपके पास कोड है इसलिए आपको एक उदाहरण देना व्यर्थ है। तो यह वास्तव में वेबसाइट की पृष्ठभूमि के साथ आंखों के लिए एक चाल है।