অভিনব চিত্র সজ্জা: মুখোশ এবং উন্নত হোভার প্রভাব

এই তিন পর্বের সিরিজের ২য় পর্বে স্বাগতম! আমরা এখনও কোনও অতিরিক্ত উপাদান এবং ছদ্ম-উপাদান ছাড়াই চিত্রগুলি সাজাচ্ছি। আমি আশা করি আপনি ইতিমধ্যে হজম করতে সময় নিয়েছেন পার্ট 1 কারণ আমরা দুর্দান্ত ভিজ্যুয়াল এফেক্ট তৈরি করতে প্রচুর গ্রেডিয়েন্টের সাথে কাজ চালিয়ে যাব। আমরা CSS চালু করতে যাচ্ছি mask আরো জটিল সজ্জা এবং হোভার প্রভাব জন্য সম্পত্তি.

আসুন আমরা একসাথে কাজ করছি এমন প্রথম উদাহরণে ফিরে আসি...

ডাকটিকিট

বিশ্বাস করুন বা না করুন, পোস্টেজ স্ট্যাম্প সিএসএস প্রভাব তৈরি করতে যা লাগে তা হল দুটি গ্রেডিয়েন্ট এবং একটি ফিল্টার:

img {
  --r: 10px; /* control the radius of the circles */
  padding: calc(2 * var(--r));
  filter: grayscale(.4);
  background: 
    radial-gradient(var(--r),#0000 98%,#fff) round
      calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#fff 0 0) no-repeat
      50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}

আমরা যেমন দেখেছি পূর্ববর্তী নিবন্ধ, প্রথম ধাপ হল ছবির চারপাশে স্থান তৈরি করা padding তাই আমরা একটি ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট আঁকতে পারি এবং সেখানে দেখতে পারি। তারপর আমরা একটি সমন্বয় ব্যবহার radial-gradient() এবং linear-gradient() ছবির চারপাশে সেই বৃত্তগুলি কাটাতে।

এখানে একটি ধাপে ধাপে দৃষ্টান্ত রয়েছে যা দেখায় কিভাবে গ্রেডিয়েন্টগুলি কনফিগার করা হয়েছে:

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

থেকে স্পেসিফিকেশন: ব্যাকগ্রাউন্ড পজিশনিং এরিয়ার মধ্যে যতবার ফিট হবে ততবার ইমেজ পুনরাবৃত্তি করা হবে। যদি এটি সম্পূর্ণ সংখ্যক বার ফিট না হয়, তাহলে এটি পুনরায় স্কেল করা হয় যাতে এটি হয়।

গোলাকার ফ্রেম

আসুন আরেকটি ইমেজ ডেকোরেশন দেখি যা চেনাশোনা ব্যবহার করে...

এই উদাহরণটি একটি ব্যবহার করে radial-gradient(), কিন্তু এবার আমি বৃত্ত তৈরি করেছি কাছাকাছি কাট-আউট প্রভাবের পরিবর্তে চিত্র। লক্ষ্য করুন যে আমিও ব্যবহার করছি round আবার মান। এখানে সবচেয়ে জটিল অংশ হল ফ্রেম এবং ছবির মধ্যে স্বচ্ছ ব্যবধান, যেখানে আমি CSS-এর জন্য পৌঁছাতে পারি mask সম্পত্তি:

img {
  --s: 20px; /* size of the frame */
  --g: 10px; /* the gap */
  --c: #FA6900; 

  padding: calc(var(--g) + var(--s));
  background: 
    radial-gradient(farthest-side, var(--c) 97%, #0000) 
      0 0 / calc(2 * var(--s)) calc(2 * var(--s)) round;
  mask:
    conic-gradient(from 90deg at calc(2 * var(--s)) calc(2 * var(--s)), #0000 25%, #000 0)
      calc(-1 * var(--s)) calc(-1 * var(--s)),
    linear-gradient(#000 0 0) content-box;
}

মাস্কিং আমাদের ছবির ক্ষেত্রফল দেখাতে দেয় — ধন্যবাদ linear-gradient() সেখানে — পাশাপাশি 20px এর প্রতিটি পাশের চারপাশে — ধন্যবাদ conic-gradient(). দ্য 20px পরিবর্তনশীল ছাড়া কিছুই নয় --s যা ফ্রেমের আকার নির্ধারণ করে। অন্য কথায়, আমাদের ফাঁক লুকাতে হবে।

এখানে আমি কি বলতে চাচ্ছি:

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

অভ্যন্তরীণ স্বচ্ছ সীমানা

এটির জন্য, আমরা একটি ফ্রেম তৈরি করতে যাচ্ছি না বরং ভিন্ন কিছু চেষ্টা করব। আমরা একটি স্বচ্ছ অভ্যন্তরীণ সীমানা তৈরি করতে যাচ্ছি ভিতরে আমাদের ইমেজ। সম্ভবত একটি বাস্তব-বিশ্বের দৃশ্যে এটি দরকারী নয়, তবে এটি CSS মাস্কগুলির সাথে ভাল অনুশীলন।

আগের উদাহরণের মতো, আমরা দুটি গ্রেডিয়েন্টের উপর নির্ভর করতে যাচ্ছি: a linear-gradient() ভিতরের অংশের জন্য, এবং ক conic-gradient() বাইরের অংশের জন্য। স্বচ্ছ সীমানা প্রভাব তৈরি করতে আমরা তাদের মধ্যে একটি স্থান ছেড়ে দেব।

img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */

  --_g: calc(100% - 2 * (var(--d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--d) var(--d), #0000 25%, #000 0)
      0 0 / calc(100% - var(--d)) calc(100% - var(--d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
}

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

গ্রেডিয়েন্ট ব্যবহার করে বাইরের বর্গক্ষেত্র তৈরি করার জন্য এখানে চারটি উপায় রয়েছে:

এটি বন্ধ করার আরও অনেক উপায় আছে, কিন্তু আপনি পয়েন্ট পাবেন।

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

আসুন আমাদের অভ্যন্তরীণ স্বচ্ছ সীমানায় ফিরে যাই এবং হোভার প্রভাবে খনন করি। যদি আপনি লক্ষ্য না করেন, সেখানে একটি শীতল হোভার প্রভাব রয়েছে যা a ব্যবহার করে সেই স্বচ্ছ সীমানাকে সরিয়ে দেয় font-size কৌশল ধারণা হল সংজ্ঞায়িত করা --d এর মান সহ পরিবর্তনশীল 1em. এই ভেরিয়েবল প্রান্ত থেকে সীমানার দূরত্ব নিয়ন্ত্রণ করে। আমরা এই মত রূপান্তর করতে পারেন:

--_d: calc(var(--d) + var(--s) * 1em)

...আমাদের নিম্নলিখিত আপডেট করা CSS প্রদান:

img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */
  --o: 15px; /* the offset on hover */
  --s: 1;    /* the direction of the hover effect (+1 or -1)*/

  --_d: calc(var(--d) + var(--s) * 1em);
  --_g: calc(100% - 2 * (var(--_d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--_d) var(--_d), #0000 25%, #000 0)
     0 0 / calc(100% - var(--_d)) calc(100% - var(--_d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
  font-size: 0;
  transition: .35s;
}
img:hover {
  font-size: var(--o);
}

সার্জারির font-size প্রাথমিকভাবে সমান 0 তাই 1em সমান 0 এবং --_d সমান হতে হবে --d. হোভার উপর, যদিও, font-size একটি দ্বারা সংজ্ঞায়িত একটি মানের সমান --o পরিবর্তনশীল যা বর্ডার অফসেট সেট করে। এই, ঘুরে, আপডেট --_d পরিবর্তনশীল, অফসেট দ্বারা সীমানা সরানো. তারপর আমি আরেকটি পরিবর্তনশীল যোগ করি, --s, চিহ্নটি নিয়ন্ত্রণ করতে যা সিদ্ধান্ত নেয় যে সীমানা ভিতরে বা বাইরে চলে যায় কিনা।

সার্জারির font-size কৌশলটি সত্যিই দরকারী যদি আমরা এমন বৈশিষ্ট্যগুলিকে অ্যানিমেট করতে চাই যা অন্যথায় অনির্বাণযোগ্য। সঙ্গে সংজ্ঞায়িত কাস্টম বৈশিষ্ট্য @property এই সমাধান করতে পারেন কিন্তু এর জন্য সমর্থন আমি যখন এটি লিখছি তখন এখনও অভাব রয়েছে।

ফ্রেম প্রকাশ

আমরা এই সিরিজের প্রথম অংশে নিম্নলিখিত প্রকাশ অ্যানিমেশন তৈরি করেছি:

আমরা একই ধারণা নিতে পারি, তবে একটি কঠিন রঙের সীমানার পরিবর্তে আমরা এইরকম একটি গ্রেডিয়েন্ট ব্যবহার করব:

আপনি উভয় কোড তুলনা করলে আপনি নিম্নলিখিত পরিবর্তনগুলি লক্ষ্য করবেন:

1. আমি ভিতরে প্রথম উদাহরণ থেকে একই গ্রেডিয়েন্ট কনফিগারেশন ব্যবহার করেছি mask সম্পত্তি আমি সহজভাবে থেকে গ্রেডিয়েন্ট সরানো background সম্পত্তি mask সম্পত্তি।
2. আমি একটি যোগ repeating-linear-gradient() গ্রেডিয়েন্ট সীমানা তৈরি করতে।

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

/* Solid color border */

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

  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;
}

/* Gradient color border */

img {
  --b: 10px; /* the border thickness*/
  --g: 5px;  /* the gap on hover */
  background: repeating-linear-gradient(135deg, #F8CA00 0 10px, #E97F02 0 20px, #BD1550 0 30px);

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, #000 0;
  mask: 
    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,
    linear-gradient(#000 0 0) content-box;
  transition: .3s, mask-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, mask-size .3s .3s;
}

আরেকটি ফ্রেম অ্যানিমেশন চেষ্টা করা যাক। এটি একটি আছে হিসাবে এটি একটি বিট চতুর তিন-পদক্ষেপ অ্যানিমেশন:

অ্যানিমেশনের প্রথম ধাপ হল নীচের প্রান্তটি বড় করা। এই জন্য, আমরা সামঞ্জস্য background-size একটি linear-gradient():

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

দ্বিতীয় ধাপের জন্য, আমরা বাম এবং ডান প্রান্তগুলি দেখানোর জন্য একটি দ্বিতীয় গ্রেডিয়েন্ট যোগ করি। কিন্তু এই সময়, আমরা এটি ব্যবহার করে না background-position:

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

কৌশলটি হল উপরের প্রান্তটি লুকিয়ে রাখা যতক্ষণ না আমরা নীচে এবং দিকগুলি দেখাই এবং তারপরে আমরা আপডেট করি mask-size (অথবা mask-position) উপরের অংশ দেখানোর জন্য। আমি আগে বলেছি, আমরা একই প্রভাব অর্জনের জন্য অনেক গ্রেডিয়েন্ট কনফিগারেশন খুঁজে পেতে পারি।

আমি যে গ্রেডিয়েন্টগুলি ব্যবহার করব তার একটি চিত্র এখানে রয়েছে:

আমি দুটি কনিক গ্রেডিয়েন্ট ব্যবহার করছি যার প্রস্থ সমান 200%. উভয় গ্রেডিয়েন্ট এলাকাটি ঢেকে রাখে শুধুমাত্র উপরের অংশটি অনাবৃত রেখে (সে অংশটি পরে অদৃশ্য হবে)। হোভারে, আমি সেই অংশটিকে কভার করতে উভয় গ্রেডিয়েন্ট স্লাইড করি।

এখানে একটি গ্রেডিয়েন্টের একটি ভাল দৃষ্টান্ত রয়েছে যা আপনাকে কী ঘটছে তার আরও ভাল ধারণা দিতে:

এখন আমরা ভিতরে এই রাখা mask সম্পত্তি এবং আমরা সম্পন্ন! এখানে সম্পূর্ণ কোড আছে:

img {
  --b: 6px;  /* the border thickness*/
  --g: 10px; /* the gap */
  --c: #0E8D94;

  padding: calc(var(--b) + var(--g));
  --_l: var(--c) var(--b), #0000 0 calc(100% - var(--b)), var(--c) 0;
  background:
    linear-gradient(var(--_l)) 50%/calc(100% - var(--_i,80%)) 100% no-repeat,
    linear-gradient(90deg, var(--_l)) 50% var(--_i,-100%)/100% 200% no-repeat;  
  mask:
    conic-gradient(at 50% var(--b),#0000 25%, #000 0) calc(50% + var(--_i, 50%)) / 200%,
    conic-gradient(at 50% var(--b),#000 75%, #0000 0) calc(50% - var(--_i, 50%)) / 200%;
  transition: 
    .3s calc(.6s - var(--_t,.6s)) mask-position, 
    .3s .3s background-position,
    .3s var(--_t,.6s) background-size,
    .4s transform;
  cursor: pointer;
}
img:hover {
  --_i: 0%;
  --_t: 0s;
  transform: scale(1.2);
}

আমি কোডটি অপ্টিমাইজ করার জন্য কিছু ভেরিয়েবলও চালু করেছি, তবে আপনার এখনই এটিতে অভ্যস্ত হওয়া উচিত।

একটি চার ধাপ অ্যানিমেশন সম্পর্কে কি? হ্যাঁ এটা সম্ভব!

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

মোড়ক উম্মচন

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

এই সিরিজে আমাদের আরও একটি নিবন্ধ রয়েছে। ততক্ষণ পর্যন্ত, এখানে একটি কুল হোভার প্রভাব সহ একটি বোনাস ডেমো রয়েছে যেখানে আমি ব্যবহার করি mask একটি ভাঙা ছবি একত্রিত করতে.