इस iOS7 धब्बा प्रभाव को फिर से कैसे बनाया जाए


24

बहुत कोशिश की लेकिन मैं अभी पूरी तरह से नहीं कर पाया, मैं इस तरह एक पारभासी टैब बार कैसे प्राप्त कर सकता हूं:

यहाँ छवि विवरण दर्ज करें


जवाबों:


29

नीचे का हिस्सा गाऊसी धुंधला होता है और इसमें एक सफेद रंग का उपरिशायी होता है।

Step1: पृष्ठभूमि (मूल छवि) पर ओवरले क्षेत्र का चयन करें और त्रिज्या 12px की एक गाऊसी धब्बा लागू करें।

Step2: एक नई लेयर बनाएं, ओवरले के लिए एक ही हिस्से का चयन करें, इसे सफेद रंग से भरें, और इस लेयर को 66% की ओपेसिटी दें

आपकी संदर्भ छवि के ऊपरी भाग के साथ पुन: प्रस्तुत:
EDIT: मूल से मेल खाने के लिए नए पैरामीटर

यहाँ छवि विवरण दर्ज करें


मुझे लगता है कि यह कोड के साथ किया जाता है, अगर यह एक स्क्रीनशॉट है। मुझे लगता है कि यह नीचे आता है या नहीं, वह एक रचना या मॉकअप में ऐसा करने के लिए कह रहा है या ऑनलाइन इसे लागू करता है।
एरिक

@ पेटर वाल्ज़र ओवरले क्षेत्र का निर्माण कैसे करें जो अधिक परतें होने पर गाऊसी लागू किया जाएगा? उन्हें मर्ज करने के लिए पहले की आवश्यकता है?
फ्रेड कॉलिन्स

1
@FredCollins: हाँ, या तो आप उन्हें पहले मर्ज करते हैं और चयन को धुंधला करते हैं, या आप मर्ज किए गए चयन की एक प्रति के साथ एक नई परत बनाते हैं (जो कि हर बार एक परत को बदलने की आवश्यकता होती है)।
पीटर वालसर

@PeterWalser धन्यवाद अन्तिम प्रश्न। 66% की अस्पष्टता के साथ नई पारदर्शी परत बनाने के लिए मैं आयत उपकरण का उपयोग करता हूं लेकिन मुझे लगता है कि एक बेहतर तरीका है। जैसे धुंधली परत या किसी चीज़ के लिए मास्क / क्लिपिंग मास्क बनाना। आपकी क्या सलाह है?
फ्रेड कॉलिन्स

एक अलग परत के साथ, आप समग्र अस्पष्टता को जल्दी से समायोजित कर सकते हैं। अपारदर्शिता मास्क समाधान का एक ही परिणाम है, यहां आप प्रति पिक्सेल अपारदर्शिता को भी समायोजित कर सकते हैं। और, आप निश्चित रूप से दोनों दृष्टिकोण (मुखौटा + परत पारदर्शिता) को जोड़ सकते हैं। जो भी आपके लिए सबसे अच्छा काम करता है।
पीटर वालसर

7

आपने यह परिभाषित नहीं किया कि आप किस प्रोग्राम या तकनीक का उपयोग कर रहे हैं। इसलिए, जबकि पीटर ने फ़ोटोशॉप के साथ इसे करने का एक अच्छा तरीका बताया , मैं यह जोड़ना चाहूंगा कि यह प्रभाव CSS3 का उपयोग करके भी बनाया जा सकता है।

यहाँ सीएसएस में एक चोटी की जरूरत है:

#iOSblur
{
    -webkit-filter: blur(12px);
    -moz-filter: blur(12px);
    -o-filter: blur(12x);
    -ms-filter: blur(12px);
    filter: blur(12px);
}

#iOSopacity
{
    opacity: 0.6;
}

यह कहते हुए कि यह आपको कैसे करना चाहिए ... वास्तव में, मैं व्यक्तिगत रूप से पीटर की प्रक्रिया का उपयोग करूंगा।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.