অভিনব চিত্র সজ্জা: রূপরেখা এবং জটিল অ্যানিমেশন

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

যদিও আমরা এটির সাথে আরও কিছু করতে পারি এবং আমি এই নিবন্ধে এটিই পরীক্ষা করতে চাই।

আসুন আমাদের প্রথম উদাহরণ দিয়ে শুরু করুন - একটি ওভারলে যা একটি দুর্দান্ত অ্যানিমেশন সহ হোভারে অদৃশ্য হয়ে যায়:

আমরা ছবিটির উপরে একটি অতিরিক্ত উপাদান যোগ করে এটি সম্পন্ন করতে পারি, কিন্তু এটিই আমরা নিজেদেরকে চ্যালেঞ্জ করছি না এই সিরিজে করতে. পরিবর্তে, আমরা CSS এর জন্য পৌঁছাতে পারি outline সম্পত্তি এবং লিভারেজ যে এটি একটি নেতিবাচক অফসেট থাকতে পারে এবং এর উপাদান ওভারল্যাপ করতে সক্ষম।

img {
  --s: 250px; /* the size of the image */
  --b: 8px;   /* the border thickness*/
  --g: 14px;  /* the gap */
  --c: #4ECDC4;

  width: var(--s);
  aspect-ratio: 1;
  outline: calc(var(--s) / 2) solid #0009;
  outline-offset: calc(var(--s) / -2);
  cursor: pointer;
  transition: 0.3s;
}
img:hover {
  outline: var(--b) solid var(--c);
  outline-offset: var(--g);
}

কৌশল একটি তৈরি করা হয় outline এটি ছবির আকারের অর্ধেক হিসাবে পুরু, তারপর একটি নেতিবাচক মান সঙ্গে অর্ধেক ছবির আকার দ্বারা অফসেট. রঙের সাথে কিছু আধা-স্বচ্ছতা যোগ করুন এবং আমাদের ওভারলে আছে!

বাকি কি হয় :hover. আমরা আপডেট outline এবং উভয় রূপরেখার মধ্যে পরিবর্তন শীতল হোভার প্রভাব তৈরি করে। একই কৌশলটি একটি বিবর্ণ প্রভাব তৈরি করতেও ব্যবহার করা যেতে পারে যেখানে আমরা সরাতে পারি না outline কিন্তু এটা স্বচ্ছ করা.

এটিতে অর্ধেক ইমেজ সাইজ ব্যবহার করার পরিবর্তে, আমি একটি খুব বড় ব্যবহার করছি outline বেধ মান (100vmax) একটি CSS মাস্ক প্রয়োগ করার সময়। এটির সাথে, চিত্রের আকার জানার আর প্রয়োজন নেই — এটি কৌশল সব আকারে কাজ করে!

ব্যবহার করে আপনি সমস্যার সম্মুখীন হতে পারেন 100vmax সাফারিতে একটি বড় মান হিসাবে। যদি এটি হয়, পূর্ববর্তী কৌশলটি বিবেচনা করুন যেখানে আপনি প্রতিস্থাপন করবেন 100vmax ছবির আকারের অর্ধেক সহ।

আমরা জিনিসগুলি আরও এগিয়ে নিতে পারি! উদাহরণস্বরূপ, অতিরিক্ত ক্লিপ করার পরিবর্তে outline, আমরা আকার তৈরি করতে পারি এবং একটি অভিনব প্রকাশ অ্যানিমেশন প্রয়োগ করতে পারি।

কুল ডান? দ্য outline হলুদ ওভারলে তৈরি করে কি. দ্য clip-path অতিরিক্ত ক্লিপ করে outline তারকা আকৃতি পেতে. তারপর, হোভারে, আমরা রঙটিকে স্বচ্ছ করে তুলব।

ওহ, আপনি পরিবর্তে হৃদয় চান? আমরা অবশ্যই তা করতে পারি!

আমরা তৈরি করতে পারি এমন সমস্ত সম্ভাব্য সমন্বয় কল্পনা করুন। আমাদের যা করতে হবে তা হল একটি CSS মাস্ক এবং/অথবা দিয়ে একটি আকৃতি আঁকতে হবে clip-path এবং এর সাথে এটি একত্রিত করুন outline কৌশল এক সমাধান, অসীম সম্ভাবনা!

এবং, হ্যাঁ, আমরা অবশ্যই এটিকে অ্যানিমেট করতে পারি। আসুন ভুলে যাই না clip-path অ্যানিমেটেবল এবং mask গ্রেডিয়েন্টের উপর নির্ভর করে — এমন কিছু যা আমরা এই সিরিজের প্রথম দুটি নিবন্ধে অত্যন্ত দুর্দান্ত বিশদে কভার করেছি।

আমি জানি, অ্যানিমেশনটি কিছুটা জটিল। এটি একটি প্রোডাকশন সাইটে ব্যবহার করা "চূড়ান্ত পণ্য" এর পরিবর্তে ধারণাটি চিত্রিত করার জন্য একটি ডেমো। আমরা আরও প্রাকৃতিক পরিবর্তনের জন্য জিনিসগুলিকে অপ্টিমাইজ করতে চাই৷

এখানে একটি ডেমো ব্যবহার করে mask পরিবর্তে. এটা সেই একটা যার সাথে আমি শেষ পর্যন্ত তোমাকে টিজ করেছি শেষ নিবন্ধ:

তুমি কি জানো? outline সম্পত্তি এত awesomeness সক্ষম ছিল? অভিনব চিত্র সজ্জার জন্য এটি আপনার টুলবক্সে যোগ করুন!

সব জিনিস একত্রিত!

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

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

মোড়ক উম্মচন

আচ্ছা, গিজ, গত কয়েক সপ্তাহ ধরে এই তিন পর্বের সিরিজে আমার সাথে আড্ডা দেওয়ার জন্য ধন্যবাদ। আমরা অনেকগুলি বিভিন্ন কৌশল অন্বেষণ করেছি যা সাধারণ চিত্রগুলিকে আকর্ষণীয় এবং ইন্টারেক্টিভ কিছুতে পরিণত করে৷ আপনি কি আমরা আচ্ছাদিত সবকিছু ব্যবহার করবেন? অবশ্যই না! কিন্তু আমার আশা হল যে গ্রেডিয়েন্টের মতো CSS বৈশিষ্ট্যগুলির উন্নত ব্যবহারগুলি খনন করার জন্য এটি আপনার জন্য একটি ভাল অনুশীলন হয়েছে, mask, clip-path, এবং outline.

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