আচ্ছা, একটা প্রশ্ন করি! ওয়েবসাইট বানানোর সময় সেই একই CSS Code বারবার লিখতে কেমন লাগে? 😒 সত্যি বলতে, আমার তো ভালোই লাগে না! কিন্তু কী আর করা, কাজ তো করতেই হবে, তাই না? তবে এখন আর চিন্তা নেই! আপনার এই বোরিং কাজটাকেই সহজ করে দিতে হাজির হয়েছে Copy & Paste CSS! 🥳 বিশেষ করে যারা HTML, CSS সবে শিখতে শুরু করেছেন, তাদের জন্য এটা একটা দারুণ Tool। বিশ্বাস করুন, এটা আপনার জীবন বদলে দেবে!
আমার মনে আছে, যখন প্রথম ওয়েবসাইট বানানো শুরু করেছিলাম, তখন CSS জিনিসটা ঠিকমতো বুঝতাম না। 🤯 কী করতাম জানেন? বিভিন্ন ওয়েবসাইট থেকে সুন্দর সুন্দর ডিজাইন করা Component এর Code কপি করে এনে নিজের সাইটে বসিয়ে দিতাম! 😅 কাজ হয়ে গেলে কী যে আনন্দ হতো! মনে হতো, আমি যেন বিশ্ব জয় করে ফেলেছি! ধীরে ধীরে শিখতে শিখতে এখন অবশ্য আর সেভাবে কপি-পেস্ট করতে হয় না। তবে মাঝে মাঝে পুরনো Code দেখতে বা নতুন কিছু আইডিয়া নিতে অন্যের Source Code ঘাঁটাঘাঁটি করি। আর এখনকার Browser গুলিতে Developer Tools থাকার কারণে কাজটা আরও সহজ হয়ে গেছে। যেকোনো Elements এর Style গুলো খুব সহজেই দেখা যায় এবং Edit ও করা যায়।
অফিসিয়াল ওয়েবসাইট @ Copy & Paste CSS
আজকে আপনাদের সাথে পরিচয় করিয়ে দেব "Copy & Paste CSS" নামের একটা অসাধারণ Free Service-এর সাথে। এটা শুধু একটা ওয়েবসাইট নয়, এটা একটা сокровищница (treasure trove)! এখানে Website Component-এর এক বিশাল Collection রয়েছে, যেখানে আপনি খুব সহজেই CSS Style কপি-পেস্ট করতে পারবেন। এখানে আপনি আপনার প্রয়োজন অনুযায়ী নানা ধরনের Button ➡️, Container shadows (Box-shadows) 🟦, Form Input Field 📝, Palette 🎨, এমনকি Emojis-ও 😍 পেয়ে যাবেন! Component গুলো সরাসরি ওয়েবসাইটে দেখানো হয়, আর শুধু একটা Click করলেই CSS আপনার Clipboard-এ কপি হয়ে যাবে। ভাবুন তো, কাজটা কত সহজ হয়ে গেল! 😮
আর হ্যাঁ, সবচেয়ে Exciting ব্যাপার হলো, এই সাইটে যে Component গুলো রয়েছে, সেগুলি জনপ্রিয় কিছু Development Framework বা Web Service থেকে নেওয়া হয়েছে। তার মানে আপনি সবসময় Latest Design Trendগুলোর সাথে Update থাকতে পারছেন! 🤩 যেমন: Bootstrap, GitHub, Carbon (IBM), Mailchimp, Material Design, Tailwindcss, Fluent UI (Microsoft)। তাই আপনার ওয়েবসাইটটি সবসময় Modern এবং Professional দেখাবে। 😎 আর যদি এই Design System গুলো সম্পর্কে আরও বিস্তারিত জানতে চান, তাহলে সাইটে দেওয়া Linkগুলোতে Click করে সবকিছু দেখে নিতে পারেন। আমি মনে করি, একজন Web Developer হিসেবে আপনার এই Design System গুলো সম্পর্কে ভালো ধারণা থাকা উচিত। 😉
আসুন, এবার দেখে নেওয়া যাক Copy & Paste CSS কিভাবে ব্যবহার করতে হয়:
১. Web Component-এর Category Select করুন: প্রথমে Copy & Paste CSS Website-এ যান। তারপর আপনার প্রয়োজন অনুযায়ী Web Component-এর Category Select করুন। ধরুন, আপনি আপনার Website-এর জন্য একটা সুন্দর Button খুঁজছেন, তাহলে Button Category-তে যান। অথবা যদি আপনি Container এর Shadow নিয়ে Experiment করতে চান, তাহলে Container Shadows অপশনটি Select করুন। এছাড়া Form Input Field, Palette অথবা Emojis-এর মতো আরও অনেক Category রয়েছে, যেগুলো আপনি Explore করতে পারেন।
২. CSS Style দেখুন এবং কপি করুন: প্রতিটি Component-এর Design, Color, এবং সেটি কোন Framework বা Web Service থেকে নেওয়া হয়েছে, তা পরিষ্কারভাবে দেওয়া আছে। Button-এর ক্ষেত্রে আপনি বিভিন্ন Style দেখতে পারবেন এবং Mouse Hover করলে তারপরিবর্তনও দেখতে পাবেন। আপনার Project এর জন্য যেটা Perfect মনে হয়, সেটির উপরে "Copy CSS" Button-এ Click করলেই Style কপি হয়ে যাবে। ব্যস, আপনার কাজ শেষ! 🎉
৩. Container Shadows (Box-shadows) এর জাদু: এখানে আপনি বিভিন্ন Shadow ইফেক্ট দেখতে পারবেন। হালকা Shadow থেকে শুরু করে ডিপ Shadow - সব কিছুই এখানে রয়েছে! আপনার Website-এর Design এর সাথে যেটা মানানসই, সেটিতে Click করে Code কপি করে নিন। আর আপনার Website-কে দিন এক নতুন লুক! ✨
৪. Design System-এর ঠিকানা: কিছু কিছু Component-এর সাথে "Design System" লেখা থাকে, যেগুলিতে Click করলে আপনি সংশ্লিস্ট Design System-এর Website-এ চলে যাবেন। যেমন, Google-এর Material Design অথবা Microsoft-এর Fluent UI। এই Design System Website-গুলোতে আপনি Component গুলো সম্পর্কে আরও বিস্তারিত জানতে পারবেন এবং কিভাবে ব্যবহার করতে হয়, তার Guideline ও পাবেন।
৫. Form Input Field: এখানে বিভিন্ন ধরনের Form Input Field Design দেওয়া আছে। Login Form থেকে শুরু করে Contact Form - সব ধরনের Input Field-এর Design আপনি এখানে পাবেন। আপনার Project-এর জন্য যেটা দরকার, সেটা Select করুন এবং Copy করে আপনার Website-এ ব্যবহার করুন।
৬. কপি নিশ্চিত করুন: Success Message! 🥳: যখন আপনি Copy করবেন, তখন স্ক্রিনের উপরে "CSS Copied!" লেখা একটা Success Message দেখতে পাবেন। এর মানে হলো, আপনার Styleটি Clipboard-এ কপি হয়ে গেছে। এবার আপনি যেখানে চান, Code টা Paste করে আপনার Website-কে আরও সুন্দর করে তুলুন! 💖
৭. Palette এবং Emoji: অতিরিক্ত সুবিধা! 🎁: Copy & Paste CSS-এ আপনি বিভিন্ন Palette (যেগুলি Web Service বা Development Framework-এ ব্যবহার করা হয়) এবং Emoji-ও খুঁজে পাবেন। তবে এই Componentগুলি Web Component-এর মতো নয়। তাই একটু Explore করে দেখতে পারেন। কে বলতে পারে, হয়তো আপনার জন্য দারুণ কিছু Surprise অপেক্ষা করছে! 😉
তাহলে আর দেরি কেন? 🤔 আজই Copy & Paste CSS ব্যবহার করে আপনার Website-কে আরও স্টাইলিশ, আকর্ষণীয় এবং Professional করে তুলুন! 💪 এবং Web Development-এর Journey-টাকে আরও সহজ ও আনন্দময় করে তুলুন! 💖✨ বিশ্বাস করুন, আপনি একজন Superstar Web Designer হয়ে উঠবেন! 🌟
আমি মো আতিকুর ইসলাম। কন্টেন্ট রাইটার, টেল টেক আইটি, গাইবান্ধা। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 5 বছর যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 556 টি টিউন ও 94 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 64 ফলোয়ার আছে এবং আমি টেকটিউনসে 3 টিউনারকে ফলো করি।
“আল্লাহর ভয়ে তুমি যা কিছু ছেড়ে দিবে, আল্লাহ্ তোমাকে তার চেয়ে উত্তম কিছু অবশ্যই দান করবেন।” —হযরত মোহাম্মদ (সঃ)
