একটি বোতামকে দৃশ্যত স্টাইল করুন এবং আপনার ওয়েবসাইটে ব্যবহারের জন্য HTML ও CSS সংগ্রহ করুন। একটি প্রিসেট দিয়ে শুরু করুন, টাইপোগ্রাফি, রঙ, আকৃতি এবং ছায়া সামঞ্জস্য করুন, তারপর এক্সপোর্ট করার আগে ইন্টারঅ্যাকশন স্টেটগুলো প্রিভিউ করে দেখুন।
শুরু করার জন্য একটি পয়েন্ট বেছে নিনএটিকে নিজের মতো করে তুলুন
এভরিডে, ক্লাসিক, শেপড, এক্সপ্রেসভ, গ্রেডিয়েন্টস এবং এলিট কালেকশন জুড়ে 44 প্রিসেটগুলো ব্রাউজ করুন। প্রতিটি প্রিসেট হলো একটি শুরুর পয়েন্ট যা আপনি এডিট করতে পারেন।
প্রিসেটগুলো কীভাবে আপনার ডিজাইনের ওপর প্রভাব ফেলে
প্রথমে বেছে নিন, তারপর নিখুঁত করুন
গ্যালারি ছোট করতে স্টাইল কালেকশন ব্যবহার করুন। একটি প্রিসেট প্রয়োগ করলে তা ডিফল্ট এবং হোভার উভয় স্টাইলকেই প্রতিস্থাপন করে, তবে আপনার বোতামের টেক্সট এবং ক্লাস নেম অপরিবর্তিত থাকে।
একটি সাধারণ সলিড ফিল, একটি শেপড কর্নার, একটি স্পষ্ট আউটলাইন বা আরও আলংকারিক কোনো ট্রিটমেন্ট ব্যবহার করে দেখুন। একবার একটি দিক খুঁজে পেলে, আপনার পৃষ্ঠার সাথে মানানসই ডিটেইলস তৈরি করতে অন্যান্য ট্যাবগুলো ব্যবহার করুন।
লেবেলটিকে সঠিক মনে হতে দিন
বোতামের টেক্সট, ফন্ট ফ্যামিলি, সাইজ, ওয়েট, স্পেসিং, লাইন হাইট, অ্যালাইনমেন্ট এবং টেক্সট কালার সেট করুন। কাজ করার সময় লেবেলটি আপডেট হতে দেখুন।
টেক্সট এবং স্পেসিং নিখুঁত করুন
টাইপোগ্রাফি যা অ্যাকশনের সাথে মানানসই
টেক্সটে ফন্ট কন্ট্রোল এবং দ্বিতীয় একটি বোতামের টেক্সট ফিল্ড থাকে। ফন্টের আকার 10 থেকে 80 পিক্সেল পর্যন্ত হতে পারে; তালিকাভুক্ত ফ্যামিলিগুলো ভিজিটরের ডিভাইসে উপলব্ধ ফন্ট ব্যবহার করে।
একটি ছোট লেবেল ব্যবহার করুন যা অ্যাকশনটিকে বর্ণনা করে। ফিলে, অনুভূমিক এবং উল্লম্ব প্যাডিং টাইপের আকার পরিবর্তন না করেই এর চারপাশে জায়গা যোগ করে। বোতামটি যেখানে ব্যবহার করা হবে সেই পৃষ্ঠায় দীর্ঘ লেবেলগুলো পরীক্ষা করে দেখুন।
সলিড বা গ্রেডিয়েন্ট ফিল বেছে নিন
একটি ব্যাকগ্রাউন্ড কালার ব্যবহার করুন অথবা লিনিয়ার গ্রেডিয়েন্টের সাথে দুটি রঙ মিশ্রিত করুন। কালার পিকার এবং হেক্স ইনপুট আপনাকে দৃশ্যত বা নিখুঁতভাবে কাজ করতে দেয়।
রঙ এবং গ্রেডিয়েন্টের দিক সেট করুন
দুটি রঙ, একটি স্পষ্ট দিক
ফিলে, ফিল স্টাইল পরিবর্তন করে লিনিয়ার গ্রেডিয়েন্ট করুন যাতে সেকেন্ড কালার এবং গ্রেডিয়েন্ট অ্যাঙ্গেল দেখা যায়। অ্যাঙ্গেলটি 0 থেকে 360 ডিগ্রি পর্যন্ত হয়।
হেক্স ফিল্ডগুলো সম্পূর্ণ ছয়-সংখ্যার রঙ বা তিন-সংখ্যার শর্টহ্যান্ড গ্রহণ করে। গ্রেডিয়েন্টের উভয় প্রান্তের বিপরীতে সাদা বা রঙিন লেবেল পরীক্ষা করুন; স্টুডিও স্বয়ংক্রিয়ভাবে টেক্সট কন্ট্রাস্ট যাচাই করে না।
আউটলাইন এবং গভীরতা নিয়ন্ত্রণ করুন
লিঙ্কড বা স্বতন্ত্র কর্নার, বর্ডারের প্রস্থ এবং স্টাইল, বক্স শ্যাডো এবং টেক্সট শ্যাডো সামঞ্জস্য করুন। বোতামটিকে এমন একটি আকৃতি দিন যা এর প্রেক্ষাপটের সাথে মানানসই।
কর্নার, বর্ডার এবং শ্যাডো অন্বেষণ করুন
একটি স্পষ্ট আয়তক্ষেত্র থেকে একটি নরম পিল পর্যন্ত
শেপে, একটি সাধারণ ব্যাসার্ধের জন্য 'লিঙ্ক অল কর্নারস' চালু রাখুন, অথবা প্রতিটি কর্নার আলাদাভাবে সেট করতে এটি বন্ধ করুন। বর্ডার স্টাইলের মধ্যে রয়েছে সলিড, ড্যাশড, ডটেড, ডাবল, ইনসেট, আউটসেট, রিজ, গ্রুভ এবং নান।
শ্যাডোতে, অনুভূমিক এবং উল্লম্ব অফসেট, ব্লার, রঙ এবং অস্বচ্ছতা সেট করুন। বক্স শ্যাডোতে স্প্রেড এবং একটি ইনসেট সুইচও থাকে। টেক্সট শ্যাডো আলাদা, তাই আপনি বোতামের আউটলাইন পরিবর্তন না করেই লেবেলে গভীরতা যোগ করতে পারেন।
ইন্টারঅ্যাকশনটিও ডিজাইন করুন
ডিফল্ট এবং হোভার স্টাইল আলাদাভাবে এডিট করুন। ডিফল্ট, হোভার এবং অ্যাক্টিভ অ্যাপিয়ারেন্স প্রিভিউ করুন, তারপর হালকা এবং গাঢ় ক্যানভাসে বোতামটি তুলনা করুন।
এডিটিং এবং প্রিভিউ স্টেটগুলো বুঝুন
দুটি এডিটযোগ্য স্টাইল, তিনটি প্রিভিউ স্টেট
এডিটিং স্টেট নির্ধারণ করে যে আপনার কন্ট্রোলগুলো কোন স্টাইল পরিবর্তন করবে। ক্যানভাস স্টেট বোতামগুলো শুধুমাত্র প্রিভিউ নির্বাচন করে। প্রিভিউতে হোভার বা প্রেস করলে এর ইন্টারঅ্যাকশনও দেখা যায়।
হোভার ভ্যালুগুলো যা ডিফল্টের সাথে মেলে, সেগুলো কাস্টমাইজ না করা পর্যন্ত বেস এডিট অনুসরণ করে। এক্সপোর্ট করা CSS-এ প্রয়োজনে একটি হোভার রুল, একটি ফোকাস-ভিজিবল আউটলাইন, একটি অ্যাক্টিভ মুভমেন্ট এবং একটি রিডিউসড-মোশন রুল অন্তর্ভুক্ত থাকে।
আপনার প্রজেক্টে CSS নিয়ে আসুন
জেনারেট করা CSS এবং মানানসই HTML বোতাম কপি করুন, অথবা একটি স্টাইলশিট ডাউনলোড করুন। একটি ক্লাস নেম এই দুটি অংশকে সংযুক্ত রাখে।
কপি করুন, ডাউনলোড করুন এবং আপনার কাজ সংরক্ষণ করুন
সাধারণ কোড যা আপনি সরাসরি ব্যবহার করতে পারেন
একটি স্বতন্ত্র ক্লাস নেম বেছে নিন, এর ট্যাব থেকে CSS কপি করুন, তারপর HTML থেকে বোতামটি কপি করুন। ডাউনলোড করলে ক্লাসের নামে একটি .css ফাইল সেভ হয়; এটি সম্পূর্ণ ওয়েবপেজ ডাউনলোড করে না।
প্রিভিউ এবং কোড জেনারেশন আপনার ব্রাউজারে চলে। স্টুডিও এই ব্রাউজারের লোকাল স্টোরেজে একটি ড্রাফট মনে রাখার চেষ্টা করে; আপনি যা রাখতে চান তা এক্সপোর্ট করুন। রিসেট করলে স্টুডিও তার শুরুর স্টাইলে ফিরে যায়।
টেক্সট এবং স্টাইল ইন। HTML এবং CSS আউট।
কোনো আপলোডের প্রয়োজন নেই। JavaScript আপনার ব্রাউজারে লাইভ এডিটরকে শক্তি দেয়। HTML এবং CSS আলাদাভাবে কপি করুন, অথবা CSS স্টাইলশিট ডাউনলোড করুন। জেনারেট করা ফন্ট স্ট্যাক ভিউয়ারের ডিভাইসে উপলব্ধ ফন্ট ব্যবহার করে।
