इतने सारे पिक्सल के बाद एक सीएसएस ढाल रोकने के लिए कैसे?

Question

-moz-radial-gradient(center -200px , ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat scroll 0 0 transparent; 

मेरे पास यह कोड ऊपर है और मुझे अभी एहसास हुआ है कि यह ढाल ऊपर से नीचे तक चला जाता है। क्या 30 पीएक्स के बाद इसे पूरे ढाल को रोकने का कोई तरीका है। मैं आवश्यकतानुसार समायोजन कर सकता हूं, लेकिन आप 30 पीएक्स के बाद खुद को पूरा करने के लिए ग्रेडियेंट कैसे प्राप्त करते हैं?

Answer 1

आप पृष्ठभूमि-आकार की संपत्ति का एक साथ उपयोग कर सकते हैं।

इस तरह:

 

    
    div { 
     height:100px; 
     background:-moz-radial-gradient(center, ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat; 
     background-size:auto 30px; 
    } 
 

Answer 2

सीएसएस 3 ग्रेडियेंट पृष्ठभूमि छवियां हैं ताकि वे ब्लॉक तत्व की पूरी ऊंचाई और चौड़ाई को भर सकें, जैसे कि यह एक ठोस रंग था।

ढाल की ऊंचाई को सीमित करने के लिए, तत्व की ऊंचाई को सीमित करें। ऐसा करने के लिए एक "साफ" तरीका एक छद्म तत्व का उपयोग करना हो सकता है। कुछ ...

div {height: 500px; width: 500px; position: relative} 

div:before { 
    content: " "; 
    width: 100%; 
    height: 30px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: -1; 
    display: block; 
    background-image: [your-gradient-here] 
} 

Answer 3

CSS3 में:

radial-gradient(ellipse at center center, 
    rgb(30, 87, 153) 0%, rgb(41, 137, 216) 100px, 
    rgba(255, 255, 255, 0) 101px, rgba(255, 255, 255, 0) 100%) 

आप ढाल में एक से अधिक ठहराव हो सकता है। आप प्रतिशत के बजाय पिक्सेल में लंबाई भी निर्दिष्ट कर सकते हैं। पारदर्शी रंग बनाने के लिए आप rgba का भी उपयोग कर सकते हैं।

आप अपने पहले रंग के साथ 0%, केंद्र पर शुरू करते हैं।
फिर आपके पास x पिक्सेल पर दूसरा रंग है (मैं यहां x = 100 पिक्सल का उपयोग कर रहा हूं)।
फिर आप x + 1 पिक्सल पर पारदर्शी सफेद पर जाएं।
और 100% तक पारदर्शी रहें।

यह CSS3 का समर्थन करने वाले ब्राउज़र में काम करना चाहिए।

Answer 4

ठीक है, जब तक शेष ढाल (आपके पिक्सेल की सेट संख्या के बाद) एक निश्चित रंग हो सकता है, तो केवल तीन रंग स्टॉप का उपयोग करें (यह उदाहरण 30px पर बंद हो जाता है - ध्यान दें कि अंतिम प्रविष्टि समान है दूसरा):

background: linear-gradient(to bottom, rgba(90,90,90,0.75) 0%,rgba(0,0,0,0.75) 30px,rgba(0,0,0,0.75) 100%);