আসসালামুআলাইকুম বন্ধুরা, ডিজাইন ভালোবাসেন? তাহলে নিশ্চয়ই মনে মনে চান আপনার ওয়েবসাইট বা ব্লগের ছবিগুলো যেন একটু ভিন্ন, একটু নজরকাড়া হক! তাইতো আমি নিয়ে এসেছি Clip-Path জেনারেটর টুলস। আর নয় বোরিং কোডিং, এই টুলের মাধ্যমে আপনি ,আপনার ছবি বা যেকোনো HTML এলিমেন্টকে গতানুগতিক আয়তাকার বক্স থেকে বের করে এনে বৃত্ত, ত্রিভুজ, মেঘ বা হীরার মতো আকৃতি দিতে পারবেন নিজের ইচ্ছে মতো। ব্যাপারটা অনেকটা আপনার ছবির ধারগুলো ইচ্ছেমতো কাঁচি দিয়ে কেটে ফেলার মতো! আপনার পাশাপাশি আপনার ওয়েবসাইটের ভিজিটরেরাও যেনো ব্যবহার করতে পারে, সে জন্য অবশ্যই এই টুলসটি পাবলিক করে দিবেন।
বন্ধুরা চলুন, দেরি না করে এর দারুণ ফিচারগুলো দেখে নেই এবং তারপর শিখব, কীভাবে এই টুলটি আপনার নিজের ব্লগার পেজে সেটআপ করতে হয়।
ClipPath Designer: কেন এই টুলটি আপনার ডিজাইন কিটে থাকা উচিত?
এই টুলটিকে আমি কেন এত পছন্দ করি, তার কয়েকটি কারণ নিচে তুলে ধরছি। একবার ব্যবহার করলেই আপনি বুঝবেন, এটি কতটা সময় বাঁচিয়ে দেয়!
১. চোখে দেখে ডিজাইন, হাতে-নাতে ফলাফল
স্লাইড করুন আর দেখুন: বৃত্তের ব্যাসার্ধ বা ইনসেটের দূরত্ব বাড়াচ্ছেন? স্লাইডার নড়ানোর সাথে সাথেই ডান পাশে প্রিভিউ বক্সে তাত্ক্ষণিক পরিবর্তন দেখতে পাবেন। এ যেন রিয়েল-টাইম ডিজাইনিং!
ড্র্যাগ করে কাস্টম শেপ: সবচেয়ে মজার ফিচার হলো ‘Custom’ অপশনটি। এখানে আপনি ক্যানভাসে ক্লিক করে ইচ্ছামতো পয়েন্ট যোগ করতে পারেন এবং সেই পয়েন্টগুলো ধরে টেনে যেকোনো ধরনের জটিল, অদ্ভুত বা শৈল্পিক আকৃতি তৈরি করতে পারেন—যেমন তারা, হার্ট বা বজ্রপাত!
২. আপনার পছন্দের শেপগুলো হাতের নাগালে
যদি তাড়াহুড়োয় থাকেন বা একটি স্ট্যান্ডার্ড শেপ চান, তবে এই প্রিসেটগুলোই যথেষ্ট:
গোল করে দিন (Circle): প্রোফাইল ছবি বা লোগোর জন্য আদর্শ।
ডিম্বাকৃতি (Ellipse): বৃত্ত থেকে একটু অন্যরকম, লম্বা বা চওড়া ডিমের মতো আকৃতি।
সঠিক বহুভুজ (Polygon): একটি ক্লাসিক ট্রাইঅ্যাঙ্গেল (Triangle) বা ডায়মন্ড (Diamond) শেপ পেতে এর থেকে সহজ আর কিছু হয় না।
ফ্রেম (Inset): আপনার এলিমেন্টের চারপাশ থেকে সুন্দর একটা ফ্রেম তৈরি করে, যা ব্যানার বা বক্সের জন্য দুর্দান্ত।
৩. আপনার ছবি দিয়ে পরীক্ষা করুন!
ছবি আপলোড করুন: টুলটি শুধু গ্রেডিয়েন্ট বা সলিড রঙের উপরেই কাজ করে না। আপনি সহজেই আপনার নিজের ছবি আপলোড করে দেখতে পারেন, ক্লিপ-পাথ দিলে ছবিটি ঠিক কেমন দেখাবে। ড্র্যাগ অ্যান্ড ড্রপ করলেই কাজ শেষ!
ফাইল এক্সপোর্ট: আপনার ডিজাইন করা শেপটি যদি কেউ ব্যবহার করতে চায়, তবে তাকে শুধু CSS কোডটি কপি করতে দিন। আর যদি আপনি শুধু শেপ-কাটা ছবিটি চান, তাহলে এক ক্লিকেই PNG ফাইল হিসেবে ডাউনলোড করে নিতে পারবেন। কতটা সহজ, ভাবুন তো!
ব্লগার পেজে এই টুলটি সেটআপ করবেন কীভাবে?
অনেকেই ভাবেন ব্লগার সাইটে এমন টুল সেটআপ করা কঠিন। একদমই না! পাঁচ মিনিটের মধ্যে আপনি এই টুলের একটি কপি আপনার নিজস্ব ব্লগে রাখতে পারবেন। চলুন দেখে নেই:
১. ব্লগারে প্রবেশ করুন এবং একটি নতুন পেজ খুলুন
প্রথমেই নিচের লিংকে গিয়ে কোডটি কপি করে নিন।
তারপর আপনার ব্লগার ড্যাশবোর্ডে লগইন করুন। বামপাশের মেনু থেকে “Pages” (পেজসমূহ) এ যান, তারপর “New Page” (নতুন পেজ) বাটনে ক্লিক করুন।
২. HTML মোড বেছে নিন
পেজ এডিটরের উপরে বাম দিকে দেখুন, একটি পেন্সিল আইকন বা মেনু আছে। সেখান থেকে ড্রপডাউন করে অবশ্যই HTML View (এইচটিএমএল ভিউ) নির্বাচন করুন। কোডটি এই মোডেই পেস্ট করতে হবে, কম্পোজ মোডে নয়।
৩. সম্পূর্ণ কোডটি কপি-পেস্ট করুন
আমি আপনাকে যে বিশাল HTML কোডটি দিয়েছি সেটি
,ব্লগার এডিটরের মধ্যে যা আছে, সব মুছে দিন এবং সেই ফাঁকা জায়গায় এই নতুন কোডটি পেস্ট করুন।
আপনার পেজটির একটি সুন্দর নাম দিন, যেমন: “অনলাইন ক্লিপ-পাথ ডিজাইন টুল”।
৪. পাবলিশ করুন আর উপভোগ করুন!
পেজটি একবার চেক করে Publish (প্রকাশ) বাটনে ক্লিক করুন। ব্যস! আপনার ভিজিটররা এখন আপনার ব্লগের এই নতুন পেজ থেকে দারুণ সব ক্লিপ-পাথ শেপ তৈরি করতে পারবে। এটিকে আপনি আপনার সাইডবার বা মেনুতে লিঙ্ক করে দিতে পারেন।
এই টুলটি আপনার ডিজাইনের কাজকে এক ধাপ এগিয়ে দেবে নিশ্চিত। হাতে কোড লেখা ভুলে যান; এবার শুধু মজা করে ডিজাইন করুন আর কোড জেনারেট করে নিন। আশা করি, আপনার ব্লগিং বা ডিজাইনিং যাত্রায় এটি অনেক কাজে দেবে!
তো বন্ধুরা আজকের মতো এখানেই শেষ করতেছি দেখা হবে নতুন কোনো পোস্টে। ভালো থাকুন সুস্থ্য থাকুন ট্রিকবিডির সাথেই থাকুন। ধন্যবাদ!