গ্লাসমরফিজম হল ফ্রস্টেড গ্লাস লুক: একটি আধা-স্বচ্ছ কার্ড যা এর পিছনে যা কিছু বসে থাকে তা ঝাপসা করে দেয়, অ্যাপল এবং উইন্ডোজ তাদের ইন্টারফেস জুড়ে যে স্টাইলটি ঝুঁকে পড়ে। এলিমেন্টরে হাত দিয়ে তৈরি করা মানে ব্যাকড্রপ-ফিল্টার এবং কয়েকটি ব্রাউজার কুইর্ক সহ কাস্টম সিএসএস। বিনামূল্যে গ্লাসমরফিজম এক্সটেনশন মধ্যে এলিমেন্টরের জন্য মাস্টার অ্যাডঅন যেকোনো উপাদানের উন্নত ট্যাবে এটিকে টগলে পরিণত করে।
আপনি এটি চালু করুন, একটি অস্পষ্ট মান এবং একটি আধা-স্বচ্ছ পটভূমির রঙ সেট করুন, কোণগুলি বৃত্তাকার করুন এবং উপাদানটি একটি গ্লাস কার্ডে পরিণত হবে৷ এখানে পুরো সেটআপ।
Glassmorphism এক্সটেনশন কি করে #
এক্সটেনশন একটি যোগ করে গ্লাসমরফিজম অধ্যায় উন্নত প্রতিটি এলিমেন্টর উপাদানের ট্যাব, সম্পূর্ণ বিভাগ থেকে একক উইজেট পর্যন্ত। এটি সক্ষম করুন এবং উপাদানটি একটি ব্যাকড্রপ ব্লার পায়, তাই এর পিছনের পটভূমির চিত্র বা বিষয়বস্তু হিমায়িত কাঁচে দাগ পড়ে যখন উপাদানটির নিজস্ব পাঠ্য তীক্ষ্ণ থাকে।
চেহারাটি সবচেয়ে ভাল কাজ করে যখন উপাদানটি দৃশ্যত ব্যস্ত কিছুর উপরে বসে, যেমন একটি ফটো ব্যাকগ্রাউন্ড বা গ্রেডিয়েন্ট। একটি সাধারণ সাদা অংশে অস্পষ্ট করার কিছু নেই, তাই প্রভাবটি দেখানোর মতো কিছুই নেই।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
- এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? অনুসরণ কর ইনস্টলেশন গাইড প্রথম।
- Glassmorphism একটি বিনামূল্যের এক্সটেনশন, তাই কোনো প্রো লাইসেন্সের প্রয়োজন নেই।
- একটি চিত্র বা রঙিন পটভূমিতে স্থাপন করা একটি উপাদান, তাই অস্পষ্টতার সাথে কাজ করার কিছু আছে।
কিভাবে Glassmorphism এক্সটেনশন সক্ষম করবেন #
আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে, যান মাস্টার অ্যাডনস এবং খুলুন এক্সটেনশন ট্যাব। গ্লাসমরফিজম বসে উইজেট প্রদর্শন করুন একটি জনপ্রিয় ব্যাজ সহ গ্রুপ, প্যাটার্নের পাশে এবং গ্রিড লাইন। এর টগলে ক্লিক করুন যাতে এটি বেগুনি হয়ে যায়, তারপর আঘাত করুন পরিবর্তন সংরক্ষণ করুন পৃষ্ঠার শীর্ষে এবং সবুজ “Settings সফলভাবে সংরক্ষিত" নোটিশের জন্য অপেক্ষা করুন।
এলিমেন্টর এডিটরে এটি কোথায় পাবেন #
Elementor দিয়ে আপনার পৃষ্ঠা খুলুন এবং আপনি যে উপাদানটিকে গ্লাসে পরিণত করতে চান তা নির্বাচন করুন। ভিডিও উদাহরণে এটি একটি ফটো ব্যাকগ্রাউন্ডে বসে থাকা একটি ডুয়াল হেডিং উইজেট। যাও উন্নত ট্যাব, এবং আপনি পাবেন গ্লাসমরফিজম ডিসপ্লে কন্ডিশন এবং ফ্লোটিং ইফেক্টের মতো অন্যান্য মাস্টার অ্যাডঅন এক্সটেনশনের পাশাপাশি বেগুনি MA ব্যাজ সহ বিভাগ।
গ্লাসমরফিজম সেটিংস ব্যাখ্যা করা হয়েছে #
উল্টানো Glassmorphism সক্ষম করুন হ্যাঁ এবং নিয়ন্ত্রণ প্রদর্শিত হবে।
- অস্পষ্ট মান: 0 থেকে 100px (ডিফল্টরূপে 20px) পর্যন্ত উপাদানটির পিছনের পটভূমি কতটা দৃঢ়ভাবে স্মিয়ার করে। অস্পষ্টতা সমগ্র পাত্রে প্রযোজ্য, এবং এমনকি 2 এর মতো একটি ছোট মান একটি ফটোতে স্পষ্টভাবে পড়ে।
- পটভূমির রঙ: কাচের আভা। প্যানেলের টিপ স্পষ্টভাবে বলে: সর্বোত্তম নিয়ন্ত্রণের জন্য RGBA রং ব্যবহার করুন। একটি প্লেইন HEX রঙ স্বয়ংক্রিয়ভাবে 30 শতাংশ অস্বচ্ছতায় RGBA তে রূপান্তরিত হয়, তাই গ্লাসটি কখনই শক্ত হয় না।
- সীমানা ব্যাসার্ধ: কাচের কার্ডের কোণগুলি বৃত্তাকার, প্রতি পাশে বা লিঙ্কযুক্ত।
- সীমানা প্রস্থ: 0 থেকে 10px পর্যন্ত একটি আধা-স্বচ্ছ সাদা রূপরেখা যোগ করে, যা একটি কাচের ফলকের প্রান্তের মতো পড়ে। সীমানা রঙ এখানে সামঞ্জস্যযোগ্য নয়।
- ওভারফ্লো ঠিক করুন (যদি ঝাপসা কাজ না করে): একটি উদ্ধার সুইচ। কিছু লেআউট ওভারফ্লো বহন করে: লুকানো, যা ব্যাকড্রপ-ফিল্টারকে ব্লক করে যা ব্লারকে শক্তি দেয়। আপনি যদি সবকিছু সক্ষম করেন এবং এখনও কোন প্রভাব দেখতে না পান তবে এটি চালু করুন।
একটি RGBA রঙ দিয়ে কাচের আভা বাছুন #
পাশের কাস্টম সোয়াচ ক্লিক করুন পটভূমির রঙ এবং একটি রঙ চয়ন করুন, তারপর আলফা স্লাইডারটি নীচে টানুন। ডেমোতে মানটি একটি আধা-স্বচ্ছ লাল (#DC4C4C8C), যা কার্ডটিকে রঙ করে যখন এর পিছনের ছবির আসনগুলি অস্পষ্টতার মাধ্যমে দৃশ্যমান থাকে।
কোণ বৃত্তাকার এবং একটি অনুপস্থিত অস্পষ্টতা উদ্ধার #
সেট a সীমানা ব্যাসার্ধ কার্ড নরম করতে। কাচের চেহারার জন্য কয়েক পিক্সেল যথেষ্ট। এবং যদি অস্পষ্টতা দেখাতে অস্বীকার করে, ফ্লিপ করুন ওভারফ্লো ঠিক করুন হ্যাঁ: এটি ওভারফ্লো সরিয়ে দেয়: লুকানো নিয়ম যা কিছু পাত্রে ব্যাকড্রপ-ফিল্টার ব্লক করে।
সমাপ্ত প্রভাব #
এখানে সামনের প্রান্তে ফলাফল রয়েছে: একটি লাল আভা সহ একটি গোলাকার কাচের কার্ড, এর পিছনে ফটোটি ঝাপসা, এবং শিরোনাম এবং উপরে পাঠ্য তীক্ষ্ণ৷।
যেখানে গ্লাসমরফিজম ভালো কাজ করে #
- হিরো ওভারলে। একটি পূর্ণ-প্রস্থ ছবির উপরে শিরোনাম এবং CTA-এর জন্য একটি কাচের প্যানেল৷।
- মূল্য এবং বৈশিষ্ট্য কার্ড। গ্রেডিয়েন্ট সেকশনের ব্যাকগ্রাউন্ডে গ্লাস কার্ড।
- প্রশংসাপত্র ব্লক। উদ্ধৃতি যা এটি লুকিয়ে না রেখে চিত্রের উপর ভাসছে।
- স্টিকি হেডার। একটি সূক্ষ্ম অস্পষ্টতা মেনুটিকে পাঠযোগ্য রাখে কারণ এটির নীচে বিষয়বস্তু স্ক্রোল করে।
- লগইন বা সাইনআপ বক্স। একটি ব্র্যান্ড ইমেজ উপর ক্লাসিক ফ্রস্টেড প্যানেল।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
মাস্টার অ্যাডনসে গ্লাসমরফিজম এক্সটেনশন কী?
এটি একটি বিনামূল্যের এক্সটেনশন যা অ্যাডভান্সড ট্যাব থেকে যেকোনো এলিমেন্টর উপাদানে একটি ফ্রস্টেড গ্লাস ইফেক্ট যোগ করে। আপনি অস্পষ্ট শক্তি, একটি আধা-স্বচ্ছ পটভূমির রঙ, সীমানা ব্যাসার্ধ এবং সীমানা প্রস্থের জন্য নিয়ন্ত্রণ পান এবং আপনাকে কখনই CSS লিখতে হবে না।
কেন গ্লাসমরফিজম অস্পষ্টতা দেখাচ্ছে না?
সাধারণত একটি প্যারেন্ট কন্টেইনার ওভারফ্লো বহন করে: লুকানো, যা প্রভাবের পিছনে ব্যাকড্রপ-ফিল্টারকে ব্লক করে। Glassmorphism বিভাগের নীচে ফিক্স ওভারফ্লো টগল চালু করুন। এছাড়াও পরীক্ষা করুন যে উপাদানটি একটি চিত্র বা রঙিন পটভূমিতে বসে আছে, যেহেতু সাদা সাদার উপর অস্পষ্টতা অদৃশ্য।
কোন উপাদান গ্লাসমরফিজম প্রভাব ব্যবহার করতে পারে?
একটি উন্নত ট্যাব সহ যেকোনো এলিমেন্টর উপাদান: বিভাগ, কলাম, পাত্রে এবং পৃথক উইজেট। মাস্টার অ্যাডঅন ড্যাশবোর্ডে একবার এক্সটেনশনটি সক্ষম করুন এবং সম্পাদকের প্রতিটি উপাদানের উন্নত ট্যাবে গ্লাসমরফিজম বিভাগটি উপস্থিত হয়।
গ্লাসমরফিজমের জন্য আমার কোন পটভূমির রঙ ব্যবহার করা উচিত?
একটি আধা-স্বচ্ছ RGBA রঙ। যেকোনো রঙ বেছে নিন এবং আলফা চ্যানেল কমিয়ে দিন যাতে পটভূমিটি রঙের মাধ্যমে দৃশ্যমান থাকে। আপনি যদি একটি কঠিন HEX রঙ প্রবেশ করেন, এক্সটেনশনটি এটিকে 30 শতাংশ অস্বচ্ছতায় RGBA তে রূপান্তর করে যাতে কাচের প্রভাব এখনও কাজ করে।
Glassmorphism এক্সটেনশন কি বিনামূল্যে?
হ্যাঁ। এটি এক্সটেনশন ট্যাবের ডিসপ্লে উইজেট গ্রুপে এলিমেন্টরের জন্য মাস্টার অ্যাডঅন-এর বিনামূল্যের সংস্করণের সাথে পাঠানো হয়। দ্য মূল্য পৃষ্ঠা প্রো প্ল্যানগুলি বিনামূল্যের বৈশিষ্ট্যগুলির বাইরে কী যুক্ত করে তা তালিকাভুক্ত করে৷।
মোড়ানো #
Glassmorphism এক্সটেনশনটি উন্নত ট্যাবে কয়েকটি নিয়ন্ত্রণে একটি ফিডলি CSS ট্রিক পরিণত করে: সক্ষম, অস্পষ্ট, আভা, ব্যাসার্ধ এবং সীমানা। একটি ছবির উপর একটি উইজেট রাখুন, পটভূমির রঙ আধা-স্বচ্ছ রাখুন এবং অস্পষ্টতা লুকিয়ে থাকলে ফিক্স ওভারফ্লোতে পৌঁছান। দ্য গ্লাসমরফিজম এক্সটেনশন পৃষ্ঠা এটি সিএসএস নিজেই লেখার সাথে তুলনা করে। এই মত আরো সম্পাদক আপগ্রেড জন্য, ব্রাউজ করুন মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন, অথবা থেকে একটি রেডিমেড ডিজাইন ধরুন টেমপ্লেট কিট এবং উপরে গ্লাস যোগ করুন।
