আমার একটি অনুরূপ ধারণা আছে কিন্তু একটি ভিন্ন উপায়ে এবং অ্যানিমেশন ছিটিয়ে মোকাবেলা করেছি। আমি মনে করি এটি বেশ ব্যবহারিক এবং একটি ঝরঝরে হোভার প্রভাব তৈরি করে যা আপনি আপনার নিজের অবতারের মতো কিছুতে ব্যবহার করতে পারেন।
ওটা দেখ? আমরা একটি স্কেলিং অ্যানিমেশন তৈরি করতে যাচ্ছি যেখানে অবতারটি যে বৃত্তের মধ্যে রয়েছে তার ঠিক বাইরে পপ বলে মনে হচ্ছে। দুর্দান্ত, তাই না? কোডের দিকে তাকান না এবং আসুন ধাপে ধাপে একসাথে এই অ্যানিমেশনটি তৈরি করি।
এইচটিএমএল: শুধু একটি উপাদান
আপনি যদি ডেমোর কোড চেক না করে থাকেন এবং আপনি ভাবছেন কতগুলো divএটি লাগবে, তারপর সেখানেই থামুন, কারণ আমাদের মার্কআপটি একটি একক চিত্র উপাদান ছাড়া আর কিছুই নয়:
<img src="" alt="">
হ্যাঁ, একটি একক উপাদান! এই অনুশীলনের চ্যালেঞ্জিং অংশ হল সবচেয়ে কম পরিমাণ কোড ব্যবহার করা। যদি আপনি হয়ে থাকেন আমাকে অনুসরন কর কিছু সময়ের জন্য, আপনি এটি অভ্যস্ত করা উচিত. আমি CSS সমাধানগুলি খুঁজে বের করার জন্য কঠোর চেষ্টা করি যা সম্ভব ক্ষুদ্রতম, সবচেয়ে রক্ষণাবেক্ষণযোগ্য কোড দিয়ে অর্জন করা যেতে পারে।
আমি লিখেছিলাম নিবন্ধের একটি সিরিজ এখানে CSS-Tricks-এ যেখানে আমি একটি একক উপাদান সমন্বিত একই HTML মার্কআপ ব্যবহার করে বিভিন্ন হোভার প্রভাব অন্বেষণ করি। আমি গ্রেডিয়েন্ট, মাস্কিং, ক্লিপিং, রূপরেখা এবং এমনকি লেআউট কৌশলগুলিতে বিশদে যাই। আমি সেগুলি পরীক্ষা করার জন্য অত্যন্ত সুপারিশ করছি কারণ আমি এই পোস্টে অনেক কৌশল পুনরায় ব্যবহার করব।
একটি স্বচ্ছ ব্যাকগ্রাউন্ড সহ বর্গাকার একটি চিত্র ফাইল আমরা যা করছি তার জন্য সবচেয়ে ভাল কাজ করবে। আপনি যদি এটি দিয়ে শুরু করতে চান তবে আমি এটি ব্যবহার করছি।
আমি বাস্তব চিত্র ব্যবহার করে যতটা সম্ভব এর অনেক উদাহরণ দেখতে আশা করছি — তাই আপনার কাজ শেষ হলে অনুগ্রহ করে আপনার চূড়ান্ত ফলাফল মন্তব্যে শেয়ার করুন যাতে আমরা একটি সংগ্রহ তৈরি করতে পারি!
সিএসএস-এ ঝাঁপ দেওয়ার আগে, প্রথমে প্রভাবটি ব্যবচ্ছেদ করা যাক। ছবিটি হোভারে বড় হয়ে যায়, তাই আমরা নিশ্চিতভাবে ব্যবহার করব transform: scale() সেখানে. অবতারের পিছনে একটি বৃত্ত রয়েছে এবং একটি রেডিয়াল গ্রেডিয়েন্টের কৌশলটি করা উচিত। অবশেষে, আমাদের বৃত্তের নীচে একটি সীমানা তৈরি করার একটি উপায় দরকার যা বৃত্তের পিছনে অবতারের চেহারা তৈরি করে।
আমরা বলেছিলাম যে পটভূমি একটি রেডিয়াল গ্রেডিয়েন্ট হবে। এটি নিখুঁত কারণ আমরা একটি রেডিয়াল গ্রেডিয়েন্টের রঙের মধ্যে হার্ড স্টপ তৈরি করতে পারি, যা দেখে মনে হয় আমরা শক্ত রেখা সহ একটি বৃত্ত আঁকছি।
CSS ভেরিয়েবল নোট করুন, --b, আমি সেখানে ব্যবহার করছি. এটি "সীমান্ত" এর পুরুত্বের প্রতিনিধিত্ব করে যা সত্যিই রেডিয়াল গ্রেডিয়েন্টের লাল অংশের জন্য হার্ড রঙের স্টপগুলিকে সংজ্ঞায়িত করতে ব্যবহৃত হচ্ছে।
পরবর্তী ধাপ হল হোভারে গ্রেডিয়েন্ট সাইজ নিয়ে খেলা। চিত্রটি বড় হওয়ার সাথে সাথে বৃত্তটিকে তার আকার রাখতে হবে। যেহেতু আমরা একটি আবেদন করছি scale() রূপান্তর, আমরা আসলে প্রয়োজন হ্রাস বৃত্তের আকার কারণ এটি অন্যথায় অবতারের সাথে স্কেল করে। সুতরাং, ইমেজ স্কেল আপ করার সময়, আমাদের নিচে স্কেল করার জন্য গ্রেডিয়েন্ট প্রয়োজন।
একটি CSS ভেরিয়েবল সংজ্ঞায়িত করে শুরু করা যাক, --f, এটি "স্কেল ফ্যাক্টর" সংজ্ঞায়িত করে এবং বৃত্তের আকার সেট করতে এটি ব্যবহার করুন। আমি ব্যাবহার করছি 1 ডিফল্ট মান হিসাবে, যেটি চিত্রের প্রাথমিক স্কেল এবং যে বৃত্ত থেকে আমরা রূপান্তর করি।
কৌশলটি বোঝানোর জন্য এখানে একটি ডেমো রয়েছে। পর্দার আড়ালে কী ঘটছে তা দেখতে হোভার করুন:
আমি একটি তৃতীয় রং যোগ radial-gradient হোভারে গ্রেডিয়েন্টের ক্ষেত্রটি আরও ভালভাবে সনাক্ত করতে:
এখন আমাদের বৃত্তের কেন্দ্রে আমাদের পটভূমি স্থাপন করতে হবে এবং নিশ্চিত করতে হবে যে এটি সম্পূর্ণ উচ্চতা পর্যন্ত নেয়। আমি সরাসরি সবকিছু ঘোষণা করতে চাই background শর্টহ্যান্ড প্রপার্টি, যাতে আমরা আমাদের ব্যাকগ্রাউন্ড পজিশনিং যোগ করতে পারি এবং নিশ্চিত করতে পারি যে এটির ঠিক পরে সেই মানগুলিতে ট্যাক করে এটি পুনরাবৃত্তি না হয় radial-gradient():
পটভূমি কেন্দ্রে স্থাপন করা হয় (50%), এর সমান প্রস্থ রয়েছে calc(100%/var(--f)), এবং সমান উচ্চতা আছে 100%.
কিছুই দাঁড়িপাল্লা যখন --f সমান 1 — আবার, আমাদের প্রাথমিক স্কেল। এদিকে, গ্রেডিয়েন্ট ধারকটির সম্পূর্ণ প্রস্থ গ্রহণ করে। যখন আমরা বাড়াই --f, উপাদানের আকার বৃদ্ধি পায় — ধন্যবাদ scale() রূপান্তর — এবং গ্রেডিয়েন্টের আকার হ্রাস পায়।
আমরা যখন আমাদের ডেমোতে এই সমস্ত প্রয়োগ করি তখন আমরা যা পাই তা এখানে:
আমরা কাছাকাছি পেয়ে যাচ্ছি! আমাদের উপরে ওভারফ্লো প্রভাব রয়েছে, তবে আমাদের এখনও চিত্রের নীচের অংশটি লুকিয়ে রাখতে হবে, তাই মনে হচ্ছে এটি সামনে বসার পরিবর্তে বৃত্ত থেকে বেরিয়ে আসছে। এটি এই পুরো জিনিসটির চতুর অংশ এবং এটিই আমরা পরবর্তী করতে যাচ্ছি।
নীচের সীমানা
আমি প্রথম এর সাথে এটি মোকাবেলা করার চেষ্টা করেছি border-bottom সম্পত্তি, কিন্তু আমি বৃত্তের আকারের সাথে সীমানার আকার মেলানোর উপায় খুঁজে পাইনি। আমি যা পেতে পারি তা এখানে রয়েছে এবং আপনি অবিলম্বে এটি ভুল দেখতে পাবেন:
প্রকৃত সমাধান ব্যবহার করা হয় outline সম্পত্তি হ্যাঁ, outline, না border. মধ্যে একটি পূর্ববর্তী নিবন্ধ, আমি দেখাই কিভাবে outline শক্তিশালী এবং আমাদের শান্ত হোভার প্রভাব তৈরি করতে দেয়। একত্রে বা মিশ্রিত outline-offset, আমাদের প্রভাবের জন্য আমাদের যা প্রয়োজন তা আমাদের কাছে রয়েছে।
ধারণা একটি সেট করা হয় outline চিত্রে এবং নীচের সীমানা তৈরি করতে এর অফসেট সামঞ্জস্য করুন। অফসেট স্কেলিং ফ্যাক্টরের উপর নির্ভর করবে যেভাবে গ্রেডিয়েন্ট সাইজ করেছে।
এখন আমাদের নীচের "সীমানা" (আসলে একটি outline) একটি পূর্ণ বৃত্ত তৈরি করতে গ্রেডিয়েন্ট দ্বারা তৈরি "সীমানা" এর সাথে মিলিত হয়। আমরা এখনও অংশ লুকাতে হবে outline (উপর থেকে এবং পাশ থেকে), যা আমরা কিছুক্ষণের মধ্যে পেয়ে যাব।
এখানে এখন পর্যন্ত আমাদের কোড রয়েছে, আরও কয়েকটি সিএসএস ভেরিয়েবল সহ আপনি চিত্রের আকার কনফিগার করতে ব্যবহার করতে পারেন (--s) এবং "সীমান্ত" রঙ (--c):
যেহেতু আমাদের একটি বৃত্তাকার নীচের সীমানা প্রয়োজন, আমরা একটি যোগ করেছি border-radius নীচের দিকে, অনুমতি দেয় outline গ্রেডিয়েন্টের বক্রতা মেলে।
উপর ব্যবহৃত গণনা outline-offset এটা দেখতে অনেক বেশি সোজা. গতানুগতিক, outline টানা হয় বাহিরে উপাদানের বাক্সের। এবং আমাদের ক্ষেত্রে, আমরা এটি প্রয়োজন উপরে জড়ান উপাদান আরও স্পষ্টভাবে, গ্রেডিয়েন্ট দ্বারা তৈরি বৃত্তটি অনুসরণ করার জন্য আমাদের এটি প্রয়োজন।
যখন আমরা উপাদানটি স্কেল করি, তখন আমরা বৃত্ত এবং প্রান্তের মধ্যে স্থান দেখতে পাই। আসুন ভুলে গেলে চলবে না যে স্কেল ট্রান্সফরমেশন চলার পরে বৃত্তটিকে একই আকারে রাখা ধারণাটি হল, যা আমাদের কাছে সেই স্থানটি ছেড়ে দেয় যা আমরা উপরের চিত্রে চিত্রিত হিসাবে রূপরেখার অফসেটকে সংজ্ঞায়িত করতে ব্যবহার করব।
আসুন ভুলে যাবেন না যে দ্বিতীয় উপাদানটি স্কেল করা হয়েছে, তাই আমাদের ফলাফলটিও স্কেল করা হয়েছে… যার মানে আমাদের ফলাফলকে ভাগ করতে হবে f প্রকৃত অফসেট মান পেতে:
Offset = ((f - 1) * S/2) / f = (1 - 1/f) * S/2
আমরা একটি নেতিবাচক চিহ্ন যোগ করি যেহেতু আমাদের বাইরে থেকে ভিতরে যেতে রূপরেখা প্রয়োজন:
Offset = (1/f - 1) * S/2
এখানে একটি দ্রুত ডেমো যা দেখায় কিভাবে রূপরেখা গ্রেডিয়েন্ট অনুসরণ করে:
আপনি এটি ইতিমধ্যেই দেখতে পাচ্ছেন, তবে বৃত্তটিকে ওভারল্যাপ করার জন্য এটির মাধ্যমে রক্তপাত না করে আমাদের এখনও নীচের রূপরেখা প্রয়োজন৷ আমরা অফসেট থেকে সীমানার আকার সরিয়ে এটি করতে পারি:
যে শীর্ষ প্যাডিং কোন বিশেষ যুক্তি আছে. ধারণাটি নিশ্চিত করা যে রূপরেখাটি অবতারের মাথায় স্পর্শ না করে। সর্বদা একই অনুপাত থাকতে সেই স্থানটিকে সংজ্ঞায়িত করতে আমি উপাদানটির আকার ব্যবহার করেছি।
উল্লেখ্য আমি যোগ করেছি content-box মান background:
আমাদের এটির প্রয়োজন কারণ আমরা প্যাডিং যোগ করেছি এবং আমরা শুধুমাত্র বিষয়বস্তু বাক্সে ব্যাকগ্রাউন্ড সেট করতে চাই, তাই আমাদের অবশ্যই ব্যাকগ্রাউন্ডটিকে সেখানে থামতে স্পষ্টভাবে বলতে হবে।
মিশ্রণে CSS মাস্ক যোগ করা হচ্ছে
আমরা শেষ অংশে পৌঁছেছি! আমাদের যা করতে হবে তা হল কিছু টুকরো লুকিয়ে রাখা, এবং আমরা হয়েছি। এই জন্য, আমরা উপর নির্ভর করবে mask সম্পত্তি এবং, অবশ্যই, গ্রেডিয়েন্ট।
আমাদের কী লুকাতে হবে বা আরও নির্ভুল হতে কী দেখাতে হবে তা বোঝানোর জন্য এখানে একটি চিত্র রয়েছে৷
বাম চিত্র আমাদের বর্তমানে আছে, এবং ডান আমরা কি চাই. সবুজ অংশটি মুখোশটি চিত্রিত করে যা চূড়ান্ত ফলাফল পেতে আমাদের অবশ্যই আসল চিত্রটিতে প্রয়োগ করতে হবে।
আমরা আমাদের মুখোশের দুটি অংশ সনাক্ত করতে পারি:
নীচের দিকে একটি বৃত্তাকার অংশ যা রেডিয়াল গ্রেডিয়েন্টের মতো একই মাত্রা এবং বক্রতা রয়েছে যা আমরা অবতারের পিছনে বৃত্ত তৈরি করতে ব্যবহার করি
শীর্ষে একটি আয়তক্ষেত্র যা আউটলাইনের ভিতরের এলাকাটিকে কভার করে। উপরের অংশে সবুজ এলাকার বাইরে রূপরেখাটি কীভাবে রয়েছে তা লক্ষ্য করুন - এটি সবচেয়ে গুরুত্বপূর্ণ অংশ, কারণ এটি আউটলাইনটি কাটার অনুমতি দেয় যাতে কেবল নীচের অংশটি দৃশ্যমান হয়।
এর যে ভেঙ্গে দেওয়া যাক mask সম্পত্তি শুরুর জন্য, একটি অনুরূপ যে লক্ষ্য করুন radial-gradient() থেকে background সম্পত্তি আছে. আমি একটি নতুন ভেরিয়েবল তৈরি করেছি, --_g, সাধারণ অংশগুলি যাতে কম বিশৃঙ্খল হয়।
এটি মুখোশের আয়তক্ষেত্র অংশ তৈরি করে। এর প্রস্থ রেডিয়াল গ্রেডিয়েন্টের প্রস্থ বিয়োগ সীমানার পুরুত্বের দ্বিগুণ সমান:
calc(100% / var(--f) - 2 * var(--b))
আয়তক্ষেত্রের উচ্চতা অর্ধেকের সমান, 50%, উপাদান এর আকার.
আমাদের অনুভূমিক কেন্দ্রে স্থাপিত রৈখিক গ্রেডিয়েন্টও প্রয়োজন (50%) এবং আউটলাইনের অফসেটের মতো একই মান দ্বারা উপরের থেকে অফসেট। আমি আরেকটি CSS ভেরিয়েবল তৈরি করেছি, --_o, অফসেটের জন্য আমরা পূর্বে সংজ্ঞায়িত করেছি:
এখানে বিভ্রান্তিকর জিনিসগুলির মধ্যে একটি হল আমাদের একটি প্রয়োজন নেতিবাচক রূপরেখার জন্য অফসেট (বাইরে থেকে ভিতরে সরানোর জন্য) কিন্তু ক ধনাত্মক গ্রেডিয়েন্টের জন্য অফসেট (উপর থেকে নীচে সরানোর জন্য)। সুতরাং, আপনি যদি ভাবছেন কেন আমরা অফসেটকে গুণ করি, --_o, দ্বারা -1, আচ্ছা, এখন আপনি জানেন!
এখানে মুখোশের গ্রেডিয়েন্ট কনফিগারেশন চিত্রিত করার জন্য একটি ডেমো রয়েছে:
উপরেরটি হোভার করুন এবং দেখুন কিভাবে সবকিছু একসাথে চলে। মাঝের বাক্সটি দুটি গ্রেডিয়েন্টের সমন্বয়ে গঠিত মুখোশের স্তরটিকে চিত্রিত করে। এটিকে বাম চিত্রের দৃশ্যমান অংশ হিসাবে কল্পনা করুন এবং আপনি ডানদিকে চূড়ান্ত ফলাফল পাবেন!
মোড়ক উম্মচন
উফ, আমরা শেষ! এবং আমরা শুধুমাত্র একটি স্লিক হোভার অ্যানিমেশন দিয়েই শেষ করিনি, কিন্তু আমরা এটি একটি একক HTML দিয়ে করেছি <img> উপাদান আর মাত্র ২০ লাইনেরও কম CSS কারসাজি!
অবশ্যই, আমরা এই ধরনের জটিল প্রভাবে পৌঁছানোর জন্য কিছু ছোট কৌশল এবং গণিত সূত্রের উপর নির্ভর করেছি। কিন্তু আমরা ঠিক জানতাম কি করতে হবে যেহেতু আমরা যে টুকরোগুলোকে সামনের দিকে প্রয়োজন তা চিহ্নিত করেছি।
আমরা নিজেদেরকে আরো HTML অনুমতি দিলে আমরা কি সিএসএসকে সরলীকরণ করতে পারতাম? একেবারে। কিন্তু আমরা এখানে নতুন CSS কৌশল শিখতে এসেছি! CSS গ্রেডিয়েন্ট, মাস্কিং, অন্বেষণ করার জন্য এটি একটি ভাল অনুশীলন ছিল outline সম্পত্তির আচরণ, রূপান্তর এবং আরও অনেক কিছু। আপনি যে কোনো সময়ে হারিয়ে অনুভব করেন, তারপর স্পষ্টভাবে চেক আউট আমার সিরিজ যে একই সাধারণ ধারণা ব্যবহার করে। এটি কখনও কখনও আরও উদাহরণ দেখতে এবং একটি পয়েন্ট হোম চালাতে কেস ব্যবহার করতে সহায়তা করে।
আমি আপনাকে একটি শেষ ডেমো দিয়ে দেব যা জনপ্রিয় CSS ডেভেলপারদের ফটো ব্যবহার করে। আপনার নিজের ইমেজ সহ আমাকে একটি ডেমো দেখাতে ভুলবেন না যাতে আমি এটি সংগ্রহে যোগ করতে পারি!
আপনার অবতারের জন্য একটি অভিনব হোভার প্রভাব
প্লেটো দ্বারা প্রকাশিত
আপনি কি এমন প্রভাব জানেন যেখানে কারও মাথা বৃত্ত বা গর্ত দিয়ে খোঁচাচ্ছে? বিখ্যাত পোর্কি পিগ অ্যানিমেশন যেখানে তিনি লাল রিংগুলির একটি সিরিজ থেকে পপ আউট করার সময় বিদায় জানাচ্ছেন এটি নিখুঁত উদাহরণ এবং কিলিয়ান ভালখফ আসলে কিছুক্ষণ আগে CSS-Tricks-এ এটিকে পুনরায় তৈরি করেছেন.
আমার একটি অনুরূপ ধারণা আছে কিন্তু একটি ভিন্ন উপায়ে এবং অ্যানিমেশন ছিটিয়ে মোকাবেলা করেছি। আমি মনে করি এটি বেশ ব্যবহারিক এবং একটি ঝরঝরে হোভার প্রভাব তৈরি করে যা আপনি আপনার নিজের অবতারের মতো কিছুতে ব্যবহার করতে পারেন।
ওটা দেখ? আমরা একটি স্কেলিং অ্যানিমেশন তৈরি করতে যাচ্ছি যেখানে অবতারটি যে বৃত্তের মধ্যে রয়েছে তার ঠিক বাইরে পপ বলে মনে হচ্ছে। দুর্দান্ত, তাই না? কোডের দিকে তাকান না এবং আসুন ধাপে ধাপে একসাথে এই অ্যানিমেশনটি তৈরি করি।
এইচটিএমএল: শুধু একটি উপাদান
আপনি যদি ডেমোর কোড চেক না করে থাকেন এবং আপনি ভাবছেন কতগুলো
divএটি লাগবে, তারপর সেখানেই থামুন, কারণ আমাদের মার্কআপটি একটি একক চিত্র উপাদান ছাড়া আর কিছুই নয়:হ্যাঁ, একটি একক উপাদান! এই অনুশীলনের চ্যালেঞ্জিং অংশ হল সবচেয়ে কম পরিমাণ কোড ব্যবহার করা। যদি আপনি হয়ে থাকেন আমাকে অনুসরন কর কিছু সময়ের জন্য, আপনি এটি অভ্যস্ত করা উচিত. আমি CSS সমাধানগুলি খুঁজে বের করার জন্য কঠোর চেষ্টা করি যা সম্ভব ক্ষুদ্রতম, সবচেয়ে রক্ষণাবেক্ষণযোগ্য কোড দিয়ে অর্জন করা যেতে পারে।
আমি লিখেছিলাম নিবন্ধের একটি সিরিজ এখানে CSS-Tricks-এ যেখানে আমি একটি একক উপাদান সমন্বিত একই HTML মার্কআপ ব্যবহার করে বিভিন্ন হোভার প্রভাব অন্বেষণ করি। আমি গ্রেডিয়েন্ট, মাস্কিং, ক্লিপিং, রূপরেখা এবং এমনকি লেআউট কৌশলগুলিতে বিশদে যাই। আমি সেগুলি পরীক্ষা করার জন্য অত্যন্ত সুপারিশ করছি কারণ আমি এই পোস্টে অনেক কৌশল পুনরায় ব্যবহার করব।
একটি স্বচ্ছ ব্যাকগ্রাউন্ড সহ বর্গাকার একটি চিত্র ফাইল আমরা যা করছি তার জন্য সবচেয়ে ভাল কাজ করবে। আপনি যদি এটি দিয়ে শুরু করতে চান তবে আমি এটি ব্যবহার করছি।
আমি বাস্তব চিত্র ব্যবহার করে যতটা সম্ভব এর অনেক উদাহরণ দেখতে আশা করছি — তাই আপনার কাজ শেষ হলে অনুগ্রহ করে আপনার চূড়ান্ত ফলাফল মন্তব্যে শেয়ার করুন যাতে আমরা একটি সংগ্রহ তৈরি করতে পারি!
সিএসএস-এ ঝাঁপ দেওয়ার আগে, প্রথমে প্রভাবটি ব্যবচ্ছেদ করা যাক। ছবিটি হোভারে বড় হয়ে যায়, তাই আমরা নিশ্চিতভাবে ব্যবহার করব
transform: scale()সেখানে. অবতারের পিছনে একটি বৃত্ত রয়েছে এবং একটি রেডিয়াল গ্রেডিয়েন্টের কৌশলটি করা উচিত। অবশেষে, আমাদের বৃত্তের নীচে একটি সীমানা তৈরি করার একটি উপায় দরকার যা বৃত্তের পিছনে অবতারের চেহারা তৈরি করে।চল কাজ করা যাক!
স্কেল প্রভাব
ট্রান্সফর্ম যোগ করে শুরু করা যাক:
এখনও জটিল কিছুই, তাই না? চল এগোই.
চক্র
আমরা বলেছিলাম যে পটভূমি একটি রেডিয়াল গ্রেডিয়েন্ট হবে। এটি নিখুঁত কারণ আমরা একটি রেডিয়াল গ্রেডিয়েন্টের রঙের মধ্যে হার্ড স্টপ তৈরি করতে পারি, যা দেখে মনে হয় আমরা শক্ত রেখা সহ একটি বৃত্ত আঁকছি।
CSS ভেরিয়েবল নোট করুন,
--b, আমি সেখানে ব্যবহার করছি. এটি "সীমান্ত" এর পুরুত্বের প্রতিনিধিত্ব করে যা সত্যিই রেডিয়াল গ্রেডিয়েন্টের লাল অংশের জন্য হার্ড রঙের স্টপগুলিকে সংজ্ঞায়িত করতে ব্যবহৃত হচ্ছে।পরবর্তী ধাপ হল হোভারে গ্রেডিয়েন্ট সাইজ নিয়ে খেলা। চিত্রটি বড় হওয়ার সাথে সাথে বৃত্তটিকে তার আকার রাখতে হবে। যেহেতু আমরা একটি আবেদন করছি
scale()রূপান্তর, আমরা আসলে প্রয়োজন হ্রাস বৃত্তের আকার কারণ এটি অন্যথায় অবতারের সাথে স্কেল করে। সুতরাং, ইমেজ স্কেল আপ করার সময়, আমাদের নিচে স্কেল করার জন্য গ্রেডিয়েন্ট প্রয়োজন।একটি CSS ভেরিয়েবল সংজ্ঞায়িত করে শুরু করা যাক,
--f, এটি "স্কেল ফ্যাক্টর" সংজ্ঞায়িত করে এবং বৃত্তের আকার সেট করতে এটি ব্যবহার করুন। আমি ব্যাবহার করছি1ডিফল্ট মান হিসাবে, যেটি চিত্রের প্রাথমিক স্কেল এবং যে বৃত্ত থেকে আমরা রূপান্তর করি।কৌশলটি বোঝানোর জন্য এখানে একটি ডেমো রয়েছে। পর্দার আড়ালে কী ঘটছে তা দেখতে হোভার করুন:
আমি একটি তৃতীয় রং যোগ
radial-gradientহোভারে গ্রেডিয়েন্টের ক্ষেত্রটি আরও ভালভাবে সনাক্ত করতে:এখন আমাদের বৃত্তের কেন্দ্রে আমাদের পটভূমি স্থাপন করতে হবে এবং নিশ্চিত করতে হবে যে এটি সম্পূর্ণ উচ্চতা পর্যন্ত নেয়। আমি সরাসরি সবকিছু ঘোষণা করতে চাই
backgroundশর্টহ্যান্ড প্রপার্টি, যাতে আমরা আমাদের ব্যাকগ্রাউন্ড পজিশনিং যোগ করতে পারি এবং নিশ্চিত করতে পারি যে এটির ঠিক পরে সেই মানগুলিতে ট্যাক করে এটি পুনরাবৃত্তি না হয়radial-gradient():পটভূমি কেন্দ্রে স্থাপন করা হয় (
50%), এর সমান প্রস্থ রয়েছেcalc(100%/var(--f)), এবং সমান উচ্চতা আছে100%.কিছুই দাঁড়িপাল্লা যখন
--fসমান1— আবার, আমাদের প্রাথমিক স্কেল। এদিকে, গ্রেডিয়েন্ট ধারকটির সম্পূর্ণ প্রস্থ গ্রহণ করে। যখন আমরা বাড়াই--f, উপাদানের আকার বৃদ্ধি পায় — ধন্যবাদscale()রূপান্তর — এবং গ্রেডিয়েন্টের আকার হ্রাস পায়।আমরা যখন আমাদের ডেমোতে এই সমস্ত প্রয়োগ করি তখন আমরা যা পাই তা এখানে:
আমরা কাছাকাছি পেয়ে যাচ্ছি! আমাদের উপরে ওভারফ্লো প্রভাব রয়েছে, তবে আমাদের এখনও চিত্রের নীচের অংশটি লুকিয়ে রাখতে হবে, তাই মনে হচ্ছে এটি সামনে বসার পরিবর্তে বৃত্ত থেকে বেরিয়ে আসছে। এটি এই পুরো জিনিসটির চতুর অংশ এবং এটিই আমরা পরবর্তী করতে যাচ্ছি।
নীচের সীমানা
আমি প্রথম এর সাথে এটি মোকাবেলা করার চেষ্টা করেছি
border-bottomসম্পত্তি, কিন্তু আমি বৃত্তের আকারের সাথে সীমানার আকার মেলানোর উপায় খুঁজে পাইনি। আমি যা পেতে পারি তা এখানে রয়েছে এবং আপনি অবিলম্বে এটি ভুল দেখতে পাবেন:প্রকৃত সমাধান ব্যবহার করা হয়
outlineসম্পত্তি হ্যাঁ,outline, নাborder. মধ্যে একটি পূর্ববর্তী নিবন্ধ, আমি দেখাই কিভাবেoutlineশক্তিশালী এবং আমাদের শান্ত হোভার প্রভাব তৈরি করতে দেয়। একত্রে বা মিশ্রিতoutline-offset, আমাদের প্রভাবের জন্য আমাদের যা প্রয়োজন তা আমাদের কাছে রয়েছে।ধারণা একটি সেট করা হয়
outlineচিত্রে এবং নীচের সীমানা তৈরি করতে এর অফসেট সামঞ্জস্য করুন। অফসেট স্কেলিং ফ্যাক্টরের উপর নির্ভর করবে যেভাবে গ্রেডিয়েন্ট সাইজ করেছে।এখন আমাদের নীচের "সীমানা" (আসলে একটি
outline) একটি পূর্ণ বৃত্ত তৈরি করতে গ্রেডিয়েন্ট দ্বারা তৈরি "সীমানা" এর সাথে মিলিত হয়। আমরা এখনও অংশ লুকাতে হবেoutline(উপর থেকে এবং পাশ থেকে), যা আমরা কিছুক্ষণের মধ্যে পেয়ে যাব।এখানে এখন পর্যন্ত আমাদের কোড রয়েছে, আরও কয়েকটি সিএসএস ভেরিয়েবল সহ আপনি চিত্রের আকার কনফিগার করতে ব্যবহার করতে পারেন (
--s) এবং "সীমান্ত" রঙ (--c):যেহেতু আমাদের একটি বৃত্তাকার নীচের সীমানা প্রয়োজন, আমরা একটি যোগ করেছি
border-radiusনীচের দিকে, অনুমতি দেয়outlineগ্রেডিয়েন্টের বক্রতা মেলে।উপর ব্যবহৃত গণনা
outline-offsetএটা দেখতে অনেক বেশি সোজা. গতানুগতিক,outlineটানা হয় বাহিরে উপাদানের বাক্সের। এবং আমাদের ক্ষেত্রে, আমরা এটি প্রয়োজন উপরে জড়ান উপাদান আরও স্পষ্টভাবে, গ্রেডিয়েন্ট দ্বারা তৈরি বৃত্তটি অনুসরণ করার জন্য আমাদের এটি প্রয়োজন।যখন আমরা উপাদানটি স্কেল করি, তখন আমরা বৃত্ত এবং প্রান্তের মধ্যে স্থান দেখতে পাই। আসুন ভুলে গেলে চলবে না যে স্কেল ট্রান্সফরমেশন চলার পরে বৃত্তটিকে একই আকারে রাখা ধারণাটি হল, যা আমাদের কাছে সেই স্থানটি ছেড়ে দেয় যা আমরা উপরের চিত্রে চিত্রিত হিসাবে রূপরেখার অফসেটকে সংজ্ঞায়িত করতে ব্যবহার করব।
আসুন ভুলে যাবেন না যে দ্বিতীয় উপাদানটি স্কেল করা হয়েছে, তাই আমাদের ফলাফলটিও স্কেল করা হয়েছে… যার মানে আমাদের ফলাফলকে ভাগ করতে হবে
fপ্রকৃত অফসেট মান পেতে:আমরা একটি নেতিবাচক চিহ্ন যোগ করি যেহেতু আমাদের বাইরে থেকে ভিতরে যেতে রূপরেখা প্রয়োজন:
এখানে একটি দ্রুত ডেমো যা দেখায় কিভাবে রূপরেখা গ্রেডিয়েন্ট অনুসরণ করে:
আপনি এটি ইতিমধ্যেই দেখতে পাচ্ছেন, তবে বৃত্তটিকে ওভারল্যাপ করার জন্য এটির মাধ্যমে রক্তপাত না করে আমাদের এখনও নীচের রূপরেখা প্রয়োজন৷ আমরা অফসেট থেকে সীমানার আকার সরিয়ে এটি করতে পারি:
এখন আমাদের আউটলাইন থেকে উপরের অংশটি কীভাবে সরিয়ে ফেলা যায় তা খুঁজে বের করতে হবে। অন্য কথায়, আমরা শুধুমাত্র ছবির নীচের অংশ চাই
outline.প্রথমে, আসুন উপরের অংশে ওভারল্যাপ এড়াতে সাহায্য করার জন্য প্যাডিংয়ের সাথে শীর্ষে স্থান যোগ করি:
যে শীর্ষ প্যাডিং কোন বিশেষ যুক্তি আছে. ধারণাটি নিশ্চিত করা যে রূপরেখাটি অবতারের মাথায় স্পর্শ না করে। সর্বদা একই অনুপাত থাকতে সেই স্থানটিকে সংজ্ঞায়িত করতে আমি উপাদানটির আকার ব্যবহার করেছি।
উল্লেখ্য আমি যোগ করেছি
content-boxমানbackground:আমাদের এটির প্রয়োজন কারণ আমরা প্যাডিং যোগ করেছি এবং আমরা শুধুমাত্র বিষয়বস্তু বাক্সে ব্যাকগ্রাউন্ড সেট করতে চাই, তাই আমাদের অবশ্যই ব্যাকগ্রাউন্ডটিকে সেখানে থামতে স্পষ্টভাবে বলতে হবে।
মিশ্রণে CSS মাস্ক যোগ করা হচ্ছে
আমরা শেষ অংশে পৌঁছেছি! আমাদের যা করতে হবে তা হল কিছু টুকরো লুকিয়ে রাখা, এবং আমরা হয়েছি। এই জন্য, আমরা উপর নির্ভর করবে
maskসম্পত্তি এবং, অবশ্যই, গ্রেডিয়েন্ট।আমাদের কী লুকাতে হবে বা আরও নির্ভুল হতে কী দেখাতে হবে তা বোঝানোর জন্য এখানে একটি চিত্র রয়েছে৷
বাম চিত্র আমাদের বর্তমানে আছে, এবং ডান আমরা কি চাই. সবুজ অংশটি মুখোশটি চিত্রিত করে যা চূড়ান্ত ফলাফল পেতে আমাদের অবশ্যই আসল চিত্রটিতে প্রয়োগ করতে হবে।
আমরা আমাদের মুখোশের দুটি অংশ সনাক্ত করতে পারি:
এখানে আমাদের চূড়ান্ত CSS:
এর যে ভেঙ্গে দেওয়া যাক
maskসম্পত্তি শুরুর জন্য, একটি অনুরূপ যে লক্ষ্য করুনradial-gradient()থেকেbackgroundসম্পত্তি আছে. আমি একটি নতুন ভেরিয়েবল তৈরি করেছি,--_g, সাধারণ অংশগুলি যাতে কম বিশৃঙ্খল হয়।পরবর্তী, একটি আছে
linear-gradient()সেখানেও:এটি মুখোশের আয়তক্ষেত্র অংশ তৈরি করে। এর প্রস্থ রেডিয়াল গ্রেডিয়েন্টের প্রস্থ বিয়োগ সীমানার পুরুত্বের দ্বিগুণ সমান:
আয়তক্ষেত্রের উচ্চতা অর্ধেকের সমান,
50%, উপাদান এর আকার.আমাদের অনুভূমিক কেন্দ্রে স্থাপিত রৈখিক গ্রেডিয়েন্টও প্রয়োজন (
50%) এবং আউটলাইনের অফসেটের মতো একই মান দ্বারা উপরের থেকে অফসেট। আমি আরেকটি CSS ভেরিয়েবল তৈরি করেছি,--_o, অফসেটের জন্য আমরা পূর্বে সংজ্ঞায়িত করেছি:এখানে বিভ্রান্তিকর জিনিসগুলির মধ্যে একটি হল আমাদের একটি প্রয়োজন নেতিবাচক রূপরেখার জন্য অফসেট (বাইরে থেকে ভিতরে সরানোর জন্য) কিন্তু ক ধনাত্মক গ্রেডিয়েন্টের জন্য অফসেট (উপর থেকে নীচে সরানোর জন্য)। সুতরাং, আপনি যদি ভাবছেন কেন আমরা অফসেটকে গুণ করি,
--_o, দ্বারা-1, আচ্ছা, এখন আপনি জানেন!এখানে মুখোশের গ্রেডিয়েন্ট কনফিগারেশন চিত্রিত করার জন্য একটি ডেমো রয়েছে:
উপরেরটি হোভার করুন এবং দেখুন কিভাবে সবকিছু একসাথে চলে। মাঝের বাক্সটি দুটি গ্রেডিয়েন্টের সমন্বয়ে গঠিত মুখোশের স্তরটিকে চিত্রিত করে। এটিকে বাম চিত্রের দৃশ্যমান অংশ হিসাবে কল্পনা করুন এবং আপনি ডানদিকে চূড়ান্ত ফলাফল পাবেন!
মোড়ক উম্মচন
উফ, আমরা শেষ! এবং আমরা শুধুমাত্র একটি স্লিক হোভার অ্যানিমেশন দিয়েই শেষ করিনি, কিন্তু আমরা এটি একটি একক HTML দিয়ে করেছি
<img>উপাদান আর মাত্র ২০ লাইনেরও কম CSS কারসাজি!অবশ্যই, আমরা এই ধরনের জটিল প্রভাবে পৌঁছানোর জন্য কিছু ছোট কৌশল এবং গণিত সূত্রের উপর নির্ভর করেছি। কিন্তু আমরা ঠিক জানতাম কি করতে হবে যেহেতু আমরা যে টুকরোগুলোকে সামনের দিকে প্রয়োজন তা চিহ্নিত করেছি।
আমরা নিজেদেরকে আরো HTML অনুমতি দিলে আমরা কি সিএসএসকে সরলীকরণ করতে পারতাম? একেবারে। কিন্তু আমরা এখানে নতুন CSS কৌশল শিখতে এসেছি! CSS গ্রেডিয়েন্ট, মাস্কিং, অন্বেষণ করার জন্য এটি একটি ভাল অনুশীলন ছিল
outlineসম্পত্তির আচরণ, রূপান্তর এবং আরও অনেক কিছু। আপনি যে কোনো সময়ে হারিয়ে অনুভব করেন, তারপর স্পষ্টভাবে চেক আউট আমার সিরিজ যে একই সাধারণ ধারণা ব্যবহার করে। এটি কখনও কখনও আরও উদাহরণ দেখতে এবং একটি পয়েন্ট হোম চালাতে কেস ব্যবহার করতে সহায়তা করে।আমি আপনাকে একটি শেষ ডেমো দিয়ে দেব যা জনপ্রিয় CSS ডেভেলপারদের ফটো ব্যবহার করে। আপনার নিজের ইমেজ সহ আমাকে একটি ডেমো দেখাতে ভুলবেন না যাতে আমি এটি সংগ্রহে যোগ করতে পারি!
ব্যাক ফ্রম দ্য ব্রিঙ্ক: ইউনাইটেড হেলথ আক্রমণ-পরবর্তী আপডেট অফার করে
বিভ্রান্তি $250B বা তার বেশি মূল্যায়নে $2.5M-প্লাস বাড়াতে দেখায় — রিপোর্ট
ওয়ালমার্ট-সমর্থিত ফিনটেক স্টার্টআপ ওয়ান বড়-টিকিট আইটেমগুলির জন্য 'এখন কিনুন, পরে পে করুন' ঋণ চালু করেছে - টেক স্টার্টআপস
বার্লিন-ভিত্তিক কালটিমেট ফুডস নিবিড় কৃষিকাজ হ্রাস করার সময় মাংসযুক্ত স্বাদ সরবরাহ করতে €2.3 মিলিয়ন সংগ্রহ করেছে | ইইউ-স্টার্টআপস
ওকুলাস প্রতিষ্ঠাতা হরাইজন ওএস নিউজে প্রতিক্রিয়া জানিয়েছেন: "আশা করি এটি খুব বেশি দেরি নয়"
মাইক্রোসফ্ট ফি-3 মিনি দিয়ে AIকে পকেট আকারে সঙ্কুচিত করে
চীনের সঙ্গে যোগসাজশের অভিযোগে সন্দেহভাজনদের গ্রেপ্তার করেছে জার্মানি
লন্ডন-ভিত্তিক এআই রিসাইক্লিং স্টার্টআপ সর্টেড উপাদান বাছাই ফাঁক সমাধানের জন্য তহবিল £1.65M উত্থাপন করেছে – টেক স্টার্টআপস
জ্যাজ ফার্মাসিউটিক্যালস পিএলসি 90% CBD এবং THC সহ CBD প্রস্তুতির জন্য পেটেন্ট ফাইল করে – মেডিকেল মারিজুয়ানা প্রোগ্রাম সংযোগ