কুল CSS হোভার ইফেক্ট যা ব্যাকগ্রাউন্ড ক্লিপিং, মাস্ক এবং 3D ব্যবহার করে

আমরা এখন CSS হোভার ইফেক্টের আকর্ষণীয় পন্থা সম্পর্কে পোস্টের একটি সিরিজের মধ্য দিয়ে হেঁটেছি। আমরা একটি দিয়ে শুরু করেছি CSS ব্যবহার করে এমন একগুচ্ছ উদাহরণ background বৈশিষ্ট্য, তারপর সরানো হয়েছে text-shadow সম্পত্তি যেখানে আমরা প্রযুক্তিগতভাবে কোনো ছায়া ব্যবহার করিনি. আমরা সেগুলিকে CSS ভেরিয়েবলের সাথে একত্রিত করেছি এবং calc() কোড অপ্টিমাইজ করতে এবং এটি পরিচালনা করা সহজ করতে।

এই নিবন্ধে, আমরা আরও জটিল CSS হোভার অ্যানিমেশন তৈরি করতে সেই দুটি নিবন্ধ তৈরি করব। আমরা ব্যাকগ্রাউন্ড ক্লিপিং, CSS মাস্ক এবং এমনকি 3D দৃষ্টিকোণ দিয়ে আমাদের পা ভিজা করার বিষয়ে কথা বলছি। অন্য কথায়, আমরা এই সময়ে উন্নত কৌশলগুলি অন্বেষণ করতে যাচ্ছি এবং হোভার প্রভাবগুলির সাথে CSS যা করতে পারে তার সীমাবদ্ধতা ঠেলে দিতে যাচ্ছি!

---

আমরা যা তৈরি করছি তার একটি স্বাদ এখানে:

হভার প্রভাব ব্যবহার করে background-clip

এর সম্পর্কে কথা বলা যাক background-clip. এই CSS সম্পত্তি একটি গ্রহণ করে text কীওয়ার্ড মান যা আমাদেরকে গ্রেডিয়েন্ট প্রয়োগ করতে দেয় পাঠ বাস্তবের পরিবর্তে একটি উপাদানের পটভূমি.

সুতরাং, উদাহরণস্বরূপ, আমরা হোভারে পাঠ্যের রঙ পরিবর্তন করতে পারি যেভাবে আমরা ব্যবহার করব color সম্পত্তি, কিন্তু এইভাবে আমরা রঙ পরিবর্তন অ্যানিমেট করি:

আমি সব যোগ ছিল background-clip: text উপাদান এবং transition দ্য background-position. এর চেয়ে বেশি জটিল হতে হবে না!

কিন্তু আমরা আরও ভাল করতে পারি যদি আমরা বিভিন্ন পটভূমি ক্লিপিং মানগুলির সাথে একাধিক গ্রেডিয়েন্ট একত্রিত করি।

সেই উদাহরণে, আমি দুটি ভিন্ন গ্রেডিয়েন্ট এবং দুটি মান ব্যবহার করি background-clip. প্রথম ব্যাকগ্রাউন্ড গ্রেডিয়েন্টটি টেক্সটে ক্লিপ করা হয়েছে (ধন্যবাদ text মান) হোভারে রঙ সেট করতে, যখন দ্বিতীয় পটভূমি গ্রেডিয়েন্ট নীচের আন্ডারলাইন তৈরি করে padding-box মান)। অন্য সবকিছু সরাসরি থেকে কপি করা হয় আমরা প্রথম নিবন্ধে কাজ করেছি এই সিরিজের।

একটি হোভার ইফেক্ট সম্পর্কে কেমন হয় যেখানে বারটি উপরে থেকে নীচে এমনভাবে স্লাইড করে যাতে মনে হয় পাঠ্যটি স্ক্যান করা হয়েছে, তারপরে রঙ করা হয়েছে:

এইবার আমি লাইন তৈরি করতে প্রথম গ্রেডিয়েন্টের আকার পরিবর্তন করেছি। তারপরে আমি এটিকে অন্য গ্রেডিয়েন্ট দিয়ে স্লাইড করি যা বিভ্রম তৈরি করতে পাঠ্যের রঙ আপডেট করে! আপনি এই কলমে কি ঘটছে তা কল্পনা করতে পারেন:

আমরা আমাদের সাথে কী করতে পারি তার পৃষ্ঠটি আমরা কেবল আঁচড় দিয়েছি background-clipপিং ক্ষমতা! যাইহোক, এই কৌশলটি সম্ভবত এমন কিছু যা আপনি উৎপাদনে ব্যবহার এড়াতে চান, কারণ ফায়ারফক্সের কাছে একটি আছে বলে পরিচিত রিপোর্ট করা বাগ অনেক সম্পর্কিত background-clip. Safari পাশাপাশি সমর্থন সমস্যা আছে. এটি শুধুমাত্র এই জিনিসের জন্য দৃঢ় সমর্থন সহ Chrome ছেড়ে দেয়, তাই আমরা চালিয়ে যাওয়ার সাথে সাথে এটি খোলা থাকতে পারে।

চলুন অন্য একটি হোভার ইফেক্ট ব্যবহার করে এগিয়ে যাই background-clip:

আপনি সম্ভবত ভাবছেন যে আমরা এইমাত্র যা কভার করেছি তার তুলনায় এটি খুব সহজ দেখাচ্ছে — এবং আপনি ঠিক বলেছেন, এখানে অভিনব কিছু নেই। আমি যা করছি তা হল একটি গ্রেডিয়েন্ট স্লাইড করার সময় অন্যটির আকার বৃদ্ধি করা।

কিন্তু আমরা এখানে উন্নত হোভার প্রভাব দেখতে এসেছি, তাই না? আসুন এটিকে কিছুটা পরিবর্তন করি যাতে মাউস কার্সার উপাদানটি ছেড়ে গেলে অ্যানিমেশনটি আলাদা হয়। একই হোভার প্রভাব, কিন্তু অ্যানিমেশনের একটি ভিন্ন সমাপ্তি:

কুল ডান? কোড ব্যবচ্ছেদ করা যাক:

.hover { --c: #1095c1; /* the color */ color: #0000; background: linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat, var(--_c, #0000); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; transition: 0s, color .5s, background-color .5s;
}
.hover:hover { color: #fff; --_c: var(--c); --_p: 100%; transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

আমাদের তিনটি পটভূমি স্তর রয়েছে - দুটি গ্রেডিয়েন্ট এবং background-color ব্যবহার করে সংজ্ঞায়িত --_c পরিবর্তনশীল যা প্রাথমিকভাবে স্বচ্ছ সেট করা হয় (#0000) হোভারে, আমরা রঙ পরিবর্তন করি সাদা এবং --_c প্রধান রঙের পরিবর্তনশীল (--c).

এটিতে যা ঘটছে তা এখানে transition: প্রথমত, আমরা সবকিছুতে একটি রূপান্তর প্রয়োগ করি কিন্তু আমরা বিলম্ব করি color এবং background-color by 0.5s স্লাইডিং প্রভাব তৈরি করতে। ডান যে পরে, আমরা পরিবর্তন color এবং background-color. আপনি হয়তো কোন চাক্ষুষ পরিবর্তন লক্ষ্য করবেন না কারণ পাঠ্যটি ইতিমধ্যেই সাদা (প্রথম গ্রেডিয়েন্টকে ধন্যবাদ) এবং পটভূমিটি ইতিমধ্যেই প্রধান রঙে সেট করা আছে (দ্বিতীয় গ্রেডিয়েন্টকে ধন্যবাদ)।

তারপর, মাউস আউটে, আমরা সবকিছুতে একটি তাত্ক্ষণিক পরিবর্তন প্রয়োগ করি (লক্ষ্য করুন 0s বিলম্ব), ছাড়া color এবং background-color যে একটি রূপান্তর আছে. এর মানে হল যে আমরা সমস্ত গ্রেডিয়েন্টকে তাদের প্রাথমিক অবস্থায় ফিরিয়ে দিয়েছি। আবার, আপনি সম্ভবত কোন ভিজ্যুয়াল পরিবর্তন দেখতে পাবেন কারণ টেক্সট color এবং background-color ইতিমধ্যে হোভারে পরিবর্তিত হয়েছে।

সবশেষে, আমরা রঙে ফেইডিং প্রয়োগ করি এবং ক background-color অ্যানিমেশনের মাউস-আউট অংশ তৈরি করতে। আমি জানি, এটি উপলব্ধি করা কঠিন হতে পারে তবে আপনি বিভিন্ন রঙ ব্যবহার করে কৌশলটি আরও ভালভাবে কল্পনা করতে পারেন:

উপরেরটি অনেকবার হোভার করুন এবং আপনি দেখতে পাবেন যে বৈশিষ্ট্যগুলি হোভারে অ্যানিমেটিং করছে এবং যেগুলি মাউসের বাইরে অ্যানিমেটিং করছে। তারপরে আপনি বুঝতে পারবেন কিভাবে আমরা একই হোভার প্রভাবের জন্য দুটি ভিন্ন অ্যানিমেশনে পৌঁছেছি।

আসুন ভুলে যাবেন না আমরা যে DRY স্যুইচিং কৌশলটি ব্যবহার করেছি এই সিরিজের পূর্ববর্তী নিবন্ধগুলিতে সুইচের জন্য শুধুমাত্র একটি ভেরিয়েবল ব্যবহার করে কোডের পরিমাণ কমাতে সাহায্য করার জন্য:

.hover { --c: 16 149 193; /* the color using the RGB format */ color: rgb(255 255 255 / var(--_i, 0)); background: /* Gradient #1 */ linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%, /* Gradient #2 */ linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat, /* Background Color */ rgb(var(--c)/ var(--_i, 0)); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; --_t: calc(var(--_i,0)*.5s); transition: var(--_t), color calc(.5s - var(--_t)) var(--_t), background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover { --_i: 1;
}

আপনি যদি ভাবছেন কেন আমি মূল রঙের জন্য RGB সিনট্যাক্সে পৌঁছেছি, এর কারণ হল আমাকে আলফা স্বচ্ছতার সাথে খেলতে হবে। আমি পরিবর্তনশীল ব্যবহার করছি --_t ব্যবহৃত একটি অপ্রয়োজনীয় গণনা কমাতে transition সম্পত্তি।

আমরা পরবর্তী অংশে যাওয়ার আগে এখানে হোভার ইফেক্টের আরও উদাহরণ রয়েছে যা আমি কিছুক্ষণ আগে করেছি যা নির্ভর করে background-clip. প্রতিটির বিশদ বিবরণ দেওয়া খুব দীর্ঘ হবে কিন্তু আমরা এখন পর্যন্ত যা শিখেছি তা দিয়ে আপনি সহজেই কোডটি বুঝতে পারবেন। কোডটি না দেখে তাদের মধ্যে কয়েকটিকে একা চেষ্টা করা একটি ভাল অনুপ্রেরণা হতে পারে।

আমি জানি আমি জানি. এগুলি পাগল এবং অস্বাভাবিক হোভার প্রভাব এবং আমি বুঝতে পারি যে বেশিরভাগ পরিস্থিতিতে এগুলি খুব বেশি। কিন্তু এইভাবে অনুশীলন এবং সিএসএস শিখতে হয়। মনে রাখবেন, আমরা সিমানা আতিক্রম CSS হোভার প্রভাবের। হোভার প্রভাব একটি অভিনবত্ব হতে পারে, তবে আমরা সেই পথে নতুন কৌশল শিখছি যা অবশ্যই অন্যান্য জিনিসের জন্য ব্যবহার করা যেতে পারে।

CSS ব্যবহার করে হভার প্রভাব mask

অনুমান কি? সিএসএস mask সম্পত্তি একই ভাবে গ্রেডিয়েন্ট ব্যবহার করে background সম্পত্তি করে, তাই আপনি দেখতে পাবেন যে আমরা পরবর্তী যা করছি তা বেশ সোজা।

একটি অভিনব আন্ডারলাইন তৈরি করে শুরু করা যাক।

আমি ব্যাবহার করছি background সেই ডেমোতে একটি zig-zag নীচের সীমানা তৈরি করতে। যদি আমি সেই আন্ডারলাইনে একটি অ্যানিমেশন প্রয়োগ করতে চাই, তবে এটি একা ব্যাকগ্রাউন্ড বৈশিষ্ট্য ব্যবহার করে এটি করা ক্লান্তিকর হবে।

CSS লিখুন mask.

কোডটি অদ্ভুত লাগতে পারে তবে যুক্তিটি এখনও একই রকম যা আমরা পূর্ববর্তী সমস্ত ব্যাকগ্রাউন্ড অ্যানিমেশনগুলির সাথে করেছি। দ্য mask দুটি গ্রেডিয়েন্টের সমন্বয়ে গঠিত। প্রথম গ্রেডিয়েন্টটি একটি অস্বচ্ছ রঙ দিয়ে সংজ্ঞায়িত করা হয়েছে যা বিষয়বস্তু এলাকাকে কভার করে (ধন্যবাদ content-box মান)। সেই প্রথম গ্রেডিয়েন্টটি পাঠ্যটিকে দৃশ্যমান করে এবং নীচের জিগ-জ্যাগ সীমানা লুকিয়ে রাখে। content-box হয় mask-clip মান যা একই রকম আচরণ করে background-clip

linear-gradient(#000 0 0) content-box

দ্বিতীয় গ্রেডিয়েন্ট পুরো এলাকা কভার করবে (ধন্যবাদ padding-box) এটির একটি প্রস্থ রয়েছে যা ব্যবহার করে সংজ্ঞায়িত করা হয়েছে --_p পরিবর্তনশীল, এবং এটি উপাদানের বাম দিকে স্থাপন করা হবে।

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

এখন, আমাদের যা করতে হবে তা হল এর মান পরিবর্তন করা --_p দ্বিতীয় গ্রেডিয়েন্টের জন্য একটি স্লাইডিং প্রভাব তৈরি করতে এবং আন্ডারলাইনটি প্রকাশ করতে হোভারে।

.hover:hover { --_p: 100%; color: var(--c);
}

কৌশলটি ঘটছে তা আরও ভালভাবে দেখতে নিম্নলিখিত ডেমোটি ব্যাকগ্রাউন্ড হিসাবে মাস্ক স্তরগুলির সাথে ব্যবহার করে। কল্পনা করুন যে সবুজ এবং লাল অংশগুলি উপাদানটির দৃশ্যমান অংশ যেখানে অন্য সবকিছু স্বচ্ছ। আমরা যদি এর সাথে একই গ্রেডিয়েন্ট ব্যবহার করি তবে মুখোশটি এটিই করবে।

এই ধরনের একটি কৌশলের সাহায্যে, আমরা সহজেই একটি ভিন্ন গ্রেডিয়েন্ট কনফিগারেশন ব্যবহার করে অনেক বৈচিত্র তৈরি করতে পারি mask সম্পত্তি:

সেই ডেমোর প্রতিটি উদাহরণের জন্য একটি সামান্য ভিন্ন গ্রেডিয়েন্ট কনফিগারেশন ব্যবহার করে mask. পটভূমি কনফিগারেশন এবং মাস্ক কনফিগারেশনের মধ্যে কোডের বিচ্ছেদও লক্ষ্য করুন। এগুলি স্বাধীনভাবে পরিচালনা এবং রক্ষণাবেক্ষণ করা যেতে পারে।

এর পরিবর্তে একটি তরঙ্গায়িত আন্ডারলাইন দিয়ে জিগ-জ্যাগ আন্ডারলাইন প্রতিস্থাপন করে ব্যাকগ্রাউন্ড কনফিগারেশন পরিবর্তন করা যাক:

হোভার প্রভাব আরেকটি সংগ্রহ! আমি সমস্ত মাস্ক কনফিগারেশন রেখেছি এবং একটি ভিন্ন আকৃতি তৈরি করতে পটভূমি পরিবর্তন করেছি। এখন বুঝতেই পারছেন আমি কিভাবে পেরেছি 400 হোভার প্রভাব পৌঁছানোর জন্য ছদ্ম-উপাদান ছাড়া — এবং আমরা এখনও আরও থাকতে পারি!

লাইক, কেন এরকম কিছু নয়:

এখানে আপনার জন্য একটি চ্যালেঞ্জ: যে শেষ ডেমো সীমানা একটি গ্রেডিয়েন্ট ব্যবহার করে mask এটি প্রকাশ করার জন্য সম্পত্তি। আপনি অ্যানিমেশন পিছনে যুক্তি খুঁজে বের করতে পারেন? এটি প্রথম নজরে জটিল মনে হতে পারে, তবে গ্রেডিয়েন্টের উপর নির্ভর করে এমন অন্যান্য হোভার প্রভাবগুলির জন্য আমরা যে যুক্তির দিকে নজর দিয়েছি তার সাথে এটি অত্যন্ত অনুরূপ। মন্তব্যে আপনার ব্যাখ্যা পোস্ট করুন!

3D এ হোভার প্রভাব

আপনি ভাবতে পারেন যে একটি একক উপাদান (এবং ছদ্ম-উপাদানগুলি অবলম্বন না করে!) দিয়ে একটি 3D প্রভাব তৈরি করা অসম্ভব তবে এটি ঘটানোর জন্য CSS এর একটি উপায় রয়েছে।

আপনি সেখানে যা দেখছেন তা প্রকৃত 3D প্রভাব নয়, বরং 3D স্পেসে 2D-এর একটি নিখুঁত বিভ্রম যা CSS-কে একত্রিত করে background, clip-path, এবং transform বৈশিষ্ট্য।

আমরা যা করি তা হল আমাদের ভেরিয়েবলগুলিকে সংজ্ঞায়িত করা:

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

তারপরে আমরা প্রস্থের সাথে একটি স্বচ্ছ সীমানা তৈরি করি যা উপরের ভেরিয়েবলগুলি ব্যবহার করে:

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

উপাদানের উপরের এবং ডান দিক উভয়ই সমান করতে হবে --b মান যখন নীচে এবং বাম দিকের যোগফলের সমান হওয়া প্রয়োজন --b এবং --d (যা --_s পরিবর্তনশীল)।

কৌশলের দ্বিতীয় অংশের জন্য, আমাদের একটি গ্রেডিয়েন্টকে সংজ্ঞায়িত করতে হবে যা আমরা পূর্বে সংজ্ঞায়িত সমস্ত সীমান্ত এলাকা কভার করে। ক conic-gradient এর জন্য কাজ করবে:

background: conic-gradient( at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0 ) 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

আমরা কৌশলের তৃতীয় অংশের জন্য আরেকটি গ্রেডিয়েন্ট যোগ করি। এটি দুটি আধা-স্বচ্ছ সাদা রঙের মান ব্যবহার করবে যা মূল রঙের বিভিন্ন শেড তৈরি করতে প্রথম পূর্ববর্তী গ্রেডিয়েন্টকে ওভারল্যাপ করে, আমাদের ছায়া এবং গভীরতার বিভ্রম দেয়।

conic-gradient( at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 / 0.3) 0 225deg, rgb(255 255 255 / 0.6) 0
) border-box

শেষ ধাপে আবেদন করা হয় সিএসএস clip-path সেই দীর্ঘ ছায়া সাজানোর অনুভূতির জন্য কোণগুলি কাটা:

clip-path: polygon( 0% var(--d), var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0% 100%
)

এখানেই শেষ! আমরা শুধু একটি 3D আয়তক্ষেত্র তৈরি করেছি যেখানে দুটি গ্রেডিয়েন্ট এবং a ছাড়া কিছুই নেই clip-path যে আমরা সহজে CSS ভেরিয়েবল ব্যবহার করে সামঞ্জস্য করতে পারি। এখন, আমাদের যা করতে হবে তা হল অ্যানিমেট করা!

আগের চিত্র থেকে স্থানাঙ্কগুলি লক্ষ্য করুন (লাল রঙে নির্দেশিত)। অ্যানিমেশন তৈরি করতে সেগুলি আপডেট করা যাক:

clip-path: polygon( 0% var(--d), /* reverses var(--d) 0% */ var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

কৌশলটি হল উপাদানটির নীচের এবং বাম অংশগুলিকে লুকিয়ে রাখা যাতে যা বাকি থাকে তা হল একটি আয়তক্ষেত্রাকার উপাদান যার কোন গভীরতা নেই।

এই কলম বিচ্ছিন্ন clip-path অ্যানিমেশনের অংশ এটি কি করছে তা দেখতে:

চূড়ান্ত স্পর্শ ব্যবহার করে বিপরীত দিকে উপাদান সরানো হয় translate - এবং বিভ্রম নিখুঁত! এখানে বিভিন্ন গভীরতার জন্য বিভিন্ন কাস্টম সম্পত্তি মান ব্যবহার করে প্রভাব রয়েছে:

দ্বিতীয় হোভার প্রভাব একই কাঠামো অনুসরণ করে। আমি যা করেছি তা হল উপরের ডানদিকের পরিবর্তে উপরের বাম আন্দোলন তৈরি করতে কয়েকটি মান আপডেট করা।

সমন্বয় প্রভাব!

আমরা যা কিছু কভার করেছি তার দুর্দান্ত জিনিস হল যে তারা সব একে অপরের পরিপূরক। এখানে একটি উদাহরণ যেখানে আমি যোগ করছি দ্য text-shadow দ্বিতীয় নিবন্ধ থেকে প্রভাব সিরিজে background প্রথম নিবন্ধ থেকে অ্যানিমেশন কৌশল 3D ট্রিক ব্যবহার করার সময় আমরা এইমাত্র কভার করেছি:

আসল কোডটি প্রথমে বিভ্রান্তিকর হতে পারে, তবে এগিয়ে যান এবং এটিকে আরও কিছুটা ব্যবচ্ছেদ করুন - আপনি লক্ষ্য করবেন যে এটি কেবলমাত্র সেই তিনটি ভিন্ন প্রভাবের সংমিশ্রণ, প্রায় একত্রিত।

আমাকে একটি শেষ হোভার প্রভাব দিয়ে এই নিবন্ধটি শেষ করতে দিন যেখানে আমি ব্যাকগ্রাউন্ড, ক্লিপ-পাথ এবং একটি ড্যাশ একত্রিত করছি perspective অন্য 3D প্রভাব অনুকরণ করতে:

আমি চিত্রগুলিতে একই প্রভাব প্রয়োগ করেছি এবং ফলাফলটি একটি একক উপাদানের সাথে 3D অনুকরণের জন্য বেশ ভাল ছিল:

শেষ ডেমো কিভাবে কাজ করে তা ঘনিষ্ঠভাবে দেখতে চান? আমি এর উপর কিছু লিখেছিলাম।

মোড়ক উম্মচন

উফ, আমরা শেষ! আমি জানি, এটা অনেক কঠিন CSS কিন্তু (1) আমরা এই ধরনের জিনিসের জন্য সঠিক ওয়েবসাইটে আছি, এবং (2) লক্ষ্য হল বিভিন্ন CSS প্রপার্টি সম্পর্কে আমাদের বোঝাপড়াকে তাদের সাথে ইন্টারঅ্যাক্ট করার অনুমতি দিয়ে নতুন স্তরে নিয়ে যাওয়া। একে অন্যকে.

আপনি হয়তো জিজ্ঞাসা করছেন যে এখান থেকে পরবর্তী পদক্ষেপটি কী এখন আমরা উন্নত CSS হোভার প্রভাবগুলির এই ছোট সিরিজটি বন্ধ করে দিচ্ছি। আমি বলব পরবর্তী পদক্ষেপ হল আমরা যা শিখেছি তা গ্রহণ করা এবং সেগুলিকে অন্যান্য উপাদানে প্রয়োগ করা, যেমন বোতাম, মেনু আইটেম, লিঙ্ক ইত্যাদি। আমরা আমাদের কৌশলগুলিকে সেই সঠিক কারণটির জন্য শিরোনাম উপাদানের মধ্যে সীমিত করার মতো বিষয়গুলিকে বরং সহজ রেখেছি। ; প্রকৃত উপাদান কোন ব্যাপার না। ধারণাগুলি নিন এবং নতুন জিনিস তৈরি করতে, পরীক্ষা করতে এবং শিখতে তাদের সাথে চালান!

---

কুল CSS হোভার ইফেক্ট যা ব্যাকগ্রাউন্ড ক্লিপিং, মাস্ক এবং 3D ব্যবহার করে মূলত প্রকাশিত সিএসএস-ট্রিকস। তোমার উচিত নিউজলেটার পান.

• Coinsmart. ইউরোপের সেরা বিটকয়েন এবং ক্রিপ্টো এক্সচেঞ্জ।
• প্লেটোব্লকচেন। Web3 মেটাভার্স ইন্টেলিজেন্স। জ্ঞান প্রসারিত. বিনামূল্যে এক্সেস.
• ক্রিপ্টোহক। Altcoin রাডার। বিনামূল্যে ট্রায়াল.
• সূত্র: https://css-tricks.com/css-hover-effects-background-masks-3d/