सीएसएस छवियों के बिना क्षैतिज नियम/रेखा स्टाइल div प्रभाव बाहर फीका

मैं छवियों के न्यूनतम उपयोग का एक बड़ा प्रशंसक हूं और सोच रहा था कि अगर किसी के पास शुद्ध स्थिर सीएसएस के साथ इस तरह की चीज बनाने के लिए कोई रणनीति है (या यदि यह संभव है) ?सीएसएस छवियों के बिना क्षैतिज नियम/रेखा स्टाइल div प्रभाव बाहर फीका

http://www.flickr.com/photos/jahimandahalf/6780397612/

मैं एक लाइन का प्रभाव प्रतीत होता है दुबला हो रही है और बाहर fading और इसे नीचे छाया प्रभाव की बात कर रहा हूँ।

मैं सोच रहा था कि यह एक सीएसएस आकार चाल त्रिकोण है जैसे कि यह साथ क्या करना संभव हो सकता है: 'बदलना' का उपयोग कर बॉक्स छाया पर रोटेशन के साथ

http://css-tricks.com/snippets/css/css-triangle/

या शायद:

zenelements .com/ब्लॉग/सीएसएस 3-ट्रांसफॉर्म/

कोई विचार?

स्रोत

2012-02-24 ja_him

आप CSS3 के बंद हो जाता है का उपयोग कर सकते हैं और :after छद्म तत्व इस तरह के एक प्रभाव को प्राप्त करने। यह चाल छद्म-तत्व का उपयोग करके <hr> तत्व पर सीमा जोड़ना है और इसे प्रारंभिक ढाल के केंद्र में धीरे-धीरे एक नरम रंग के साथ रखें जो ढाल के साथ समाप्त होता है।

यहां कुछ रंगों का उपयोग करके demo और अन्य demo है।

स्रोत

2012-02-25 13:05:27

हम्म बहुत स्टाइलिश, उस उत्तर के लिए धन्यवाद! मुझे इसके साथ एक खेल खेलना होगा। –

उस क्षैतिज नियम को पुन: पेश करने के लिए, आप एक CSS3 रैखिक-ढाल का उपयोग कर सकते हैं। बस के बारे में 3px ऊंचाई के साथ एक div बना सकते हैं और निम्नलिखित सीएसएस (आवश्यकतानुसार रंग बदल) लागू होते हैं:

background: #ffffff; /* Old browsers */ 
background: -moz-linear-gradient(left, #ffffff 0%, #2989d8 25%, #207cca 75%, #ffffff 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(25%,#2989d8), color-stop(75%,#207cca), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, #ffffff 0%,#2989d8 25%,#207cca 75%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, #ffffff 0%,#2989d8 25%,#207cca 75%,#ffffff 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, #ffffff 0%,#2989d8 25%,#207cca 75%,#ffffff 100%); /* IE10+ */ 
background: linear-gradient(left, #ffffff 0%,#2989d8 25%,#207cca 75%,#ffffff 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1); /* IE6-9 */

ध्यान रखें कि filter रंग बंद हो जाता है का समर्थन नहीं करता, तो आप एक छवि < के लिए पीछे हटना चाहते हो सकता है तो IE10।

यहाँ अपने खुद के CSS3 के ढाल बिल्ड: http://www.colorzilla.com/gradient-editor/

स्रोत

2012-02-24 20:22:11

हम्म, धन्यवाद आप निश्चित रूप से इस सवाल का जवाब ने जन्म लिया है, लेकिन आप काफी वहाँ नहीं मैं भी उत्तरोत्तर पतली पहलू के लिए देख रहा था (मेरी मूल पोस्ट में संशोधन होगा) थे। लेकिन तुमने मुझे रास्ता दिखाया, चीयर्स। (और खेद है कि मैं इसके लिए आपको वोट भी नहीं दे सकता! नहीं 'nuf rep!) –

मुझे खुशी है कि आप अपना जवाब ढूंढ पाए! –

ठीक है तो मैं अपने ही सवाल का जवाब है, लेकिन मैं Stackoverflow मंचों पढ़ा है और यह स्वीकार्य हो रहा है (यदि वास्तव में प्रोत्साहित नहीं किया!)

तो ...

HTML:

<html> 
<head> 
<TITLE>TEST</TITLE> 
<link rel="stylesheet" type="text/css" href="test.css" /> 
</head> 
<body> 

<div id="wrap"> 
<div id="gradient"> 
</div> 
</div> 

</body> 
</html>

सीएसएस:

#wrap 
{ 
overflow:hidden; 
height:10px; 
width:600px; 
height:20px; 
margin:auto; 
margin-top:200px; 
} 


#gradient 
{ 
height:20px; 
width:580px; 
margin:auto; 
margin-top:-11px; 
background: -moz-radial-gradient(center, ellipse cover, rgba(10,10,10,1) 0%, rgba(8,8,8,1) 19%, rgba(3,3,3,0) 80%, rgba(1,1,1,0) 100%); /* FF3.6+ */ 
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(10,10,10,1)), color-stop(19%,rgba(8,8,8,1)), color-stop(80%,rgba(3,3,3,0)), color-stop(100%,rgba(1,1,1,0))); /* Chrome,Safari4+ */ 
background: -webkit-radial-gradient(center, ellipse cover, rgba(10,10,10,1) 0%,rgba(8,8,8,1) 19%,rgba(3,3,3,0) 80%,rgba(1,1,1,0) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-radial-gradient(center, ellipse cover, rgba(10,10,10,1) 0%,rgba(8,8,8,1) 19%,rgba(3,3,3,0) 80%,rgba(1,1,1,0) 100%); /* Opera 12+ */ 
background: -ms-radial-gradient(center, ellipse cover, rgba(10,10,10,1) 0%,rgba(8,8,8,1) 19%,rgba(3,3,3,0) 80%,rgba(1,1,1,0) 100%); /* IE10+ */ 
background: radial-gradient(center, ellipse cover, rgba(10,10,10,1) 0%,rgba(8,8,8,1) 19%,rgba(3,3,3,0) 80%,rgba(1,1,1,0) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0a0a0a', endColorstr='#00010101',GradientType=1); /* IE6-9 fallback on horizontal gradient */ 
}

स्रोत

2012-02-25 12:38:05

hr { 
 
    height: 1px; 
 
    margin: 50px 0; 
 
    background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0)), color-stop(0.5, #333333), to(rgba(0, 0, 0, 0))); 
 
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), #333333, rgba(0, 0, 0, 0)); 
 
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), #333333, rgba(0, 0, 0, 0)); 
 
    background: -o-linear-gradient(left, rgba(0, 0, 0, 0), #333333, rgba(0, 0, 0, 0)); 
 
    background: linear-gradient(left, rgba(0, 0, 0, 0), #333333, rgba(0, 0, 0, 0)); 
 
    border: 0; 
 
} 
 
hr:after { 
 
    display: block; 
 
    content: ''; 
 
    height: 30px; 
 
    background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 116, color-stop(0%, #cccccc), color-stop(100%, rgba(255, 255, 255, 0))); 
 
    background-image: -webkit-radial-gradient(center top, farthest-side, #cccccc 0%, rgba(255, 255, 255, 0) 100%); 
 
    background-image: -moz-radial-gradient(center top, farthest-side, #cccccc 0%, rgba(255, 255, 255, 0) 100%); 
 
    background-image: -o-radial-gradient(center top, farthest-side, #cccccc 0%, rgba(255, 255, 255, 0) 100%); 
 
    background-image: radial-gradient(farthest-side at center top, #cccccc 0%, rgba(255, 255, 255, 0) 100%); 
 
}

<hr>

स्रोत

2013-08-23 18:43:26

सीएसएस छवियों के बिना क्षैतिज नियम/रेखा स्टाइल div प्रभाव बाहर फीका

उत्तर

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