Module ৭ এ আমরা যাকিছু শিখেছি
More CSS, Icon.CSS3 animation
visibility: visible; visibility: hidden; এর কাজ কি ? ( visible করলে সেটা দেখা যাবে আর visibility: hidden করলে সেটা দেখা যাবে না )
এই কাজ গুলো আমরা display property এর মাধ্যমেও করতে পারি । কিন্তু display:none করে দিলে সে তার যায়গা সহ হাইড হয়ে যাবে কিন্তু visibility: hidden করে দিলে তার যায়গা থাকবে কিন্তু এলিমেন্টটির যায়গা থেকে যাবে । সেখানেশুধু এলেমেন্টটি দেখা যাবে না
Overflow:hidden, scroll এর কাজ কি ?
Overflow-y:scroll এর কাজ কি ? (এটা y অক্ষ বরাবর একটা scroll বার দিবে) তেমনি x অক্ষ বরাবর দিতে পারি
white-space: nowrap এবং wrap এর কাজ কি ? (wrap করলে সেটা আবদ্ধ হয়ে যাবে parent এর width এর সাথে আর no-wrap করলে সেটা আর আবদ্ধ হবে না । আমরা vs code এর word-wrap এর সাথে পরিচিত ঠিক এমন কাজ এই CSS3 প্রপার্টিগুলো করে)
text-overflow: ; এর কাজ কি ? (এটার মাধ্যমে … ৩টা ডট দেখাবে )
উদাহরণ
.modal {width: 50px;border: 1px solid #aaa;} .modal p {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} <div class="modal"> <p title=”Lorem ipsum dolor sit amet consectetur ”> Lorem ipsum dolor sit amet consectetur </p> </div> |
Image এর সাইজগুলো কমিয়ে নিব তাহলে ওয়েবসাইট লোড টাইম কমে যাবে . SVG ব্যাবহার করা better কেননা অনেক কম এমবি খরচ হয় ।
font awesome এর icon গুলো কিভাবে ব্যাবহার করতে হয় ?
Transform :skew(), skewx(), skewy(), rotate(),scale,scaleX(), scaly(),translate(), translatex(), translatey(), translate(z) এর কাজ কি ? (translate এর কাজ হল ডান থেকে কিছু margin তৈরি করবে আর translatex(), translatey() এর মানে হল x অক্ষ বরাবর margin তৈরি করবে, আর translate(10px 20px) এভাবে দিলে x,y এর কাজ একবারে হয়ে যাবে )
Transition এর কাজ কি ? (স্মুতভাবে animation আকারে প্রদর্শন করা )
.box {height: 200px;width: 200px;background-color: tomato;color: white;border-radius: 20px;transition: width 1s, height 1s, transform 1s;} .box:hover {width: 500px;height: 500px;transform: rotate(360deg);} .main {background-color: lightsalmon;} আমরা transition এক লাইনে ব্যাবহার করার চেষ্টা করব । কেননা এটা standard এবং html5 এ এই সুবিধা আছে । |
@keyframe এর মাধ্যমে animation তৈরি কিভাবে ,করে ? (from, to দিয়ে অথবা ০% -১০০% হিসেবে করতে পারব যেটা ইচ্ছা)
Float:left, right এর কাজ কি ? (তবে আমরা display:flex ব্যাবহার করব । float করতে clear এর কিছু ঝামেলা থেকে যায় )
Div এ কিভাবে min-width, max-width সেট করতে হয় ?
.box{max-width:120px; min-width:250px} |
কিভাবে cursor চেঞ্জ করে ?
তবে চেষ্টা করবে কিভাবে transform অ্যান্ড transition এর সমন্বয়ে cricket খেলা যায় । এই টপিকটা আবার দেখতে চাইলে module 7 এর ৭-৭ ভিডিওটি দেখতে পারেন ।
আর আমার github এ যাইতে চাইলে এই লিঙ্কে ক্লিক করুন
About
Md: Rashedul Islam Shihab Writer of this note Batch4 Social accounts
|
Post a Comment