CSS এবং UI, CSS এবং UI, CSS এবং UI
শক্তিশালী এবং আকর্ষক ইউজার ইন্টারফেস তৈরি করতে সর্বশেষ ব্রাউজার API, টুলস এবং কৌশলগুলি আবিষ্কার করুন৷
CSS এবং UI এ সর্বশেষ
নতুন ডকুমেন্টেশন
অ্যাঙ্কর পজিশনিং
অ্যাঙ্কর পজিশনিং API ব্যবহার করে একে অপরের সাথে সম্পর্কিত অবস্থান উপাদান।
height: auto; (এবং অন্যান্য অন্তর্নিহিত সাইজিং কীওয়ার্ড) , height: auto; (এবং অন্যান্য অন্তর্নিহিত সাইজিং কীওয়ার্ড)
interpolate-size এবং calc-size() সহ অভ্যন্তরীণ সাইজিং কীওয়ার্ডগুলিতে এবং থেকে অ্যানিমেট করুন , interpolate-size এবং calc-size() সহ অন্তর্নিহিত সাইজিং কীওয়ার্ডগুলিতে এবং থেকে অ্যানিমেট করুন
স্ক্রলবার স্টাইলিং
স্ক্রলবার স্টাইল করতে
scrollbar-width এবং scrollbar-color বৈশিষ্ট্য ব্যবহার করুন।
CSS টেক্সট-র্যাপ ব্যালেন্স
ভারসাম্যপূর্ণ পাঠ্য ব্লকের জন্য হাতে-লেখক লাইন বিরতির একটি ক্লাসিক টাইপোগ্রাফি কৌশল, CSS এ আসে।
,ভারসাম্যপূর্ণ পাঠ্য ব্লকের জন্য হ্যান্ড-লেখনার লাইন বিরতির একটি ক্লাসিক টাইপোগ্রাফি কৌশল, CSS-এ আসে।
হাই-ডেফিনিশন CSS কালার গাইড, হাই-ডেফিনিশন CSS কালার গাইড
CSS কালার 4 ওয়েবে বিস্তৃত গামুট রঙের সরঞ্জাম এবং ক্ষমতা নিয়ে আসে: আরও রঙ, ম্যানিপুলেশন ফাংশন এবং আরও ভাল গ্রেডিয়েন্ট।
,CSS কালার 4 ওয়েবে বিস্তৃত স্বরগ্রাম রঙের সরঞ্জাম এবং ক্ষমতা নিয়ে আসে: আরও রঙ, ম্যানিপুলেশন ফাংশন এবং আরও ভাল গ্রেডিয়েন্ট।
CSS টাইপ করা অবজেক্ট মডেল
CSS টাইপড অবজেক্ট মডেল (টাইপড OM) CSS মানগুলির সাথে কাজ করার জন্য ধরন, পদ্ধতি এবং একটি নমনীয় অবজেক্ট মডেল নিয়ে আসে।
,CSS টাইপড অবজেক্ট মডেল (টাইপড OM) CSS মানগুলির সাথে কাজ করার জন্য ধরন, পদ্ধতি এবং একটি নমনীয় অবজেক্ট মডেল নিয়ে আসে।
স্টাইল কোয়েরি দিয়ে শুরু করুন
@container নিয়ম ব্যবহার করে একটি অভিভাবক উপাদানের শৈলী মান জিজ্ঞাসা করুন।
,@container নিয়ম ব্যবহার করে একটি অভিভাবক উপাদানের শৈলী মান জিজ্ঞাসা করুন।
CSS নেস্টিং
আমাদের প্রিয় CSS প্রিপ্রসেসর বৈশিষ্ট্যগুলির মধ্যে একটি এখন ভাষাতে তৈরি করা হয়েছে: নেস্টিং শৈলীর নিয়ম।
,আমাদের প্রিয় CSS প্রিপ্রসেসর বৈশিষ্ট্যগুলির মধ্যে একটি এখন ভাষাতে তৈরি করা হয়েছে: নেস্টিং শৈলীর নিয়ম।
CSS @scope, CSS @scope
কীভাবে স্কোপড শৈলী তৈরি করতে হয় তা শিখুন যা শুধুমাত্র আপনার DOM-এর একটি সাবট্রির মধ্যে উপাদান নির্বাচন করে।
,কীভাবে স্কোপড শৈলী তৈরি করতে হয় তা শিখুন যা শুধুমাত্র আপনার DOM-এর একটি সাবট্রির মধ্যে উপাদান নির্বাচন করে।
CSS কালার-মিক্স()
সরাসরি আপনার CSS থেকে যেকোনও সমর্থিত রঙের জায়গায় রং মিশ্রিত করুন।
,কোনও সমর্থিত কালার স্পেসে রং মিশ্রিত করুন, সরাসরি আপনার CSS থেকে।
nth-child() নির্বাচনের উপর আরো নিয়ন্ত্রণ
An+B যুক্তি প্রয়োগ করার আগে চাইল্ড উপাদানগুলির একটি সেট প্রি-ফিল্টার করুন।
,এতে An+B যুক্তি প্রয়োগ করার আগে চাইল্ড উপাদানগুলির একটি সেট প্রি-ফিল্টার করুন।
এক্সক্লুসিভ অ্যাকর্ডিয়ন
একই
name একাধিক <details> উপাদান সহ একটি এক্সক্লুসিভ অ্যাকর্ডিয়ন তৈরি করুন।
জড় পরিচয়
জড় সম্পত্তি হল একটি বিশ্বব্যাপী HTML বৈশিষ্ট্য যা সাহায্যকারী প্রযুক্তি থেকে ফোকাস ইভেন্ট এবং ইভেন্টগুলি সহ একটি উপাদানের জন্য ব্যবহারকারীর ইনপুট ইভেন্টগুলিকে কীভাবে সরানো এবং পুনরুদ্ধার করা যায় তা সহজ করে।
,জড় সম্পত্তি হল একটি গ্লোবাল HTML অ্যাট্রিবিউট যা সাহায্যকারী প্রযুক্তি থেকে ফোকাস ইভেন্ট এবং ইভেন্টগুলি সহ কোনও উপাদানের জন্য ব্যবহারকারীর ইনপুট ইভেন্টগুলিকে কীভাবে সরানো এবং পুনরুদ্ধার করা যায় তা সহজ করে।
সিএসএস টেক্সট মোড়ানো সুন্দর
অপ্ট-ইন অপ্টিমাইজ করা টেক্সট মোড়ানো, গতির উপর সৌন্দর্যের জন্য।
DevTools-এ CSS গ্রিড
আমরা কীভাবে DevTools-এ CSS গ্রিড টুলিং সমর্থন ডিজাইন ও প্রয়োগ করেছি।
,আমরা কিভাবে DevTools-এ CSS গ্রিড টুলিং সমর্থন ডিজাইন ও প্রয়োগ করেছি।
DevTools-এ CSS-in-JS সমর্থন
আমরা কীভাবে DevTools-এ CSS-in-JS সমর্থন করি এবং কীভাবে এটি নিয়মিত CSS থেকে আলাদা।
,আমরা কীভাবে DevTools-এ CSS-in-JS সমর্থন করি এবং এটি নিয়মিত CSS থেকে কীভাবে আলাদা।
আধুনিক উপাদান নির্মাণের সরঞ্জাম
অ্যাঙ্কর পজিশন টুল
অ্যাঙ্কর পজিশনিং API ব্যবহার করে একে অপরের সাথে সম্পর্কিত উপাদানগুলিকে অবস্থান করতে এই টুলটি ব্যবহার করুন।
ক্যারোজেল কনফিগারার
শুধুমাত্র একটি CSS ক্যারোজেলের ক্ষমতাগুলি কল্পনা করতে সাহায্য করার জন্য একটি নির্মাতার মতো অভিজ্ঞতা: বোতাম, মার্কার, পেজিং এবং জড়তা।
CSS এবং UI কেস স্টাডি
কেন ওয়েব UI ক্ষমতা আপনার ওয়েবসাইটের জন্য গুরুত্বপূর্ণ?
ওয়েব UI ক্ষমতাগুলি ঠিক কী এবং কীভাবে তারা আপনার রূপান্তর ফানেলকে উন্নত করতে পারে? এই বৈশিষ্ট্যগুলি গ্রহণের সুবিধা কী।
স্ক্রোল-চালিত অ্যানিমেশন কেস স্টাডি
Policybazaar, redBus, এবং Tokopedia-এর সাথে স্ক্রোল-চালিত অ্যানিমেশনের সুবিধাগুলি আবিষ্কার করুন।
ট্রানজিশন কেস স্টাডি দেখুন
redBus, Policybazaar, এবং Tokopedia সবাই ভিউ ট্রানজিশন API ব্যবহার করে এবং আরও ভালো পারফরম্যান্স এবং একটি মসৃণ UI থেকে উপকৃত হয়।
Popover API কেস স্টাডি
Tokopedia তাদের অ্যাপ্লিকেশনে কোডের পরিমাণ কমাতে Popover API ব্যবহার করে।
ওয়েবে অ্যানিমেশন
ওয়েব অ্যানিমেশন API
ওয়েব অ্যানিমেশন API জাভাস্ক্রিপ্ট থেকে অপরিহার্য অ্যানিমেশন বর্ণনা করার জন্য শক্তিশালী আদিম প্রদান করে।
,ওয়েব অ্যানিমেশন API জাভাস্ক্রিপ্ট থেকে অপরিহার্য অ্যানিমেশন বর্ণনা করার জন্য শক্তিশালী আদিম প্রদান করে।
একাধিক অ্যানিমেশন প্রভাব, একাধিক অ্যানিমেশন প্রভাব
অ্যানিমেশন-কম্পোজিশন প্রপার্টি একাধিক অ্যানিমেশন একই সাথে একই সম্পত্তিকে প্রভাবিত করলে কী ঘটবে তা নিয়ন্ত্রণ করতে দেয়।
,অ্যানিমেশন-কম্পোজিশন প্রপার্টি একাধিক অ্যানিমেশন একই সাথে একই সম্পত্তিকে প্রভাবিত করলে কী ঘটবে তা নিয়ন্ত্রণ করতে দেয়।
রৈখিক() সহ জটিল অ্যানিমেশন বক্ররেখা
linear() হল একটি CSS ইজিং ফাংশন যা এর পয়েন্টগুলির মধ্যে রৈখিকভাবে ইন্টারপোলেট করে, আপনাকে বাউন্স এবং স্প্রিং ইফেক্ট পুনরায় তৈরি করতে দেয়।
,লিনিয়ার() হল একটি CSS ইজিং ফাংশন যা এর পয়েন্টগুলির মধ্যে রৈখিকভাবে ইন্টারপোলেট করে, আপনাকে বাউন্স এবং স্প্রিং প্রভাবগুলি পুনরায় তৈরি করতে দেয়।
স্ক্রোল-চালিত অ্যানিমেশন
একটি ঘোষণামূলক উপায়ে স্ক্রোল-চালিত অ্যানিমেশন তৈরি করতে স্ক্রোল টাইমলাইন এবং দেখুন টাইমলাইনগুলির সাথে কাজ করুন৷
,স্ক্রোল টাইমলাইনগুলির সাথে কাজ করুন এবং একটি ঘোষণামূলক উপায়ে স্ক্রোল-চালিত অ্যানিমেশন তৈরি করতে টাইমলাইন দেখুন৷
কোর্স
রেসপন্সিভ ডিজাইন শিখুন
প্রতিক্রিয়াশীল ডিজাইনের ইতিহাস পড়ুন এবং প্রতিক্রিয়াশীল লেআউটের মৌলিক বিষয়গুলি দেখুন। আপনি প্রতিক্রিয়াশীল ছবি, টাইপোগ্রাফি, অ্যাক্সেসযোগ্যতা এবং আরও অনেক কিছু সম্পর্কে শিখবেন।
কোর্স
সিএসএস শিখুন
আপনি বক্স মডেল, ক্যাসকেড এবং নির্দিষ্টতা, ফ্লেক্সবক্স, গ্রিড এবং জেড-ইনডেক্সের মতো CSS মৌলিক বিষয়গুলি শিখবেন। এবং, আপনি আপনার ফ্রন্ট-এন্ড বিকাশকারী দক্ষতাগুলিকে রাউন্ড আউট করার জন্য ফাংশন, যৌক্তিক বৈশিষ্ট্য এবং আরও অনেক কিছু সম্পর্কে শিখবেন।