আসসালামুআলাইকুম বন্ধুরা , আপনারা হয়তো জানেন ওয়েব ডিজাইনের দুনিয়ায় ট্রেন্ড (trend) আসে আর যায়, কিন্তু কিছু কিছু স্টাইল (style) দর্শকদের মনে এক বিশেষ ছাপ ফেলে যায়। এই মুহূর্তে, নিওমরফিজম (Neumorphism) ডিজাইন তার ব্যতিক্রমী ভিজ্যুয়াল ডেপথ (visual depth) এবং সফট ইউআই (soft UI) লুকের জন্য ডিজাইনারদের মধ্যে দারুণ জনপ্রিয়। এটি হল এমন একটি স্টাইল যেখানে এলিমেন্টগুলো (elements) মনে হয় যেন স্ক্রিনের সারফেস (surface) থেকেই উঠে এসেছে অথবা ভেতরে সেঁধিয়ে গেছে। কিন্তু এই লুক তৈরি করাটা CSS কোডিংয়ের মাধ্যমে বেশ সময়সাপেক্ষ আর জটিল হতে পারে।
ঠিক এই সমস্যার সমাধান দিতে, আমি আপনাদের জন্য নিয়ে এসেছি একটি অসাধারণ টুল— Neumorphism Maker Pro! এটি ব্যবহার করে এক মুহূর্তেই আপনি আপনার মনের মতো নিওমরফিক ডিজাইন তৈরি করতে পারবেন এবং সরাসরি আপনার ওয়েবসাইটে ব্যবহার করতে পারবেন।
Neumorphism Maker Pro
এই টুলটির ইউজার ইন্টারফেস (user interface) এতটাই সহজ যে, যে কেউ সহজেই এটি ব্যবহার করতে পারবে। এখানে কী কী দারুণ ফিচার্স পাচ্ছেন, তা দেখে নিন:
১. লাইভ প্রিভিউ এডিটর
আপনি যখনই কোনো স্লাইডার (slider) বা কালার পিকার (color picker) অ্যাডজাস্ট করবেন, তার প্রভাব সাথে সাথে স্ক্রিনের মাঝখানে থাকা এলিমেন্টটিতে দেখা যাবে। এর ফলে, কোড লেখার আগেই আপনি আপনার ডিজাইনটির শেষ রূপ দেখতে পারবেন।
২. কাস্টমাইজেশনের স্বাধীনতা
নিওমরফিজমের সবথেকে গুরুত্বপূর্ণ প্যারামিটারগুলো (parameters) আপনার হাতের মুঠোয়:
- শ্যাডো টাইপ টোগল : এক ক্লিকেই ‘আউটার’ (Convex) শ্যাডো থেকে ‘ইনার’ (Concave) শ্যাডো-তে পরিবর্তন করুন। বাটন নাকি ইনপুট ফিল্ড তৈরি করছেন, সেটা এর মাধ্যমে সহজেই ঠিক করা যায়।
- রঙের কাস্টমাইজেশন: এলিমেন্ট এবং ব্যাকগ্রাউন্ড কালার দুটোই আলাদাভাবে সেট করতে পারবেন। এমনকি ডার্ক ও লাইট শ্যাডোর বেস কালারও পরিবর্তন করার সুযোগ আছে।
- ডাইমেনশন কন্ট্রোল : এলিমেন্টের প্রস্থ (Width), উচ্চতা (Height) এবং বর্ডার রেডিয়াস (Border Radius) স্লাইডারের মাধ্যমে অ্যাডজাস্ট করুন।
- শ্যাডো ডিরেকশন ও গভীরতা: Offset X এবং Offset Y দিয়ে আলোর উৎস ঠিক করুন, এবং Blur ও Intensity দিয়ে শ্যাডোর গভীরতা ও স্বচ্ছতা নিয়ন্ত্রণ করুন।
৩. ইন্টেলিজেন্ট প্রিসেট ও ডার্ক মোড
- এলিমেন্ট প্রিসেট: বাটন (Button), কার্ড (Card / Panel), এবং ইনপুট ফিল্ডের (Input Field) জন্য আলাদা বিল্ট-ইন প্রিসেট আছে। একটি ক্লিক করলেই সব ভ্যালু প্রিসেট অনুযায়ী সেট হয়ে যায়।
- ডার্ক মোড টোগল: ডার্ক মোড ডিজাইনের জন্য একটি ডেডিকেটেড বাটন রয়েছে, যা পুরো UI এবং আপনার তৈরি নিওমরফিক এলিমেন্টটিকে ডার্ক থিমে নিয়ে আসে।
৪. ওয়ান-ক্লিক এক্সপোর্ট ও সেভিং
- CSS কপি ও এক্সপোর্ট: আপনার তৈরি ডিজাইনটির জন্য প্রয়োজনীয় সম্পূর্ণ CSS কোড স্বয়ংক্রিয়ভাবে জেনারেট হয়ে যায়। এক ক্লিকে কোড কপি করুন অথবা সরাসরি
.cssফাইল এক্সপোর্ট করুন। - PNG এক্সপোর্ট: ডিজাইনের একটি স্ক্রিনশট PNG ইমেজ ফাইল হিসেবে ডাউনলোড করারও সুবিধা রয়েছে।
- লোকাল সেভিং: আপনার বর্তমান ডিজাইন কনফিগারেশনটি ব্রাউজারের লোকাল স্টোরেজে সেভ করে রাখুন, যাতে পরে ফিরে এসে আবার কাজ শুরু করতে পারেন।
ব্লগার-এ আপনার নিওমরফিজম টুল কিভাবে সেটআপ করবেন
আপনার যদি নিজস্ব Blogger বা অন্য কোনো ওয়েবসাইটে এই টুলটি ব্যবহার করে ডিজাইন তৈরি করার ব্যবস্থা রাখতে চান, তবে আপনি সহজেই এই সম্পূর্ণ HTML কোডটি একটি নতুন পেজে এমবেড (Embed) করতে পারেন।
ধাপ ১: নতুন একটি পেজ তৈরি করুন
- আপনার Blogger Dashboard-এ লগইন করুন।
- বাম দিকের মেনু থেকে “Pages” অপশনে ক্লিক করুন।
- “New Page” বাটনে ক্লিক করে একটি নতুন পেজ তৈরি করুন।
ধাপ ২: HTML ভিউ-তে কোড পেস্ট করুন
- পেজ এডিটর (Page Editor) ওপেন হওয়ার পর, উপরে বাম দিকে থাকা পেন্সিল আইকনটিতে ক্লিক করুন।
- ড্রপডাউন মেনু থেকে “HTML View” নির্বাচন করুন।
- এবার এখান থেকে কপি করা কোডটি পেস্ট করুন।
- পেজের একটি টাইটেল (Title) দিন, যেমন: “Neumorphism Maker Tool”।
- ডান দিকে “Options”-এ গিয়ে “Reader comments”-কে “Don’t allow, hide existing” করে দিতে পারেন, যাতে ডিজাইন টুলের নিচে কোনো কমেন্ট না দেখায়।
- এবার “Publish” বাটনে ক্লিক করুন।
ব্যাস! আপনার Blogger ওয়েবসাইটে একটি পুরোপুরি কার্যকরী নিওমরফিজম জেনারেটর টুল সেটআপ হয়ে গেল। এখন থেকে আপনি বা আপনার ভিজিটররা সহজেই এই পেজটি ব্যবহার করে নিওমরফিক ডিজাইন তৈরি করতে পারবেন।
নিওমরফিজম মেকার প্রো আপনার ডিজাইন ওয়ার্কফ্লোকে আরও দ্রুত, সহজ এবং মজাদার করে তুলবে। আজই আপনার নিওমরফিক অ্যাডভেঞ্চার শুরু করুন!
কেমন লাগলো এই টুলটি? আপনি কি আপনার পরবর্তী প্রজেক্টে নিওমরফিজম ব্যবহার করার কথা ভাবছেন? কমেন্ট করে জানান!
✨ Banglafeel |
|
💡 AnsBd |
ভালো থাকুন, সুস্থ্য থাকুন ট্রিকবিডির সাথেই থাকুন। ধন্যবাদ।