অভিনব চিত্র সজ্জা: একক উপাদান যাদু

শিরোনাম বলে, আমরা ছবি সাজাতে যাচ্ছি! সেখানে আরও অনেক নিবন্ধ রয়েছে যা এই বিষয়ে কথা বলে, তবে আমরা এখানে যা কভার করছি তা কিছুটা আলাদা কারণ এটি একটি চ্যালেঞ্জের বেশি। চ্যালেঞ্জ? শুধুমাত্র ব্যবহার করে একটি ইমেজ সাজাইয়া ট্যাগ এবং আর কিছুই না।

এই অধিকার, কোন অতিরিক্ত মার্কআপ, কোন divs, এবং কোন ছদ্ম উপাদান. শুধু একটি ট্যাগ.

কঠিন শোনাচ্ছে, তাই না? কিন্তু এই নিবন্ধের শেষের মধ্যে — এবং অন্য যেগুলি এই ছোট সিরিজটি তৈরি করে — আমি প্রমাণ করব যে সিএসএস যথেষ্ট শক্তিশালী যে একটি একক উপাদান নিয়ে কাজ করার সীমাবদ্ধতা সত্ত্বেও আমাদের দুর্দান্ত এবং অত্যাশ্চর্য ফলাফল দিতে পারে৷

আমাদের প্রথম উদাহরণ দিয়ে শুরু করা যাক

কোডটি খনন করার আগে আসুন একটি স্টাইল করার সম্ভাবনাগুলি গণনা করি কোনো অতিরিক্ত উপাদান বা ছদ্ম-উপাদান ছাড়া। আমরা ব্যবহার করতে পারি border, box-shadow, outline, এবং অবশ্যই, background. একটি ছবিতে একটি ব্যাকগ্রাউন্ড যুক্ত করা অদ্ভুত লাগতে পারে কারণ আমরা এটি দেখতে পারি না কারণ এটি ছবির পিছনে থাকবে - তবে কৌশলটি হল স্থান তৈরি করা কাছাকাছি ছবি ব্যবহার করে padding এবং / অথবা border এবং তারপর সেই স্থানের ভিতরে আমাদের পটভূমি আঁকুন।

আমি মনে করি আপনি জানেন যে পরবর্তীতে আমি কথা বলেছি background, ঠিক? হ্যাঁ, গ্রেডিয়েন্টস! আমরা যে সমস্ত সাজসজ্জা করতে যাচ্ছি তা অনেক গ্রেডিয়েন্টের উপর নির্ভর করে। আপনি যদি অনুসরন কর কিছুক্ষণের জন্য, আমি মনে করি এটি সম্ভবত আপনার কাছে বিস্ময়কর নয়। 😁

আমাদের প্রথম উদাহরণে ফিরে আসা যাক:

img {
  --s: 10px; /* control the size */
  padding: var(--s);
  border: calc(2 * var(--s)) solid #0000;
  outline: 1px solid #000;
  outline-offset: calc(-1 * var(--s));
  background: conic-gradient(from 90deg at 1px 1px, #0000 25%, #000 0);
}

আমরা সংজ্ঞায়িত করছি padding এবং একটি স্বচ্ছ border ভেরিয়েবল ব্যবহার করে --s আমাদের চিত্রের চারপাশে একটি স্থান তৈরি করতে যা পরিবর্তনশীলের তিনগুণ সমান।

কেন আমরা উভয় ব্যবহার করছি padding এবং border এক বা অন্যের পরিবর্তে? আমরা তাদের মধ্যে শুধুমাত্র একটি ব্যবহার করে পেতে পারি কিন্তু আমার গ্রেডিয়েন্টের জন্য এই সমন্বয় প্রয়োজন কারণ, ডিফল্টরূপে, প্রাথমিক মান background-clip is border-box এবং background-origin সমান padding-box.

যুক্তি বোঝার জন্য এখানে একটি ধাপে ধাপে দৃষ্টান্ত রয়েছে:

প্রাথমিকভাবে, আমাদের ছবিতে কোনো সীমানা নেই, তাই আমাদের গ্রেডিয়েন্ট দুটি সেগমেন্ট তৈরি করবে 1px বেধ (আমি ব্যাবহার করছি 3px এই নির্দিষ্ট ডেমোতে যাতে এটি দেখতে সহজ হয়।) আমরা একটি রঙিন সীমানা যোগ করি এবং গ্রেডিয়েন্ট এখনও আমাদের প্যাডিং এলাকার ভিতরে একই ফলাফল দেয় (কারণ background-origin) কিন্তু এটি সীমান্তের পিছনে পুনরাবৃত্তি হয়। আমরা যদি সীমানার রঙকে স্বচ্ছ করি তবে আমরা পুনরাবৃত্তি ব্যবহার করতে পারি এবং আমরা যে ফ্রেম চাই তা পেতে পারি।

সার্জারির outline ডেমোতে একটি নেতিবাচক অফসেট আছে। এটি গ্রেডিয়েন্টের শীর্ষে একটি বর্গাকার আকৃতি তৈরি করে। এটাই! আমরা একটি গ্রেডিয়েন্ট এবং একটি ব্যবহার করে আমাদের ছবিতে একটি সুন্দর সজ্জা যোগ করেছি outline. আমরা আরও গ্রেডিয়েন্ট ব্যবহার করতে পারতাম! কিন্তু আমি সবসময় আমার কোড যতটা সম্ভব সহজ রাখার চেষ্টা করি এবং আমি খুঁজে পেয়েছি যে একটি যোগ করা হচ্ছে outline যে ভাবে ভাল.

এখানে একটি গ্রেডিয়েন্ট-কেবল সমাধান যেখানে আমি শুধুমাত্র ব্যবহার করছি padding স্থান সংজ্ঞায়িত করতে। এখনও একই ফলাফল কিন্তু একটি আরো জটিল বাক্য গঠন সঙ্গে.

আসুন অন্য ধারণা চেষ্টা করুন:

এই এক জন্য, আমি পূর্ববর্তী উদাহরণ সরিয়ে নিলাম outline, এবং প্রয়োগ ক clip-path প্রতিটি দিকে গ্রেডিয়েন্ট কাটা. দ্য clip-path মানটি কিছুটা শব্দসমৃদ্ধ এবং বিভ্রান্তিকর তবে এর পয়েন্টগুলি আরও ভালভাবে দেখার জন্য এখানে একটি উদাহরণ দেওয়া হল:

আমি মনে করি আপনি মূল ধারণা পেতে. আমরা বিভিন্ন ধরনের সাজসজ্জা অর্জনের জন্য পটভূমি, রূপরেখা, ক্লিপিং এবং কিছু মুখোশ একত্রিত করতে যাচ্ছি। আমরা একটি অতিরিক্ত বোনাস হিসাবে কিছু দুর্দান্ত হোভার অ্যানিমেশন বিবেচনা করতে যাচ্ছি! আমরা এখন পর্যন্ত যা দেখেছি তা কি আসছে তার একটি ছোট ওভারভিউ!

শুধুমাত্র কোণার ফ্রেম

এটি একটি চার গ্রেডিয়েন্ট লাগে. প্রতিটি গ্রেডিয়েন্ট একটি কোণ জুড়ে এবং, হোভারে, আমরা চিত্রের চারপাশে একটি সম্পূর্ণ ফ্রেম তৈরি করতে সেগুলি প্রসারিত করি। আসুন গ্রেডিয়েন্টগুলির একটির জন্য কোডটি বিচ্ছিন্ন করি:

--b: 5px; /* border thickness */
background: conic-gradient(from 90deg at top var(--b) left var(--b), #0000 90deg, darkblue 0) 0 0;
background-size: 50px 50px; 
background-repeat: no-repeat;

আমরা সমান আকারের একটি গ্রেডিয়েন্ট আঁকতে যাচ্ছি 50px 50px এবং এটি উপরের-বাম কোণায় রাখুন (0 0) গ্রেডিয়েন্টের কনফিগারেশনের জন্য, এখানে একটি ধাপে ধাপে দৃষ্টান্ত দেখানো হয়েছে যে কিভাবে আমি সেই ফলাফলে পৌঁছেছি।

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

#0000 25%, darkblue 0

এটি মূলত বলছে: “এ পর্যন্ত একটি স্বচ্ছ রঙ দিয়ে গ্রেডিয়েন্টটি পূরণ করুন 25% এলাকার, তারপর অবশিষ্ট এলাকা পূরণ করুন darkblue.

আপনি উপর আপনার মাথা scratching হতে পারে 0 মান সিনট্যাক্স সহজ করার জন্য এটি একটু হ্যাক। বাস্তবে, রঙগুলির মধ্যে একটি হার্ড স্টপ করতে আমাদের এটি ব্যবহার করা উচিত:

#0000 25%, darkblue 25%

এটা আরো যৌক্তিক! স্বচ্ছ রঙ শেষ হয় এ 25% এবং darkblue যেখানে স্বচ্ছতা শেষ হয় ঠিক সেখানেই শুরু হয়, একটি হার্ড স্টপ তৈরি করে। যদি আমরা দ্বিতীয়টির সাথে প্রতিস্থাপন করি 0, ব্রাউজার আমাদের জন্য কাজ করবে, তাই এটি সম্পর্কে যেতে একটি সামান্য আরো কার্যকর উপায়.

কোথাও স্পেসিফিকেশন, এটা বলে:

যদি একটি রঙ স্টপ or রূপান্তর ইঙ্গিত তালিকার আগে যেকোন কালার স্টপ বা ট্রানজিশন ইঙ্গিতের নির্দিষ্ট অবস্থানের চেয়ে কম এমন একটি অবস্থান রয়েছে, এটির অবস্থানটি তার আগে যেকোনো রঙের স্টপ বা ট্রানজিশন ইঙ্গিতের বৃহত্তম নির্দিষ্ট অবস্থানের সমান হতে সেট করুন।

0 অন্য যেকোনো মানের থেকে সর্বদা ছোট, তাই ব্রাউজার সর্বদা এটিকে ঘোষণার আগে আসা সবচেয়ে বড় মানের সাথে রূপান্তর করবে। আমাদের ক্ষেত্রে, যে সংখ্যা 25%.

এখন, আমরা সমস্ত কোণে একই যুক্তি প্রয়োগ করি এবং আমরা নিম্নলিখিত কোড দিয়ে শেষ করি:

img {
  --b: 5px; /* border thickness */
  --c: #0000 90deg, darkblue 0; /* define the color here */
  padding: 10px;
  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b), var(--c)) 0 0,
    conic-gradient(from 180deg at top    var(--b) right var(--b), var(--c)) 100% 0,
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b), var(--c)) 0 100%,
    conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--c)) 100% 100%;
  background-size: 50px 50px; /* adjust border length here */
  background-repeat: no-repeat;
}

আমি কিছু অপ্রয়োজনীয়তা এড়াতে CSS ভেরিয়েবল চালু করেছি কারণ সমস্ত গ্রেডিয়েন্ট একই রঙের কনফিগারেশন ব্যবহার করে।

হোভার প্রভাবের জন্য, আমি যা করছি তা হল সম্পূর্ণ ফ্রেম তৈরি করতে গ্রেডিয়েন্টের আকার বৃদ্ধি করা:

img:hover {
  background-size: 51% 51%;
}

হ্যা, এটাই 51% পরিবর্তে 50% — যা একটি ছোট ওভারল্যাপ তৈরি করে এবং সম্ভাব্য ফাঁক এড়ায়।

একই কৌশল ব্যবহার করে আরেকটি ধারণা চেষ্টা করা যাক:

এই সময় আমরা শুধুমাত্র দুটি গ্রেডিয়েন্ট ব্যবহার করছি, কিন্তু আরও জটিল অ্যানিমেশন সহ। প্রথমে, আমরা প্রতিটি গ্রেডিয়েন্টের অবস্থান আপডেট করি, তারপর পূর্ণ ফ্রেম তৈরি করতে তাদের আকার বাড়াই। আমি রঙ, আকার, বেধ এবং এমনকি চিত্র এবং ফ্রেমের মধ্যে ফাঁকের উপর আরও ভাল নিয়ন্ত্রণের জন্য আরও ভেরিয়েবল প্রবর্তন করেছি।

img {
  --b: 8px;  /* border thickness*/
  --s: 60px; /* size of the corner*/
  --g: 14px; /* the gap*/
  --c: #EDC951; 

  padding: calc(var(--b) + var(--g));
  background-image:
    conic-gradient(from  90deg at top    var(--b) left  var(--b), #0000 25%, var(--c) 0),
    conic-gradient(from -90deg at bottom var(--b) right var(--b), #0000 25%, var(--c) 0);
  background-position:
    var(--_p, 0%) var(--_p, 0%),
    calc(100% - var(--_p, 0%)) calc(100% - var(--_p, 0%));
  background-size: var(--s) var(--s);
  background-repeat: no-repeat;
  transition: 
    background-position .3s var(--_i,.3s), 
    background-size .3s calc(.3s - var(--_i, .3s));
}
img:hover {
  background-size: calc(100% - var(--g)) calc(100% - var(--g));
  --_p: calc(var(--g) / 2);
  --_i: 0s;
}

কেন --_i এবং --_p ভেরিয়েবল তাদের নামে একটি আন্ডারস্কোর আছে? আন্ডারস্কোরগুলি একটি নামকরণ প্রথার অংশ যা আমি কোডটি অপ্টিমাইজ করতে ব্যবহৃত "অভ্যন্তরীণ" ভেরিয়েবল বিবেচনা করতে ব্যবহার করি। এগুলি বিশেষ কিছু নয় তবে আমি ফ্রেম নিয়ন্ত্রণ করতে আমরা যে ভেরিয়েবলগুলি সামঞ্জস্য করি তার মধ্যে পার্থক্য করতে চাই (যেমন --b, --c, ইত্যাদি) এবং আমি কোড ছোট করতে ব্যবহার করি।

কোডটি বিভ্রান্তিকর মনে হতে পারে এবং বোঝা সহজ নয় কিন্তু আমি একটি লিখেছি তিন পর্বের সিরিজ যেখানে আমি যেমন কৌশল বিস্তারিত. আমি কীভাবে উপরের কোডে পৌঁছেছি তা বোঝার জন্য আমি কমপক্ষে প্রথম নিবন্ধটি পড়ার পরামর্শ দিই।

বিভিন্ন মানগুলি আরও ভালভাবে বোঝার জন্য এখানে একটি দৃষ্টান্ত রয়েছে:

ফ্রেম প্রকাশ

আসুন অন্য ধরণের অ্যানিমেশন চেষ্টা করি যেখানে আমরা হোভারে পুরো ফ্রেমটি প্রকাশ করি:

কুল, তাই না? এবং আপনি যদি ঘনিষ্ঠভাবে তাকান, আপনি লক্ষ্য করবেন যে লাইনগুলি মাউসের বিপরীত দিকে অদৃশ্য হয়ে গেছে যা প্রভাবটিকে আরও অভিনব করে তোলে! আমি একটি অনুরূপ প্রভাব ব্যবহার একটি পূর্ববর্তী নিবন্ধ.

কিন্তু এই সময়, সমস্ত উপাদান কভার করার পরিবর্তে, আমি একটি সংজ্ঞায়িত করে শুধুমাত্র একটি ছোট অংশ আবরণ height এই মত কিছু পেতে:

এটি আমাদের ফ্রেমের উপরের সীমানা। আমরা চিত্রের প্রতিটি পাশে একই প্রক্রিয়া পুনরাবৃত্তি করি এবং আমাদের হভার প্রভাব রয়েছে:

img {
  --b: 10px; /* the border thickness*/
  --g: 5px; /* the gap on hover */
  --c: #8A9B0F; 

  padding: calc(var(--g) + var(--b));
  --_g: no-repeat linear-gradient(var(--c) 0 0);
  background: 
    var(--_g) var(--_i, 0%) 0,
    var(--_g) 100% var(--_i, 0%),
    var(--_g) calc(100% - var(--_i, 0%)) 100%,
    var(--_g) 0 calc(100% - var(--_i, 0%));
  background-size: var(--_i, 0%) var(--b),var(--b) var(--_i, 0%);
  transition: .4s, background-position 0s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
}

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

আরেকটা? চলো যাই!

এটি দেখতে কিছুটা জটিল এবং দুটি কনিক গ্রেডিয়েন্ট কীভাবে এই ধরণের জাদুকে টানছে তা বোঝার জন্য সত্যিই কিছু কল্পনা প্রয়োজন। গ্রেডিয়েন্টগুলির একটিকে চিত্রিত করার জন্য এখানে একটি ডেমো রয়েছে:

ছদ্ম-উপাদান গ্রেডিয়েন্টকে অনুকরণ করে। এটি প্রাথমিকভাবে দৃষ্টির বাইরে এবং, হোভার করার সময়, আমরা প্রথমে ফ্রেমের উপরের প্রান্তটি পেতে এর অবস্থান পরিবর্তন করি। তারপর আমরা ডান প্রান্ত পেতে উচ্চতা বৃদ্ধি. গ্রেডিয়েন্ট আকৃতিটি আমরা শেষ বিভাগে যেগুলি ব্যবহার করেছি তার অনুরূপ: দুটি অংশ কভার করার জন্য দুটি অংশ।

কিন্তু কেন আমি গ্রেডিয়েন্ট এর প্রস্থ বানালাম 200%? আপনি মনে করবেন 100% যথেষ্ট হবে, তাই না?

100% যথেষ্ট হওয়া উচিত কিন্তু আমি গ্রেডিয়েন্টটিকে আমার মতো সরাতে পারব না যদি আমি এর প্রস্থ সমান রাখি 100%. যে কিভাবে সম্পর্কিত আরেকটি সামান্য quirk background-position কাজ করে আমি এই কভার একটি পূর্ববর্তী নিবন্ধ. আমিও স্ট্যাক ওভারফ্লোতে একটি উত্তর পোস্ট করেছেন এই সঙ্গে মোকাবিলা. আমি জানি এটা অনেক পড়া, কিন্তু এটা সত্যিই আপনার সময় মূল্য.

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

img {
  --c: #8A9B0F; /* the border color */
  --b: 10px; /* the border thickness*/
  --g: 5px;  /* the gap */

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, var(--c) 0;
  background: 
    conic-gradient(from 180deg at top    var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0 / 200% var(--_i, var(--b))  no-repeat,
    conic-gradient(            at bottom var(--b) left  var(--b), var(--_g))
     0 var(--_i, 200%) / var(--_i, var(--b)) 200%  no-repeat;
  transition: .3s, background-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, background-size .3s .3s;
}

আপনি দেখতে পাচ্ছেন, উভয় গ্রেডিয়েন্ট প্রায় অভিন্ন। আমি কেবল আকার এবং অবস্থানের মানগুলি অদলবদল করছি।

ফ্রেম ঘূর্ণন

এই সময় আমরা আমাদের ছবির চারপাশে একটি ফ্রেম আঁকতে যাচ্ছি না, বরং বিদ্যমান একটির চেহারা সামঞ্জস্য করতে যাচ্ছি।

আপনি সম্ভবত জিজ্ঞাসা করছেন কিভাবে আমি একটি সরল রেখাকে একটি কোণীয় রেখায় রূপান্তর করতে সক্ষম হয়েছি। না, যাদু তার চেয়ে আলাদা। চারটি গ্রেডিয়েন্টের জন্য সাধারণ অ্যানিমেশনগুলিকে একত্রিত করার পরে আমরা যে বিভ্রম পাই।

চলুন দেখি কিভাবে টপ গ্রেডিয়েন্টের জন্য অ্যানিমেশন তৈরি করা হয়:

আমি কেবল একটি পুনরাবৃত্তি গ্রেডিয়েন্টের অবস্থান আপডেট করছি। এখনও অভিনব কিছুই! আসুন ডান দিকের জন্য একই কাজ করি:

আপনি কৌশল দেখতে শুরু? উভয় গ্রেডিয়েন্ট কোণে ছেদ করে বিভ্রম তৈরি করতে যেখানে সরলরেখাটি একটি কোণে পরিবর্তিত হয়। আসুন রূপরেখাটি সরিয়ে ফেলি এবং এটিকে আরও ভালভাবে দেখতে ওভারফ্লোটি লুকিয়ে রাখি:

এখন, আমরা অবশিষ্ট প্রান্তগুলিকে কভার করার জন্য আরও দুটি গ্রেডিয়েন্ট যোগ করি এবং আমরা সম্পন্ন করেছি:

img {
  --g: 4px; /* the gap */
  --b: 12px; /* border thickness*/
  --c: #669706; /* the color */

  padding: calc(var(--g) + var(--b));
  --_c: #0000 0 25%, var(--c) 0 50%;
  --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
  --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
  background:
    var(--_g1) var(--_p, 25%) 0, 
    var(--_g2) 0 var(--_p, 125%),
    var(--_g1) var(--_p, 125%) 100%, 
    var(--_g2) 100% var(--_p, 25%);
  background-size: 200% var(--b), var(--b) 200%;
  transition: .3s;
}
img:hover {
  --_p: 75%;
}

যদি আমরা এই কোডটি গ্রহণ করি এবং এটিকে কিছুটা সামঞ্জস্য করি তবে আমরা আরেকটি দুর্দান্ত অ্যানিমেশন পেতে পারি:

আপনি এই উদাহরণে যুক্তি খুঁজে বের করতে পারেন? যে আপনার বাড়ির কাজ! কোডটি ভীতিকর মনে হতে পারে তবে এটি আগের উদাহরণগুলির মতো একই যুক্তি ব্যবহার করে যা আমরা দেখেছি। প্রতিটি গ্রেডিয়েন্টকে বিচ্ছিন্ন করার চেষ্টা করুন এবং এটি কীভাবে অ্যানিমেট করে তা কল্পনা করুন।

মোড়ক উম্মচন

যে এক নিবন্ধে গ্রেডিয়েন্ট অনেক!

এটা নিশ্চিত এবং আমি আপনাকে সতর্ক করেছি! কিন্তু যদি চ্যালেঞ্জটি হয় একটি অতিরিক্ত উপাদান এবং ছদ্ম-উপাদান ছাড়াই একটি চিত্র সাজানো, তবে আমাদের কাছে শুধুমাত্র কয়েকটি সম্ভাবনা রয়েছে এবং গ্রেডিয়েন্টগুলি সবচেয়ে শক্তিশালী বিকল্প।

আপনি যদি কিছু ব্যাখ্যায় কিছুটা হারিয়ে যান তবে চিন্তা করবেন না। আমি সর্বদা আমার কিছু পুরানো নিবন্ধের সুপারিশ করি যেখানে আমি এই চ্যালেঞ্জের জন্য পুনর্ব্যবহৃত কিছু ধারণার সাথে আরও বিশদে যাই।

আমি এই সিরিজের পরবর্তী নিবন্ধ পর্যন্ত আপনাকে ধরে রাখার জন্য একটি শেষ ডেমো নিয়ে চলে যাচ্ছি। এই সময়, আমি ব্যবহার করছি radial-gradient() আরেকটি মজার হোভার প্রভাব তৈরি করতে। আমি আপনাকে কোডটি কীভাবে কাজ করে তা গ্রোক করতে দেব। আপনি আটকে গেলে মন্তব্যে আমাকে প্রশ্ন জিজ্ঞাসা করুন!