ফ্রি এলিমেন্টর গ্লাসমরফিজম এক্সটেনশন: এক টগলে ফ্রস্টেড গ্লাস ইফেক্ট
গ্লাসমরফিজম হল ফ্রস্টেড গ্লাস লুক: একটি আধা-স্বচ্ছ প্যানেল যা এর পিছনে যা কিছু বসে থাকে তা ঝাপসা করে দেয়। মাস্টার অ্যাডঅন-এ ফ্রি গ্লাসমরফিজম এক্সটেনশন এটিকে যেকোনো এলিমেন্টর উইজেট, কলাম, বিভাগ বা কন্টেইনারের অ্যাডভান্সড ট্যাবে যোগ করে। এটি চালু করুন, অস্পষ্টতা সেট করুন এবং একটি সি-থ্রু ব্যাকগ্রাউন্ড কালার, কোণগুলি বৃত্তাকার করুন এবং উপাদানটি একটি গ্লাস কার্ডে পরিণত হয়। এটি হিরো ওভারলে, মূল্য নির্ধারণ কার্ড, প্রশংসাপত্র এবং স্টিকি শিরোনামগুলির জন্য উপযুক্ত।
ব্লার এবং গ্লাস টিন্ট নিয়ন্ত্রণ
ব্লার মান 0 থেকে 100px পর্যন্ত চলে এবং 20px থেকে শুরু হয়। পটভূমির রঙ কাচের আভা সেট করে: একটি RGBA রঙ বেছে নিন এবং এর অস্বচ্ছতা কমিয়ে দিন যাতে পিছনের বিষয়বস্তু এখনও দেখা যায়। বর্ডার ব্যাসার্ধ কোণগুলিকে px, % বা em-এ বৃত্তাকার করে এবং বর্ডার প্রস্থ 10px পর্যন্ত একটি পাতলা, আধা-স্বচ্ছ সাদা প্রান্ত যোগ করে।
- ডিফল্টরূপে 0 থেকে 100px, 20px পর্যন্ত ব্লার মান।
- রঙের জন্য RGBA পটভূমির রঙ। একটি HEX বা RGB রঙ আপনার জন্য 30% অস্বচ্ছতায় রূপান্তরিত হয়।
- প্রতি কোণে সীমানা ব্যাসার্ধ, প্লাস একটি 0 থেকে 10px কাচের প্রান্ত।
অস্পষ্টতা না দেখালে ওভারফ্লো ঠিক করুন
অস্পষ্টতা CSS ব্যাকড্রপ-ফিল্টার বৈশিষ্ট্য থেকে আসে, এবং ওভারফ্লো: লুকানো সবচেয়ে সাধারণ কারণ এটি অনুপস্থিত হয়। ফিক্স ওভারফ্লো সুইচ উপাদানটির ওভারফ্লোকে দৃশ্যমানে সেট করে, যাতে আপনি স্টাইলশীট না খুলেই এটি ঠিক করতে পারেন।
- Glassmorphism প্যানেলে একটি সুইচ, কোন কাস্টম CSS নেই।
- প্রভাব চালু হলে এটি ব্যবহার করুন কিন্তু কিছুই ঝাপসা দেখায় না।
- এছাড়াও পরীক্ষা করুন যে উপাদানটি একটি ফটো, গ্রেডিয়েন্ট বা অন্যান্য ব্যস্ত পটভূমিতে বসে আছে। সাদা ওভার ঝাপসা কিছুই নেই।
Glassmorphism CSS বনাম Glassmorphism এক্সটেনশন
এলিমেন্টরের সিএসএস ফিল্টার উপাদানটিকেই অস্পষ্ট করে, পাঠ্য অন্তর্ভুক্ত। একটি গ্লাস কার্ডের পরিবর্তে ব্যাকড্রপ-ফিল্টার প্রয়োজন, যা শুধুমাত্র উপাদানটির পিছনে যা বসে তা ঝাপসা করে দেয় এবং এলিমেন্টরের এটির জন্য কোন নিয়ন্ত্রণ নেই। হাত দিয়ে লেখা, CSS দেখতে এরকম:
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
}| হাতে লেখা CSS | গ্লাসমরফিজম এক্সটেনশন | |
|---|---|---|
| যেখানে আপনি এটি সেট | একটি কাস্টম CSS ক্ষেত্র বা আপনার স্টাইলশীট | উন্নত ট্যাবে নিয়ন্ত্রণ |
| সাফারি উপসর্গ | যোগ করুন -ওয়েবকিট-ব্যাকড্রপ-ফিল্টার নিজেই | অন্তর্ভুক্ত |
| HEX বা RGB রং | আপনি অস্বচ্ছতা যোগ না করা পর্যন্ত শক্ত থাকুন | 30% অস্বচ্ছতায় রূপান্তরিত |
| ওভারফ্লো দ্বারা অবরুদ্ধ ঝাপসা: লুকানো | এটি নিজেই খুঁজুন এবং ওভাররাইড করুন | ওভারফ্লো সুইচ ঠিক করুন |
| কাজ করে | আপনার নির্বাচক লক্ষ্য যাই হোক না কেন | উইজেট, কলাম, বিভাগ এবং পাত্রে |
ব্যাকড্রপ-ফিল্টার বর্তমান ক্রোম, এজ, সাফারি এবং ফায়ারফক্সে কাজ করে। পুরানো ব্রাউজারগুলি অস্পষ্টতা ছাড়াই আধা-স্বচ্ছ পটভূমি দেখায়। গ্লাস নড়াচড়া বা রঙের চেয়ে ভাল দেখায়, তাই এটির উপরে চেষ্টা করুন কণা অথবা একটি অ্যানিমেটেড গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড (প্রো)। প্যানেল কভার করে না এমন প্রভাবগুলির জন্য, আপনার নিজস্ব নিয়ম যোগ করুন কাস্টম সিএসএস.
গ্লাসমরফিজমের জন্য প্রায়শই জিজ্ঞাসিত প্রশ্ন
কেন আমার অস্পষ্ট প্রভাব দেখাচ্ছে না?
Glassmorphism প্যানেলে ফিক্স ওভারফ্লো চালু করুন। এটি উপাদানটির ওভারফ্লোকে দৃশ্যমান করে তোলে যাতে ব্যাকড্রপ-ফিল্টার কাজ করতে পারে। এছাড়াও উপাদানটির পিছনে একটি চিত্র বা একটি রঙিন পটভূমি রয়েছে তা নিশ্চিত করুন৷।
আমি কি কাচের প্রভাব সহ কঠিন রং ব্যবহার করতে পারি?
হ্যাঁ। একটি HEX বা RGB রঙ 30% অস্বচ্ছতায় RGBA তে রূপান্তরিত হয়, তাই গ্লাসটি দেখতে থাকে। সঠিক নিয়ন্ত্রণের জন্য, একটি RGBA রঙ চয়ন করুন এবং অস্বচ্ছতা নিজেই সেট করুন।
এটা কি কোন থিমের সাথে কাজ করে?
হ্যাঁ। প্রভাবটি এলিমেন্টর উপাদানগুলিতে সেট করা হয়েছে, তাই এটি এলিমেন্টর চালায় এমন যেকোনো থিমের সাথে কাজ করে। দর্শকদের একটি ব্রাউজার প্রয়োজন যা ব্যাকড্রপ-ফিল্টার সমর্থন করে, যা Chrome, Edge, Safari এবং Firefox-এর বর্তমান সংস্করণগুলিকে কভার করে৷।
Glassmorphism এক্সটেনশন কি বিনামূল্যে?
হ্যাঁ। Glassmorphism হল Elementor-এর জন্য Master Addons-এর বিনামূল্যের এক্সটেনশনগুলির মধ্যে একটি। মাস্টার অ্যাডঅন ড্যাশবোর্ডে এটি চালু করুন এবং এটি প্রতিটি উপাদানের উন্নত ট্যাবে প্রদর্শিত হবে।
দ্রুত এবং ডিজাইন আরও স্মার্ট করতে আরও বৈশিষ্ট্যগুলি অন্বেষণ করুন৷
কেন এক প্রভাবে থামবেন? মাস্টার অ্যাডনস স্যুট আপনার প্রয়োজনীয় সমস্ত কিছু সরবরাহ করে: অনন্য উইজেট, গভীর কাস্টমাইজেশন এবং বিশেষ সরঞ্জাম যা একসাথে নির্বিঘ্নে কাজ করে। এলিমেন্টরকে আপনার চূড়ান্ত ডিজাইনের পাওয়ার হাউসে পরিণত করুন।
ধারক অতিরিক্ত
নিদর্শন
পোস্ট/পেজ ডুপ্লিকেটর
রিডিং প্রোগ্রেস বার
