অ্যানিমেটেড ব্যাকগ্রাউন্ড স্ট্রাইপ যা হোভারে ট্রানজিশন করে

আপনি কত ঘন ঘন CSS এর জন্য পৌঁছাতে হবে background-size সম্পত্তি? আপনি যদি আমার মতো হন - এবং সম্ভবত অন্যান্য ফ্রন্ট-এন্ড লোকেদের প্রচুর - তাহলে এটি সাধারণত যখন আপনি background-size: cover একটি সম্পূর্ণ উপাদানের স্থান পূরণ করার জন্য একটি চিত্র।

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

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

জিনিসগুলি সহজ রাখার জন্য একটি খুব প্রাথমিক সেটআপ দিয়ে শুরু করা যাক। আমি একক কথা বলছি

এইচটিএমএল-এ যা একটি সবুজ বর্গ হিসাবে স্টাইল করা হয়েছে:

div {
  width: 500px;
  height: 500px;
  background: palegreen;
}

ব্যাকগ্রাউন্ড স্ট্রাইপ সেট আপ করা হচ্ছে

আপনি যখন এই স্ট্রাইপগুলি দেখেন তখন যদি আপনার মন সরাসরি একটি CSS লিনিয়ার গ্রেডিয়েন্টে চলে যায়, তাহলে আমরা ইতিমধ্যে একই পৃষ্ঠায় আছি। এই ক্ষেত্রে আমরা ঠিক রিপিটিং গ্রেডিয়েন্ট করতে পারি না কারণ আমরা চাই যে স্ট্রাইপগুলি অসম পরিমাণ জায়গা দখল করে এবং তাদের স্থানান্তর করুক, তবে আমরা আমাদের বিদ্যমান ব্যাকগ্রাউন্ডের রঙের উপরে পাঁচটি ব্যাকগ্রাউন্ড চেইন করে পাঁচটি স্ট্রাইপ তৈরি করতে পারি। - পাত্রের ডানদিকে:

div {
  width: 500px;
  height: 500px;
  background: 
    linear-gradient(black, black) top right,
    linear-gradient(black, black) top 100px right,
    linear-gradient(black, black) top 200px right,
    linear-gradient(black, black) top 300px right,
    linear-gradient(black, black) top 400px right, 
    palegreen;
}

আমি অনুভূমিক স্ট্রাইপ তৈরি করেছি, তবে আমরা এখানে যে পদ্ধতিটি কভার করছি তার সাথে আমরা উল্লম্বও যেতে পারি। এবং আমরা কাস্টম বৈশিষ্ট্যগুলির সাথে এটিকে কিছুটা সরল করতে পারি:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
}

তাহলে --gt মান হল গ্রেডিয়েন্ট এবং --n একটি ধ্রুবক যা আমরা স্ট্রাইপগুলিকে নীচের দিকে নাজ করার জন্য ব্যবহার করছি যাতে সেগুলি উল্লম্বভাবে অফসেট হয়। এবং আপনি হয়তো লক্ষ্য করেছেন যে আমি সত্যিকারের গ্রেডিয়েন্ট সেট করিনি, বরং কঠিন কালো ফিতে linear-gradient() ফাংশন - এটি ইচ্ছাকৃত এবং আমরা জানতে পারব কেন আমি কিছুক্ষণের মধ্যে এটি করেছি।

এগিয়ে যাওয়ার আগে আমাদের আরও একটি জিনিস যা করা উচিত তা হল আমাদের ব্যাকগ্রাউন্ডকে পুনরাবৃত্তি করা থেকে বিরত রাখা; অন্যথায়, তারা টাইল করবে এবং পুরো স্থানটি পূরণ করবে:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
  background-repeat: no-repeat;
}

আমরা সেট করতে পারতাম background-repeat মধ্যে background শর্টহ্যান্ড, তবে জিনিসগুলি সহজে পড়ার জন্য আমি এটিকে এখানে ভেঙে দেওয়ার সিদ্ধান্ত নিয়েছি।

স্ট্রাইপ অফসেটিং

আমাদের প্রযুক্তিগতভাবে স্ট্রাইপ আছে, কিন্তু এটি বলা বেশ কঠিন কারণ তাদের মধ্যে কোন ফাঁক নেই এবং তারা পুরো পাত্রটিকে ঢেকে রাখে। এটা আরো যেমন আমরা একটি কঠিন কালো বর্গক্ষেত্র আছে.

এই আমরা ব্যবহার পেতে যেখানে background-size সম্পত্তি আমরা স্ট্রাইপের উচ্চতা এবং প্রস্থ উভয়ই সেট করতে চাই এবং সম্পত্তিটি একটি দ্বি-মান সিনট্যাক্স সমর্থন করে যা আমাদের ঠিক এটি করতে দেয়। এবং, আমরা সেই মাপগুলিকে কমা দিয়ে আলাদা করে চেইন করতে পারি যেভাবে আমরা করেছি background.

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

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
  background-repeat: no-repeat;
  background-size: 60%, 90%, 70%, 40%, 10%;
}

আপনি যদি একই মান ব্যবহার করেন যা আমি করছি, আপনি এটি পাবেন:

আমরা সব স্ট্রাইপের জন্য প্রস্থ সেট করা ঠিক মত দেখাচ্ছে না, তাই না? যে কারণে auto একক-মান সিনট্যাক্সের উচ্চতা আচরণ। দ্বিতীয় স্ট্রাইপটি এটির নীচের অন্যদের চেয়ে প্রশস্ত এবং এটি তাদের আচ্ছাদন করছে। আমাদের উচ্চতা নির্ধারণ করা উচিত যাতে আমরা আমাদের কাজ দেখতে পারি। তারা সব একই উচ্চতা হওয়া উচিত এবং আমরা আসলে আমাদের পুনরায় ব্যবহার করতে পারেন --n পরিবর্তনশীল, আবার, জিনিস সহজ রাখতে:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
    background-repeat: no-repeat;
    background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n); // HIGHLIGHT 15
}

আহ, অনেক ভালো!

ফিতে মধ্যে ফাঁক যোগ করা

এটি একটি সম্পূর্ণ ঐচ্ছিক পদক্ষেপ যদি আপনার ডিজাইনের জন্য স্ট্রাইপের মধ্যে ফাঁকের প্রয়োজন না হয়, কিন্তু আমার করা হয়েছে এবং এটি অত্যধিক জটিল নয়। আমরা প্রতিটি স্ট্রাইপের উচ্চতা পরিবর্তন করি background-size একটি স্মিজ, মান হ্রাস করে যাতে তারা সম্পূর্ণ উল্লম্ব স্থান পূরণ করতে কম পড়ে।

আমরা আমাদের ব্যবহার চালিয়ে যেতে পারেন --n পরিবর্তনশীল, কিন্তু একটি ছোট পরিমাণ বিয়োগ, বলুন 5px, ব্যবহার calc() আমরা যা চাই তা পেতে।

background-size: 60% calc(var(--n) - 5px), 90% calc(var(--n) - 5px), 70% calc(var(--n) - 5px), 40% calc(var(--n) - 5px), 10% calc(var(--n) - 5px);

এটি অনেক পুনরাবৃত্তি যা আমরা অন্য পরিবর্তনশীল দিয়ে নির্মূল করতে পারি:

div {
  --h: calc(var(--n) - 5px);
  /* etc. */
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

মাস্কিং এবং মিশ্রন

এখন এর অদলবদল করা যাক palegreen ব্যাকগ্রাউন্ডের রঙ আমরা সাদার জন্য এই বিন্দু পর্যন্ত চাক্ষুষ উদ্দেশ্যে ব্যবহার করছি।

div {
  /* etc. */
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    #fff;
  /* etc. */
}

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

একটি নতুন প্যারেন্ট কন্টেইনারে এবং একটি দ্বিতীয় প্রবর্তন করুন

এটার নিচে:

আমরা এখানে একটু CSS রি-ফ্যাক্টরিং করতে যাচ্ছি। এখন যেহেতু আমাদের কাছে একটি নতুন প্যারেন্ট ধারক আছে, আমরা স্থির পাস করতে পারি width এবং height বৈশিষ্ট্য আমরা আমাদের উপর ব্যবহার করা হয়

ওখানে:

section {
  width: 500px;
  height: 500px;
} 

আমি দুটি অবস্থানের জন্য CSS গ্রিড ব্যবহার করতে যাচ্ছি

একে অপরের উপরে উপাদান। এই একই কৌশল তেমানি আফিফ তৈরি করতে ব্যবহার করেন সুপার শান্ত ইমেজ গ্যালারী. ধারণা হল যে আমরা ব্যবহার করে সম্পূর্ণ পাত্রের উপর উভয় ডিভ রাখি grid-area সম্পত্তি এবং কেন্দ্রের দিকে সবকিছু সারিবদ্ধ করুন:

section {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 500px;
  height: 500px;
} 

section > div {
  width: inherit;
  height: inherit;
  grid-area: 1 / 1;
}

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

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

এটি কাজ করার জন্য, আমি বাস্তব গ্রেডিয়েন্ট প্রয়োগ করব যা আমরা প্রথমে দেখতে চাই

আমাদের প্রাথমিক থেকে শৈলী নিয়ম প্রয়োগ করার সময়

নতুন একটি, ব্যবহার করে :nth-child() ছদ্ম-নির্বাচক:

div:nth-child(1) { 
  background: linear-gradient(to right, red, orange); 
}

div:nth-child(2)  {
  --gt: linear-gradient(black, black);
  --n: 100px;
  --h: calc(var(--n) - 5px);
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    white;
  background-repeat: no-repeat;
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

যদি আমরা এখানে থামি, আমরা আসলে আগে যা ছিল তার থেকে কোন চাক্ষুষ পার্থক্য দেখতে পাব না। এর কারণ আমরা এখনও প্রকৃত মিশ্রণ করিনি। সুতরাং, এর এখন ব্যবহার করে তা করা যাক screen মিশ্রণ মোড:

div:nth-child(2)  {
  /* etc. */
  mix-blend-mode: screen;
}

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

হোভার প্রভাব

এই ধাঁধার শেষ অংশটি হোভার প্রভাব যা স্ট্রাইপগুলিকে সম্পূর্ণ প্রস্থে প্রশস্ত করে। প্রথমে, এর জন্য আমাদের নির্বাচক লিখুন। আমরা এটি ঘটতে চাই যখন প্যারেন্ট কন্টেইনার (

আমাদের ক্ষেত্রে) হোভার করা হয়। এটি হোভার করা হলে, আমরা দ্বিতীয়টিতে থাকা স্ট্রাইপের পটভূমির আকার পরিবর্তন করব

:

/* When 
 is hovered, change the second div's styles */
section:hover > div:nth-child(2){
  /* styles go here */
}

আমরা পরিবর্তন করতে চাই background-size একই উচ্চতা বজায় রেখে ধারকটির পূর্ণ প্রস্থ পর্যন্ত স্ট্রাইপগুলি:

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
}

এটি পটভূমিকে পূর্ণ-প্রস্থে "স্ন্যাপ করে"। আমরা যদি একটু যোগ করি transition এটিতে, তারপরে আমরা হোভারে স্ট্রাইপগুলি প্রসারিত দেখতে পাই:

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
  transition: background-size 1s;
}

এখানে আবার সেই চূড়ান্ত ডেমো:

এটি একটি ভিন্ন প্রসঙ্গে ব্যবহার করার মত দেখতে কেমন হতে পারে তা দেখানোর জন্য আমি শুধুমাত্র সেখানে পাঠ্য যোগ করেছি। আপনি যদি একই কাজ করেন, তাহলে টেক্সট কালার এবং গ্রেডিয়েন্টে ব্যবহৃত রংগুলির মধ্যে পর্যাপ্ত বৈসাদৃশ্য রয়েছে তা নিশ্চিত করা মূল্যবান WCAG নির্দেশিকা. এবং যখন আমরা অ্যাক্সেসযোগ্যতার উপর সংক্ষিপ্তভাবে স্পর্শ করছি, এটি মূল্যবান হ্রাস গতির জন্য ব্যবহারকারীর পছন্দ বিবেচনা করা যখন এটি হোভার প্রভাব আসে.

এটি একটি মোড়ানো!

বেশ ঝরঝরে, তাই না? আমি অবশ্যই তাই মনে করি. আমি এটি সম্পর্কেও যা পছন্দ করি তা হল এটি বেশ রক্ষণাবেক্ষণযোগ্য এবং কাস্টমাইজযোগ্য। উদাহরণস্বরূপ, আমরা কয়েকটি মান পরিবর্তন করে স্ট্রাইপের উচ্চতা, রং এবং দিক পরিবর্তন করতে পারি। আপনি সেখানে আরও কয়েকটি জিনিস পরিবর্তন করতে পারেন - যেমন রং এবং প্রস্থ - এটিকে আরও কনফিগারযোগ্য করতে।

আমি সত্যিই আগ্রহী যদি আপনি এটি একটি ভিন্ন উপায় যোগাযোগ করা হবে. যদি তাই হয়, মন্তব্য শেয়ার করুন! আমরা কত বৈচিত্র সংগ্রহ করতে পারি তা দেখতে ঝরঝরে হবে।