আমি যে CSS এর উপর আলোকপাত করতে পেরে আনন্দিত grid-template-rows
এবং grid-template-columns
বৈশিষ্ট্য হয় এখন সমস্ত প্রধান ওয়েব ব্রাউজারে অ্যানিমেটেবল! ঠিক আছে, সিএসএস গ্রিড দীর্ঘকাল ধরে টেকনিক্যালি অ্যানিমেশন সমর্থন করেছে, যেমনটি সিএসএস গ্রিড লেআউট মডিউল লেভেল 1 স্পেকের মধ্যে বেক করা হয়েছে.
কিন্তু এই গ্রিড বৈশিষ্ট্যগুলিকে অ্যানিমেটিং করা শুধুমাত্র তিনটি প্রধান ব্রাউজার দ্বারা সমর্থিত হয়েছে। সৃজনশীল রস প্রবাহিত পেতে আমরা কি কয়েকটি উদাহরণের দিকে নজর দেব?
সুচিপত্র
উদাহরণ 1: সাইডবার প্রসারিত করা
প্রথমত, আমরা যা বলছি তা হল:
একটি সাধারণ দুই-কলাম গ্রিড। এখন, আগে, আপনি হতে পারে না CSS গ্রিড ব্যবহার করে এটি তৈরি করেছেন কারণ অ্যানিমেশন এবং ট্রানজিশন সমর্থিত ছিল না, কিন্তু আপনি যদি বাম কলাম চান - সম্ভবত একটি সাইডবার নেভিগেশন - হোভারে প্রসারিত করতে চান? আচ্ছা, এখন এটা সম্ভব।
আমি জানি আপনি কি ভাবছেন: একটি CSS সম্পত্তি অ্যানিমেটিং? সহজ পিসি, আমি বছরের পর বছর ধরে এটি করছি!" আমিও. যাইহোক, একটি নির্দিষ্ট ব্যবহারের ক্ষেত্রে পরীক্ষা করার সময় আমি একটি আকর্ষণীয় সমস্যায় পড়েছিলাম।
সুতরাং, আমরা গ্রিড নিজেই স্থানান্তর করতে চাই (বিশেষ করে grid-template-columns
, যা সেট করা হয় .grid
উদাহরণে ক্লাস)। কিন্তু বাম কলাম (.left
) হল নির্বাচক যার প্রয়োজন :hover
ছদ্ম-শ্রেণী যদিও জাভাস্ক্রিপ্ট এই সমস্যাটি সহজে সমাধান করতে পারে — ধন্যবাদ, কিন্তু ধন্যবাদ না — আমরা একা সিএসএস দিয়ে এটি সম্পন্ন করতে পারি।
এইচটিএমএল দিয়ে শুরু করে পুরো ব্যাপারটা জেনে নেওয়া যাক। সত্যিই সুন্দর মানক জিনিস... দুটি কলাম সহ একটি গ্রিড।
<div class="grid"> <div class="left"></div> <div class="right"></div>
</div>
কসমেটিক সিএসএস একপাশে রেখে, আপনাকে প্রথমে সেট করতে হবে display: grid
মূল পাত্রে (.grid
).
.grid { display: grid;
}
এর পরে, আমরা ব্যবহার করে দুটি কলামকে সংজ্ঞায়িত এবং আকার দিতে পারি grid-template-columns
সম্পত্তি আমরা বাম কলামটিকে অতি সরু করে দেব এবং পরে হোভারে এর প্রস্থ বাড়াব। ডান কলাম বাকি অবশিষ্ট স্থান নেয়, ধন্যবাদ auto
শব্দ।
.grid { display: grid; grid-template-columns: 48px auto;
}
আমরা জানি আমরা এই জিনিসটি অ্যানিমেট করতে যাচ্ছি, তাই এর এগিয়ে যান এবং একটি নিক্ষেপ করা যাক transition
সেখানে যখন আমরা সেখানে থাকি তাই রাজ্যগুলির মধ্যে পরিবর্তনটি মসৃণ এবং লক্ষণীয়।
.grid { display: grid; grid-template-columns: 48px auto; transition: 300ms; /* Change as needed */
}
যে জন্য এটা .grid
! যা বাকি আছে তা হল হোভার স্টেট প্রয়োগ করা। বিশেষ করে, আমরা ওভাররাইড করতে যাচ্ছি grid-template-columns
সম্পত্তি যাতে বাম কলাম হোভারে একটি বৃহত্তর পরিমাণ স্থান নেয়।
এটি একাই আকর্ষণীয় নয়, যদিও এটি দুর্দান্ত যে অ্যানিমেশন এবং রূপান্তরগুলি এখন CSS গ্রিডে সমর্থিত। আরও মজার বিষয় হল আমরা তুলনামূলকভাবে নতুন ব্যবহার করতে পারি :has()
ছদ্ম শ্রেণী মূল পাত্রে স্টাইল করতে (.grid
) যখন শিশুটি (.left
) হোভার করা হয়।
.grid:has(.left:hover) { /* Hover styles */
}
সরল ইংরেজিতে বলা হচ্ছে, “কিছু করো .grid
কন্টেইনার যদি এটি নামের একটি উপাদান থাকে .left
এর ভিতরে এটি একটি হোভার অবস্থায় রয়েছে।" এই জন্য :has()
প্রায়ই একটি "পিতামাতা" নির্বাচক হিসাবে উল্লেখ করা হয়. আমরা অবশেষে এটিতে থাকা শিশুদের উপর ভিত্তি করে একজন অভিভাবক নির্বাচন করতে পারি — কোন জাভাস্ক্রিপ্টের প্রয়োজন নেই!
সুতরাং, এর প্রস্থ বৃদ্ধি করা যাক .left
কলাম থেকে 30%
যখন এটা hover করা হয়. দ্য .right
কলাম সমস্ত অবশিষ্ট স্থান গ্রহণ করতে থাকবে:
.grid { display: grid; transition: 300ms; grid-template-columns: 48px auto;
} .grid:has(.left:hover) { grid-template-columns: 30% auto;
}
আমরা সিএসএস ভেরিয়েবলগুলিও ব্যবহার করতে পারি, যা আপনার ব্যক্তিগত পছন্দগুলির উপর নির্ভর করে পরিষ্কার দেখাতে পারে বা নাও হতে পারে (অথবা আপনি যেভাবেই হোক আপনার প্রকল্পে সিএসএস ভেরিয়েবল ব্যবহার করছেন):
.grid { display: grid; transition: 300ms; grid-template-columns: var(--left, 48px) auto;
} .grid:has(.left:hover) { --left: 30%;
}
I ভালবাসা যে সিএসএস গ্রিডগুলি এখন অ্যানিমেটেড করা যেতে পারে, তবে আমরা এই বিশেষ উদাহরণটি সিএসএসের মাত্র নয়টি লাইন দিয়ে তৈরি করতে পারি তা আরও বিস্ময়কর।
এখানে দ্বারা আরেকটি উদাহরণ অলিভিয়া এনজি — অনুরূপ ধারণা, কিন্তু বিষয়বস্তু সহ (নেভি আইকনে ক্লিক করুন):
উদাহরণ 2: প্যানেল প্রসারিত করা
এই উদাহরণটি গ্রিড ধারক (কলামের প্রস্থ) কিন্তু পৃথক কলামগুলি (তাদের পটভূমির রঙ) পরিবর্তন করে। হোভারে আরও কন্টেন্ট প্রদানের জন্য এটি আদর্শ।
এটা মনে রাখা মূল্যবান যে repeat()
ফাংশন কখনও কখনও বগি ট্রানজিশন তৈরি করে, তাই আমি প্রতিটি কলামের প্রস্থ পৃথকভাবে সেট করি (যেমন grid-template-columns: 1fr 1fr 1fr
).
উদাহরণ 3: সারি এবং কলাম যোগ করা
এই উদাহরণটি অ্যানিমেটেডভাবে গ্রিডে একটি কলাম "যোগ" করে। যাইহোক - আপনি এটি অনুমান করেছেন - এই দৃশ্যেরও একটি ক্ষতি আছে। প্রয়োজনীয়তা হল "নতুন" কলামটি লুকানো উচিত নয় (অর্থাৎ সেট করা display: none
), এবং CSS গ্রিডকে এর প্রস্থ সেট করার সময় তার অস্তিত্ব স্বীকার করতে হবে 0fr
.
সুতরাং, একটি তিন-কলাম গ্রিডের জন্য - grid-template-columns: 1fr 1fr 0fr
(হ্যাঁ, মান হলেও ইউনিট ঘোষণা করতে হবে 0
!) মধ্যে রূপান্তর grid-template-columns: 1fr 1fr 1fr
সঠিকভাবে, কিন্তু grid-template-columns: 1fr 1fr
না পশ্চাদপটে, আমরা যা জানি তা বিবেচনা করে এটি আসলে নিখুঁত বোধগম্য করে তোলে কিভাবে রূপান্তর কাজ করে.
এখানে দ্বারা আরেকটি উদাহরণ মিশেল বার্কার — একই ধারণা, কিন্তু একটি অতিরিক্ত কলাম সহ এবং অনেক আরো pizzazz. এটিকে পূর্ণ-স্ক্রীন মোডে চালানোর বিষয়ে নিশ্চিত করুন কারণ এটি আসলে প্রতিক্রিয়াশীল (কোনও কৌশল নয়, শুধু ভালো ডিজাইন!)
আরও কয়েকটি উদাহরণ
কেন না কেন?
এই "অ্যানিমেটেড মন্ড্রিয়ান" হল অ্যানিমেটেড CSS গ্রিডের ধারণার মূল প্রমাণ ক্রোম ডেভরেল. দ্য grid-row
এর এবং grid-column
ব্যবহার করে span
লেআউট তৈরি করার জন্য কীওয়ার্ড আপনি আগে দেখেন এবং তারপরে grid-template-row
এবং এর grid-template-column
এর একটি CSS অ্যানিমেশন ব্যবহার করে অ্যানিমেটেড করা হয়। এটি দেখতে যতটা জটিল মনে হয় ততটা কাছাকাছি কোথাও নেই!
একই ধারণা, কিন্তু সেই মিশেল বার্কার পিজাজ আরও সহ। একটি সুন্দর লোডিং স্পিনার করতে পারে?
কিছুটা নস্টালজিয়া (এখানে আমার বয়স দেখানো হচ্ছে) নিয়ে মোড়ানো, খুব বেশি না-জানানো অ্যানিমেটেড CSS গ্রিড অ্যান্ড্রু হার্ভার্ড. আবার — একই ধারণা — এটা ঠিক যে আপনি অন্যান্য গ্রিড আইটেম দেখতে পারবেন না। কিন্তু চিন্তা করবেন না, তারা সেখানে আছে।
- এসইও চালিত বিষয়বস্তু এবং পিআর বিতরণ। আজই পরিবর্ধিত পান।
- প্লেটোব্লকচেন। Web3 মেটাভার্স ইন্টেলিজেন্স। জ্ঞান প্রসারিত. এখানে প্রবেশ করুন.
- উত্স: https://css-tricks.com/animating-css-grid-how-to-examples/
- 1
- 11
- 7
- 9
- 98
- a
- সম্পর্কে
- স্বীকার করা
- প্রকৃতপক্ষে
- এগিয়ে
- সব
- একা
- যদিও
- পরিমাণ
- এবং
- অ্যানিমেশন
- অ্যানিমেশন
- অন্য
- প্রয়োগ করা
- গাড়ী
- পটভূমি
- ভিত্তি
- কারণ
- আগে
- মধ্যে
- বিট
- ব্রাউজার
- নির্মাণ করা
- নির্মিত
- কেস
- পরিবর্তন
- শিশু
- শিশু
- শ্রেণী
- স্তম্ভ
- কলাম
- জটিল
- ধারণা
- বিবেচনা করা
- আধার
- ধারণ
- বিষয়বস্তু
- অবিরত
- পারা
- সৃষ্টি
- সৃজনী
- সিএসএস
- সিএসএস অ্যানিমেশন
- নির্ভর করে
- প্রদর্শন
- না
- করছেন
- Dont
- প্রতি
- সহজে
- ইংরেজি
- এমন কি
- উদাহরণ
- উদাহরণ
- বিস্তৃত করা
- বিস্তৃত
- অতিরিক্ত
- কয়েক
- পরিশেষে
- প্রথম
- প্রবাহিত
- ক্রিয়া
- পাওয়া
- Go
- চালু
- ভাল
- বৃহত্তর
- গ্রিড
- গ্রিড-টেমপ্লেট-কলাম
- অনুমান করা
- এখানে
- গোপন
- বাতাসে ভাসিতে থাকা
- কিভাবে
- কিভাবে
- যাহোক
- এইচটিএমএল
- HTTPS দ্বারা
- আইকন
- আদর্শ
- in
- বৃদ্ধি
- স্বতন্ত্র
- স্বতন্ত্রভাবে
- মজাদার
- IT
- আইটেম
- নিজেই
- জাভাস্ক্রিপ্ট
- জানা
- বিন্যাস
- বাকী
- উচ্চতা
- আলো
- লাইন
- বোঝাই
- দীর্ঘ
- অনেকক্ষণ
- দেখুন
- মুখ্য
- করা
- তৈরি করে
- হতে পারে
- মোড
- মডিউল
- অধিক
- মোজিলা
- নামে
- এনএভি
- ন্যাভিগেশন
- কাছাকাছি
- প্রয়োজন
- নতুন
- ONE
- মূল
- অন্যান্য
- বিশেষ
- নির্ভুল
- সম্ভবত
- ব্যক্তিগত
- সমভূমি
- Plato
- প্লেটো ডেটা ইন্টেলিজেন্স
- প্লেটোডাটা
- খুশি
- সম্ভব
- পছন্দগুলি
- চমত্কার
- প্রকল্প
- প্রমাণ
- ধারণা প্রমাণ
- বৈশিষ্ট্য
- সম্পত্তি
- প্রদানের
- সম্প্রতি
- উল্লেখ করা
- অপেক্ষাকৃতভাবে
- অবশিষ্ট
- স্মরন
- প্রয়োজন
- প্রয়োজন
- প্রতিক্রিয়াশীল
- বিশ্রাম
- চালান
- একই
- অনুভূতি
- সেট
- বিন্যাস
- চকমক
- অনুরূপ
- সহজ
- আয়তন
- So
- সমাধান
- কিছু
- স্থান
- বিশেষভাবে
- মান
- শুরু হচ্ছে
- রাষ্ট্র
- যুক্তরাষ্ট্র
- শৈলী
- সুপার
- সমর্থিত
- গ্রহণ করা
- লাগে
- কথা বলা
- সার্জারির
- তাদের
- জিনিস
- চিন্তা
- তিন
- দ্বারা
- সময়
- থেকে
- অত্যধিক
- রূপান্তর
- ট্রানজিশন
- সত্য
- একক
- ব্যবহার
- ব্যবহার ক্ষেত্রে
- সদ্ব্যবহার করা
- মূল্য
- W3
- চেয়েছিলেন
- ওয়েব
- কি
- যে
- যখন
- ইচ্ছা
- মূল্য
- আপনি
- আপনার
- zephyrnet