अमेज़ॅन के उत्पाद विवरण

Question

के समान टेक्स्ट को लंबवत रूप से कैसे फीका जाए, मैं अंतिम पंक्ति पर हल्के भूरे रंग की पहली पंक्ति पर काले रंग से टेक्स्ट के ब्लॉक को फीका करने की कोशिश कर रहा हूं। मैंने देखा कि अमेज़ॅन अपने उत्पाद विवरण के साथ ऐसा करता है। मैंने सीएसएस कोड को देखने की कोशिश की और मैं वहां कुछ भी नहीं देख सका, मुझे संदेह है कि यह जावास्क्रिप्ट के साथ हासिल किया गया है।

मेरा प्रश्न है: मैं अपने खुद के टेक्स्टब्लॉक पर एक समान ऊर्ध्वाधर लुप्तप्राय प्रभाव को अनुकरण करने के बारे में कैसे जाउंगा?

Answer 1

यहाँ

http://www.colorzilla.com/gradient-editor/ द्वारा उत्पन्न एक पूरी तरह से पार ब्राउज़र समाधान है:

डेमो: http://dabblet.com/gist/3511782

सीएसएस:

+०१२३५१६४१०

#container { 
    width: 400px; /*width of text box*/ 
    height: 200px; /*height of text box*/ 
    border: 2px solid black; /*it needs some kind of border to look good*/ 
    overflow: hidden; /*necessary to cut off text without scrollbars. alternatively you can use overflow: auto; or overflow: scroll; to show a scrollbar, but you'll have to tweak the #fader box*/ 
    position: relative; /*positioning so that #fader can be relative to this*/ 
} 
#fader { 
    height: 100px; /*from where it starts to fade to where it ends*/ 
    position: absolute; /*so it can overlap the #container*/ 
    width: 400px; /*has to be the same as #container*/ 
    margin-top: 25%; /*position it right at the bottom of the #container*/ 
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0); /* IE6-8 */ 
} 

HTML:

<div id="container"><div id="fader">&nbsp;</div> 
Text goes here 
</div> 

IE9 समर्थन के लिए, आप head में एक सशर्त टिप्पणी की जरूरत है:

<!--[if gte IE 9]> 
    <style type="text/css"> 
    .gradient { 
     filter: none; 
    } 
    </style> 
<![endif]--> 

और मामले में आप सोच रहे थे, जिस तरह से अमेज़न यह बहुत समान है करता है: http://pastebin.com/jkq3nbDJ

Answer 2

ऐसा करने के कई तरीके हैं। एक ढाल पृष्ठभूमि के साथ पूर्ण स्थिति में या एक पीएनजी उदाहरण के लिए एक ढाल के साथ एक div के साथ।

Answer 3

तो आपके पास एक लंबवत फीड या एक सीएसएस 3 ढाल के पृष्ठभूमि पीएनजी के साथ फीका प्रभाव की ऊंचाई के नीचे एक पूरी तरह से स्थित div (.fade-out) है जो आपके पास है।

एचटीएमएल

<div class="description"> 
    <p>Text Here</p> 
    <div class="fade-out"></div> 
</div> 

सीएसएस

.description { 
    position: relative; 
    width: 100%; 
} 
.fade-out { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    z-index: 2; 
    height: 30px; 
    background: ... 
}