এই iOS7 অস্পষ্ট প্রভাবটি কীভাবে পুনরায় তৈরি করবেন


24

অনেক চেষ্টা করেছিলাম কিন্তু আমি ঠিক এটি পেতে পারি না, আমি কীভাবে এর মতো একটি স্বচ্ছ ট্যাব বার অর্জন করব:

এখানে চিত্র বর্ণনা লিখুন


উত্তর:


29

নীচের অংশটি গাউসিয়ান অস্পষ্ট এবং একটি সেমিট্রান্সপারেন্ট স্বচ্ছ সাদা ওভারলে রয়েছে।

পদক্ষেপ 1: পটভূমিতে ওভারলে অঞ্চলটি নির্বাচন করুন (মূল চিত্র) এবং 12px ব্যাসার্ধের গাউসিয়ান ব্লার প্রয়োগ করুন।

পদক্ষেপ 2: একটি নতুন স্তর তৈরি করুন, ওভারলেটির জন্য একই অংশটি নির্বাচন করুন, এটি সাদা দিয়ে পূরণ করুন এবং এই স্তরটিকে% 66% এর অস্বচ্ছতা দিন

আপনার রেফারেন্স চিত্রের উপরের অংশটি দিয়ে পুনরুত্পাদন করা:
EDIT: মূলটির সাথে মেলে নতুন পরামিতি

এখানে চিত্র বর্ণনা লিখুন


আমি ধরে নেব কোড দ্বারা এটি করা হয়েছে, যদি এটি একটি স্ক্রিনশট হয়। আমার ধারণা, এটি কোনও রচনা বা মকআপে বা এটি অনলাইনে বাস্তবায়ন করতে বলছে কিনা তা নেমে এসেছে।
এরিক

@ পিটার ওয়ালসার কীভাবে ওভারলে এরিয়া তৈরি করবেন যে আরও লেয়ার থাকলে গাউসিয়ান প্রয়োগ করা হবে? তাদের মার্জ করার জন্য প্রথমে দরকার?
ফ্রেড কলিন্স

1
@ ফ্রেডকোলিনস: হ্যাঁ, হয় আপনি প্রথমে সেগুলি মার্জ করুন এবং নির্বাচনটি অস্পষ্ট করুন অথবা আপনি মার্জড নির্বাচনের অনুলিপি সহ একটি নতুন স্তর তৈরি করেন (যা প্রতিটি স্তর পরিবর্তনের সাথে সাথে পুনরায় তৈরি করা দরকার)।
পিটার ওয়ালসার

@ পিটারওয়ালার ধন্যবাদ শেষ প্রশ্ন. Transparent 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;
}

আপনার এইভাবে এটি করা উচিত বলে না ... আসলে, আমি ব্যক্তিগতভাবে পিটারের পদ্ধতিটি ব্যবহার করব।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.