वेबसाइटों में सीएसएस का उपयोग करके "इन्सेट" प्रभाव बनाएं

मैं कई नवीनतम वेबसाइटों में "इंसेट" जैसे प्रभाव से बहुत प्रभावित हूं। कुछ उदाहरण alt text http://img687.imageshack.us/img687/457/inset2.png वेबसाइटों में सीएसएस का उपयोग करके "इन्सेट" प्रभाव बनाएं

और

alt text http://img163.imageshack.us/img163/8158/inset1.png

केंद्र में लाइन कर रहे हैं। आजकल, कई वेबसाइटें इस तरह की लाइनों/प्रभावों का उपयोग करती हैं।

मैंने सीमाओं के साथ इसे प्राप्त करने की कोशिश की लेकिन रंग संयोजन मुझे काम नहीं कर रहा है और यह उचित नहीं है।

क्या अन्य वेबसाइटें इनके लिए छवियों का उपयोग करती हैं? क्या यह आसान है?

कोई उदाहरण सीएसएस?

उदाहरण साइटें: http://woothemes.com, http://net.tutsplus.com/, http://www.w3schools.com (शीर्षक में) और WordPress व्यवस्थापक पेज साइडबार में

स्रोत

2010-06-15 Aakash Chakravarthy

हमें उदाहरणों के लिए यूआरएल दें और हम आपको उदाहरण सीएसएस मिल सकते हैं - इस तरह वेब काम करता है :) – Skilldrick

मुझे लगता है कि आपने 'सीमा-शैली: नाली' की कोशिश की है और इसे कम पाया है? –

यहां एक साफ बदलाव है: dabblet.com/gist/1609945 –

अगर यह मदद मिलेगी पता नहीं है, लेकिन 1 पिक्सल सीमाओं कि थोड़ा हल्का और की तुलना में गहरे हैं का उपयोग कर 2 आसन्न तत्वों की पृष्ठभूमि इसका अनुकरण कर सकती है। उदाहरण के लिए:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Untitled</title> 
<style type="text/css"> 
div{background:#555;} 
.top{border-bottom:#333 solid 1px;} 
.bot{border-top:#777 solid 1px;} 
</style> 
</head> 
<body> 
<div class="top">this</div> 
<div class="bot">andthis</div> 
</body> 
</html>

संपादित करें:

एक तरफ ध्यान दें, उदाहरण में प्रकाश और अंधेरे स्विचिंग ऊपर आप एक से थोड़ा उठाया/उभरे सीमा प्रभाव दे देंगे के रूप में।

स्रोत

2010-06-15 14:12:35 edl

बहुत चालाक! उपरोक्त (डेमो) –

[JSFIDDLE] (http://jsfiddle.net/Qym4D/) क्या आपने इसे आजमाया? –

2 डी कंप्यूटर डिस्प्ले में 3 डी प्रभाव केवल रंग के उपयोग से प्राप्त ऑप्टिकल प्रभाव हैं: लाइटर विविधताएं उज्ज्वल (उच्च क्षेत्रों) का सुझाव देती हैं और गहरे विविधताएं छाया (निम्न क्षेत्रों) का सुझाव देती हैं। अधिकांश लोग दाएं हाथ से हैं और लेखन रोशनी डेस्कटॉप के बाईं ओर होती हैं, इसलिए आप स्क्रीन के बाएं कोने में प्रकाश का एक काल्पनिक स्रोत उपयोग करते हैं।

यह साल के लिए आयताकार क्षेत्रों में शुद्ध सीएसएस के साथ यह करने के लिए संभव हो गया है:

body{ 
 
\t background-color: #8080C0; 
 
} 
 
div{ 
 
    display: inline-block; 
 
\t margin: 1em; 
 
\t padding: 1em; 
 
\t width: 25%; 
 
\t color: white; 
 
\t background-color: #8080C0; 
 
} 
 
div.outset{ 
 
\t border-width: 1px; 
 
\t border-style: solid; 
 
\t border-color: #A6A6D2 #4D4D9B #4D4D9B #A6A6D2; 
 
} 
 
div.inset{ 
 
\t border-width: 1px; 
 
\t border-style: solid; 
 
\t border-color: #4D4D9B #A6A6D2 #A6A6D2 #4D4D9B; 
 
}

<div class="inset">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div> 
 
<div class="outset">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

फ़ॉन्ट्स, हालांकि, नए सीएसएस विशेषताओं को व्यापक समर्थन अभी तक नहीं है की आवश्यकता होती है और, भी, एक से अधिक रंग प्रदान करने की अनुमति न दें, इसलिए छवियों का उपयोग करना आम है। http://www.quirksmode.org/css/textshadow.html

स्रोत

2010-06-15 14:23:10

देखें इस सीएसएस पाठ छाया है property.for इस आशय उपयोग

.style{ 
    text-shadow:0 1px #FFFFFF; 
}

मिलता है लेकिन वास्तव में इस रंग संयोजन है कि आप पृष्ठभूमि और पाठ में उपयोग कर रहे हैं का असर है। तो आपको करना चाहिए।

पृष्ठभूमि रंग से टेक्स्ट छाया रंग का उपयोग करें।
टेक्स्ट रंग की तुलना में टेक्स्ट छाया रंगीन प्रकाश का उपयोग करें।

स्रोत

2010-06-15 14:53:15

सबसे आसान, निम्नलिखित शैलियों के साथ एक क्षैतिज नियम

आकर्षित, इसके विपरीत पृष्ठभूमि रंग के आधार पर संशोधित किया जा सकता:

hr { 
background-color: #000; 
border-top: solid 1px #999; 
border-left: none; 
height:0px; 
}

स्रोत

2012-06-21 21:37:21 user1302036

का उपयोग करते हुए एक <hr> काफी चालाक है।

user1302036’s answer पर बाद, हम सभी की जरूरत है एक <hr> के लिए ऊपर और नीचे की सीमाओं की रंग सेट और 0.

hr { 
    border-width: 1px 0px; 
    border-color: #666 transparent #ccc transparent; 
}

स्रोत

2012-08-02 17:04:56 ancestral

+1 – Dementic

बेशक। यहां एक JSFiddle है: https://jsfiddle.net/qfsk30h4/ – ancestral

यहाँ एक वर्तमान है और करने के लिए छोड़ दिया और सही सीमा चौड़ाई सेट करने के लिए है लचीला समाधान जिसका उपयोग किया जा सकता है।

JSFIDDLE

.hr { 
    background: rgba(0, 0, 0, 0.6); 
    height: 1px; 
    width: 100%; 
    display: block; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.6); 
} 

<span class="hr"></span>

RGBA का उपयोग करके (लाल, हरा, नीला, अल्फा) आप सफेद/एक अल्फा (अस्पष्टता) के साथ काले रंग एक इनसेट प्रभाव का भ्रम बनाने के लिए उपयोग कर सकते हैं।

स्रोत

2013-10-24 23:51:21

आप निम्न कार्य करें: अस्पष्टता और रंग के साथ

.hr { 
    opacity: 0.2; 
    border-top: 1px solid #000; 
    border-bottom: 1px solid #fff; 
}

प्ले अपने डिजाइन सूट करने के लिए, यह सब पृष्ठभूमि मुझे लगता है कि पर काम करता है;)

स्रोत

2014-02-16 15:47:57

उपयोग सीमा-नीचे और बॉक्स छाया।

body { 
    background-color: #D0D9E0; 
} 

h1 { 
    border-bottom: 1px solid #EFF2F6; 
    box-shadow: inset 0 -1px 0 0 #AFBCC6; 
}

चेक बाहर Fiddle और Browser Compatibility बॉक्स छाया संपत्ति के लिए।

स्रोत

2014-09-22 19:02:58

वेबसाइटों में सीएसएस का उपयोग करके "इन्सेट" प्रभाव बनाएं

उत्तर

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