এটি এমন একটি প্রশ্ন যা আমি প্রায়শই জিজ্ঞাসা করি: কঠিন রঙের পরিবর্তে গ্রেডিয়েন্ট থেকে ছায়া তৈরি করা কি সম্ভব? এমন কোন নির্দিষ্ট সিএসএস সম্পত্তি নেই যা এটি করে (আমাকে বিশ্বাস করুন, আমি দেখেছি) এবং আপনি এটি সম্পর্কে যে কোনও ব্লগ পোস্ট খুঁজে পান তা মূলত একটি গ্রেডিয়েন্টের আনুমানিক অনেকগুলি সিএসএস কৌশল। আমরা যাওয়ার সময় আমরা আসলে সেগুলির মধ্যে কিছু কভার করব।
কিন্তু প্রথম… অন্য গ্রেডিয়েন্ট ছায়া সম্পর্কে নিবন্ধ? সত্যিই?
হ্যাঁ, এটি এই বিষয়ে আরেকটি পোস্ট, কিন্তু এটি ভিন্ন। একসাথে, আমরা এমন একটি সমাধান পেতে সীমাবদ্ধ করতে যাচ্ছি যা এমন কিছু কভার করে যা আমি অন্য কোথাও দেখিনি: স্বচ্ছতা. বেশিরভাগ কৌশল কাজ করে যদি উপাদানটির একটি অ-স্বচ্ছ ব্যাকগ্রাউন্ড থাকে তবে আমাদের যদি স্বচ্ছ ব্যাকগ্রাউন্ড থাকে তবে কী হবে? আমরা এখানে এই কেস অন্বেষণ করব!
আমরা শুরু করার আগে, আমাকে পরিচয় করিয়ে দিন আমার গ্রেডিয়েন্ট ছায়া জেনারেটর. আপনাকে যা করতে হবে তা হল কনফিগারেশন সামঞ্জস্য করতে এবং কোডটি পেতে। তবে অনুসরণ করুন কারণ আমি আপনাকে জেনারেট করা কোডের পিছনে সমস্ত যুক্তি বুঝতে সাহায্য করতে যাচ্ছি।
সুচিপত্র
অ-স্বচ্ছ সমাধান
আসুন সমাধান দিয়ে শুরু করি যা বেশিরভাগ ক্ষেত্রে 80% এর জন্য কাজ করবে। সবচেয়ে সাধারণ ক্ষেত্রে: আপনি একটি পটভূমি সহ একটি উপাদান ব্যবহার করছেন এবং আপনাকে এটিতে একটি গ্রেডিয়েন্ট শ্যাডো যোগ করতে হবে। সেখানে বিবেচনা করার জন্য কোন স্বচ্ছতার সমস্যা নেই।
সমাধান হল একটি ছদ্ম-উপাদানের উপর নির্ভর করা যেখানে গ্রেডিয়েন্ট সংজ্ঞায়িত করা হয়েছে। আপনি এটিকে আসল উপাদানের পিছনে রাখুন এবং এটিতে একটি অস্পষ্ট ফিল্টার প্রয়োগ করুন.
.box { position: relative;
}
.box::before { content: ""; position: absolute; inset: -5px; /* control the spread */ transform: translate(10px, 8px); /* control the offsets */ z-index: -1; /* place the element behind */ background: /* your gradient here */; filter: blur(10px); /* control the blur */
}
এটি অনেক কোডের মত দেখাচ্ছে, এবং এটি কারণ এটি। আমরা একটি দিয়ে এটি কীভাবে করতে পারতাম তা এখানে box-shadow
পরিবর্তে যদি আমরা গ্রেডিয়েন্টের পরিবর্তে একটি কঠিন রঙ ব্যবহার করি।
box-shadow: 10px 8px 10px 5px orange;
এটি আপনাকে প্রথম স্নিপেটের মানগুলি কী করছে তার একটি ভাল ধারণা দেওয়া উচিত। আমরা X এবং Y অফসেট, অস্পষ্ট ব্যাসার্ধ, এবং ছড়িয়ে দূরত্ব আছে. মনে রাখবেন যে স্প্রেড দূরত্বের জন্য আমাদের একটি নেতিবাচক মান প্রয়োজন যা থেকে আসে inset
সম্পত্তি।
এখানে একটি ক্লাসিকের পাশে গ্রেডিয়েন্ট শ্যাডো দেখানো একটি ডেমো রয়েছে box-shadow
:
আপনি যদি ঘনিষ্ঠভাবে লক্ষ্য করেন তবে আপনি লক্ষ্য করবেন যে উভয় ছায়াই একটু আলাদা, বিশেষ করে অস্পষ্ট অংশ। এটি একটি আশ্চর্যজনক নয় কারণ আমি নিশ্চিত filter
সম্পত্তির অ্যালগরিদম একটির চেয়ে আলাদাভাবে কাজ করে box-shadow
. এটি একটি বড় বিষয় নয় কারণ ফলাফলটি শেষ পর্যন্ত বেশ একই রকম।
এই সমাধানটি ভাল, তবে এখনও এর সাথে সম্পর্কিত কয়েকটি ত্রুটি রয়েছে z-index: -1
ঘোষণা হ্যা এখানে "স্ট্যাকিং প্রসঙ্গ" সেখানে ঘটছে!
আমি একটি আবেদন transform
প্রধান উপাদান, এবং বুম! ছায়া আর উপাদানের নিচে নেই। এটি একটি বাগ নয় কিন্তু একটি স্ট্যাকিং প্রসঙ্গের যৌক্তিক ফলাফল। চিন্তা করবেন না, আমি স্ট্যাকিং প্রসঙ্গ সম্পর্কে একটি বিরক্তিকর ব্যাখ্যা শুরু করব না (আমি ইতিমধ্যে এটি একটি স্ট্যাক ওভারফ্লো থ্রেডে করেছি), কিন্তু আমি এখনও আপনাকে দেখাব কিভাবে এটির চারপাশে কাজ করতে হয়।
আমি প্রস্তাবিত প্রথম সমাধান একটি 3D ব্যবহার করা হয় transform
:
.box { position: relative; transform-style: preserve-3d;
}
.box::before { content: ""; position: absolute; inset: -5px; transform: translate3d(10px, 8px, -1px); /* (X, Y, Z) */ background: /* .. */; filter: blur(10px);
}
পরিবর্তে ব্যবহার z-index: -1
, আমরা Z-অক্ষ বরাবর একটি নেতিবাচক অনুবাদ ব্যবহার করব। আমরা ভিতরে সবকিছু রাখব translate3d()
। ব্যবহার করতে ভুলবেন না transform-style: preserve-3d
প্রধান উপাদান উপর; অন্যথায়, 3D transform
কার্যকর হবে না।
যতদূর আমি জানি, এই সমাধানটির কোন পার্শ্বপ্রতিক্রিয়া নেই… তবে হয়তো আপনি একটি দেখতে পাচ্ছেন। যদি এটি হয় তবে মন্তব্য বিভাগে এটি ভাগ করুন এবং এর জন্য একটি সমাধান খুঁজে বের করার চেষ্টা করা যাক!
যদি কোনো কারণে আপনি একটি 3D ব্যবহার করতে অক্ষম হন transform
, অন্য সমাধান হল দুটি ছদ্ম-উপাদানের উপর নির্ভর করা — ::before
এবং ::after
. একটি গ্রেডিয়েন্ট শ্যাডো তৈরি করে এবং অন্যটি মূল পটভূমি পুনরুত্পাদন করে (এবং অন্যান্য শৈলী আপনার প্রয়োজন হতে পারে)। এইভাবে, আমরা সহজেই উভয় ছদ্ম-উপাদানের স্ট্যাকিং অর্ডার নিয়ন্ত্রণ করতে পারি।
.box { position: relative; z-index: 0; /* We force a stacking context */
}
/* Creates the shadow */
.box::before { content: ""; position: absolute; z-index: -2; inset: -5px; transform: translate(10px, 8px); background: /* .. */; filter: blur(10px);
}
/* Reproduces the main element styles */
.box::after { content: """; position: absolute; z-index: -1; inset: 0; /* Inherit all the decorations defined on the main element */ background: inherit; border: inherit; box-shadow: inherit;
}
এটা লক্ষ্য করা গুরুত্বপূর্ণ যে আমরা আছি অত্যাচার ঘোষণা করে একটি স্ট্যাকিং প্রসঙ্গ তৈরি করতে প্রধান উপাদান z-index: 0
, বা অন্য কোন সম্পত্তি যে একই কাজ, চালু কর. এছাড়াও, ভুলে যাবেন না যে ছদ্ম-উপাদানগুলি মূল উপাদানের প্যাডিং বক্সটিকে একটি রেফারেন্স হিসাবে বিবেচনা করে। সুতরাং, যদি প্রধান উপাদানটির একটি সীমানা থাকে, তাহলে ছদ্ম-উপাদান শৈলীগুলি সংজ্ঞায়িত করার সময় আপনাকে এটি বিবেচনা করতে হবে। আপনি লক্ষ্য করবেন যে আমি ব্যবহার করছি inset: -2px
on ::after
প্রধান উপাদানে সংজ্ঞায়িত সীমানা জন্য অ্যাকাউন্ট.
আমি যেমন বলেছি, এই সমাধানটি সম্ভবত বেশিরভাগ ক্ষেত্রেই যথেষ্ট ভাল যেখানে আপনি একটি গ্রেডিয়েন্ট শ্যাডো চান, যতক্ষণ না আপনার স্বচ্ছতা সমর্থন করার দরকার নেই। কিন্তু আমরা এখানে চ্যালেঞ্জের জন্য এবং সীমাবদ্ধতার জন্য রয়েছি, তাই পরবর্তীতে যা আসছে তা আপনার প্রয়োজন না থাকলেও, আমার সাথে থাকুন। আপনি সম্ভবত নতুন CSS কৌশল শিখবেন যা আপনি অন্য কোথাও ব্যবহার করতে পারেন।
স্বচ্ছ সমাধান
3D-এ আমরা যেখান থেকে ছেড়েছিলাম সেখান থেকে শুরু করা যাক transform
এবং প্রধান উপাদান থেকে ব্যাকগ্রাউন্ড মুছে ফেলুন। আমি এমন একটি ছায়া দিয়ে শুরু করব যার অফসেট এবং স্প্রেড দূরত্ব উভয়ই সমান 0
.
ধারণাটি হল উপাদানটির এলাকার ভিতরে (সবুজ সীমানার ভিতরে) বাইরে যা আছে তা রেখে সবকিছু কাটা বা লুকানোর উপায় খুঁজে বের করা। আমরা ব্যবহার করতে যাচ্ছি clip-path
যে জন্য. কিন্তু আপনি আশ্চর্য হতে পারে কিভাবে clip-path
একটি কাটা করতে পারেন ভিতরে একটি উপাদান.
প্রকৃতপক্ষে, এটি করার কোন উপায় নেই, তবে আমরা একটি নির্দিষ্ট বহুভুজ প্যাটার্ন ব্যবহার করে এটি অনুকরণ করতে পারি:
clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax 100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,0 0)
টাডা ! আমাদের একটি গ্রেডিয়েন্ট শ্যাডো আছে যা স্বচ্ছতা সমর্থন করে। আমরা সব করেছি একটি যোগ করা হয় clip-path
আগের কোডে। বহুভুজ অংশটি চিত্রিত করার জন্য এখানে একটি চিত্র রয়েছে।
নীল এলাকাটি প্রয়োগ করার পরে দৃশ্যমান অংশ clip-path
. আমি ধারণাটি ব্যাখ্যা করার জন্য শুধুমাত্র নীল রঙ ব্যবহার করছি, কিন্তু বাস্তবে, আমরা কেবল সেই এলাকার ভিতরে ছায়া দেখতে পাব। আপনি দেখতে পাচ্ছেন, আমাদের কাছে একটি বড় মান সহ সংজ্ঞায়িত চারটি পয়েন্ট রয়েছে (B
) আমার বড় মান 100vmax
, কিন্তু এটা আপনি চান কোনো বড় মান হতে পারে. ধারণা হল আমাদের ছায়ার জন্য পর্যাপ্ত জায়গা আছে তা নিশ্চিত করা। আমাদের কাছে চারটি বিন্দু রয়েছে যা ছদ্ম-উপাদানের কোণ।
তীরগুলি সেই পথটি চিত্রিত করে যা বহুভুজকে সংজ্ঞায়িত করে। আমরা থেকে শুরু করি (-B, -B)
যতক্ষণ না আমরা পৌঁছাই (0,0)
. মোট, আমাদের 10 পয়েন্ট প্রয়োজন। আট পয়েন্ট নয় কারণ পথে দুটি পয়েন্ট দুবার পুনরাবৃত্তি হয় ((-B,-B)
এবং (0,0)
).
এখনও আছে আরেকটা জিনিস আমাদের জন্য বাকি আছে, এবং এটি ছড়িয়ে যাওয়া দূরত্ব এবং অফসেটগুলির জন্য হিসাব করতে হবে। উপরের ডেমোটি কাজ করার একমাত্র কারণ হল এটি একটি নির্দিষ্ট ক্ষেত্রে যেখানে অফসেট এবং স্প্রেড দূরত্ব সমান 0
.
আসুন স্প্রেড সংজ্ঞায়িত করুন এবং দেখুন কি হয়। মনে রাখবেন যে আমরা ব্যবহার করি inset
এটি করার জন্য একটি নেতিবাচক মান সহ:
ছদ্ম-উপাদান এখন প্রধান উপাদানের চেয়ে বড়, তাই clip-path
আমাদের প্রয়োজনের চেয়ে বেশি কাটে। মনে রাখবেন, আমরা সবসময় অংশ কাটা প্রয়োজন ভিতরে প্রধান উপাদান (উদাহরণের সবুজ সীমানার ভিতরের এলাকা)। আমাদের চারটি পয়েন্টের ভিতরের অবস্থান সামঞ্জস্য করতে হবে clip-path
.
.box { --s: 10px; /* the spread */ position: relative;
}
.box::before { inset: calc(-1 * var(--s)); clip-path: polygon( -100vmax -100vmax, 100vmax -100vmax, 100vmax 100vmax, -100vmax 100vmax, -100vmax -100vmax, calc(0px + var(--s)) calc(0px + var(--s)), calc(0px + var(--s)) calc(100% - var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s)) calc(0px + var(--s)), calc(0px + var(--s)) calc(0px + var(--s)) );
}
আমরা একটি CSS ভেরিয়েবল সংজ্ঞায়িত করেছি, --s
, ছড়িয়ে দূরত্বের জন্য এবং বহুভুজ পয়েন্ট আপডেট করা হয়েছে। আমি সেই পয়েন্টগুলি স্পর্শ করিনি যেখানে আমি বড় মান ব্যবহার করছি। আমি শুধুমাত্র পয়েন্টগুলি আপডেট করি যা ছদ্ম-উপাদানের কোণগুলিকে সংজ্ঞায়িত করে। আমি দ্বারা সমস্ত শূন্য মান বৃদ্ধি --s
এবং হ্রাস 100%
দ্বারা মান --s
.
এটি অফসেটগুলির সাথে একই যুক্তি। যখন আমরা ছদ্ম-উপাদানটি অনুবাদ করি, তখন ছায়াটি প্রান্তিককরণের বাইরে থাকে এবং আমাদের আবার বহুভুজ সংশোধন করতে হবে এবং বিন্দুগুলিকে বিপরীত দিকে সরাতে হবে।
.box { --s: 10px; /* the spread */ --x: 10px; /* X offset */ --y: 8px; /* Y offset */ position: relative;
}
.box::before { inset: calc(-1 * var(--s)); transform: translate3d(var(--x), var(--y), -1px); clip-path: polygon( -100vmax -100vmax, 100vmax -100vmax, 100vmax 100vmax, -100vmax 100vmax, -100vmax -100vmax, calc(0px + var(--s) - var(--x)) calc(0px + var(--s) - var(--y)), calc(0px + var(--s) - var(--x)) calc(100% - var(--s) - var(--y)), calc(100% - var(--s) - var(--x)) calc(100% - var(--s) - var(--y)), calc(100% - var(--s) - var(--x)) calc(0px + var(--s) - var(--y)), calc(0px + var(--s) - var(--x)) calc(0px + var(--s) - var(--y)) );
}
অফসেটের জন্য আরও দুটি ভেরিয়েবল রয়েছে: --x
এবং --y
. আমরা ভিতরে তাদের ব্যবহার transform
এবং আমরা আপডেট করি clip-path
মান আমরা এখনও বড় মান সহ বহুভুজ বিন্দুগুলি স্পর্শ করি না, তবে আমরা অন্য সবগুলিকে অফসেট করি — আমরা হ্রাস করি --x
এক্স স্থানাঙ্ক থেকে, এবং --y
Y স্থানাঙ্ক থেকে।
এখন আমাদের যা করতে হবে তা হল গ্রেডিয়েন্ট শ্যাডো নিয়ন্ত্রণ করতে কয়েকটি ভেরিয়েবল আপডেট করা। এবং যখন আমরা এটিতে থাকি, আসুন ব্লার ব্যাসার্ধকেও একটি পরিবর্তনশীল করে তুলি:
আমরা এখনও 3D প্রয়োজন
transform
কৌশল?
এটা সব সীমান্তের উপর নির্ভর করে। ভুলে যাবেন না যে একটি ছদ্ম-উপাদানের রেফারেন্স হল প্যাডিং বক্স, তাই আপনি যদি আপনার প্রধান উপাদানটিতে একটি বর্ডার প্রয়োগ করেন, তাহলে আপনার একটি ওভারল্যাপ থাকবে। আপনি হয় 3D রাখুন transform
কৌশল বা আপডেট inset
সীমানার জন্য অ্যাকাউন্টের মান।
এখানে একটি আপডেট সহ আগের ডেমো আছে inset
3D এর জায়গায় মান transform
:
আমি বলব এটি যাওয়ার একটি আরও উপযুক্ত উপায় কারণ স্প্রেড দূরত্ব আরও সঠিক হবে, কারণ এটি প্যাডিং-বক্সের পরিবর্তে বর্ডার-বক্স থেকে শুরু হয়। কিন্তু আপনাকে সামঞ্জস্য করতে হবে inset
মূল উপাদানের সীমানা অনুযায়ী মান। কখনও কখনও, উপাদানটির সীমানা অজানা এবং আপনাকে পূর্ববর্তী সমাধানটি ব্যবহার করতে হবে।
পূর্বের অ-স্বচ্ছ সমাধানের সাথে, এটি সম্ভব যে আপনি একটি স্ট্যাকিং প্রসঙ্গ সমস্যার মুখোমুখি হবেন। এবং স্বচ্ছ সমাধানের সাথে, আপনি পরিবর্তে একটি সীমান্ত সমস্যার সম্মুখীন হতে পারেন। এখন আপনার কাছে সেই সমস্যাগুলি নিয়ে কাজ করার বিকল্প এবং উপায় রয়েছে৷ 3D রূপান্তর কৌশলটি আমার প্রিয় সমাধান কারণ এটি সমস্ত সমস্যার সমাধান করে (অনলাইন জেনারেটর এটাও বিবেচনা করবে)
একটি সীমানা ব্যাসার্ধ যোগ করা হচ্ছে
আপনি যোগ করার চেষ্টা করলে border-radius
আমরা যে অ-স্বচ্ছ সমাধান দিয়ে শুরু করেছি তা ব্যবহার করার সময় উপাদানটিতে, এটি একটি মোটামুটি তুচ্ছ কাজ। আপনাকে যা করতে হবে তা হল মূল উপাদান থেকে একই মান উত্তরাধিকারসূত্রে পাওয়া, এবং আপনি সম্পন্ন করেছেন।
এমনকি যদি আপনার সীমানা ব্যাসার্ধ না থাকে, তবে এটি সংজ্ঞায়িত করা একটি ভাল ধারণা border-radius: inherit
. যে কোনো সম্ভাব্য জন্য অ্যাকাউন্ট border-radius
আপনি পরে যোগ করতে চাইতে পারেন অথবা একটি সীমানা ব্যাসার্ধ যা অন্য কোথাও থেকে আসে।
স্বচ্ছ সমাধান নিয়ে কাজ করার সময় এটি একটি ভিন্ন গল্প। দুর্ভাগ্যবশত, এর মানে হল অন্য সমাধান খুঁজে বের করা কারণ clip-path
বক্রতা মোকাবেলা করতে পারে না। এর মানে আমরা মূল উপাদানের ভিতরের এলাকাটি কাটাতে সক্ষম হব না।
আমরা পরিচয় করিয়ে দেব mask
মিশ্রণ সম্পত্তি.
এই অংশটি খুব ক্লান্তিকর ছিল, এবং আমি একটি সাধারণ সমাধান খুঁজে পেতে সংগ্রাম করেছি যা নির্ভর করে না জাদু সংখ্যা. আমি একটি খুব জটিল সমাধান দিয়ে শেষ করেছি যা শুধুমাত্র একটি ছদ্ম-উপাদান ব্যবহার করে, কিন্তু কোডটি ছিল স্প্যাগেটির একটি গলদ যা শুধুমাত্র কয়েকটি নির্দিষ্ট ক্ষেত্রে কভার করে। আমি মনে করি না যে রুটটি অন্বেষণ করা মূল্যবান।
আমি সহজ কোডের জন্য একটি অতিরিক্ত উপাদান সন্নিবেশ করার সিদ্ধান্ত নিয়েছি। এখানে মার্কআপ আছে:
<div class="box"> <sh></sh>
</div>
আমি একটি কাস্টম উপাদান ব্যবহার করছি, <sh>
, বহিরাগত CSS-এর সাথে কোনো সম্ভাব্য দ্বন্দ্ব এড়াতে। আমি একটি ব্যবহার করতে পারে <div>
, কিন্তু যেহেতু এটি একটি সাধারণ উপাদান, এটি অন্য কোথাও থেকে আসা অন্য CSS নিয়ম দ্বারা সহজেই লক্ষ্যবস্তু করা যেতে পারে যা আমাদের কোড ভাঙতে পারে।
প্রথম ধাপ হল অবস্থান <sh>
উপাদান এবং উদ্দেশ্যমূলকভাবে একটি ওভারফ্লো তৈরি করুন:
.box { --r: 50px; position: relative; border-radius: var(--r);
}
.box sh { position: absolute; inset: -150px; border: 150px solid #0000; border-radius: calc(150px + var(--r));
}
কোডটি একটু অদ্ভুত লাগতে পারে, কিন্তু আমরা যেতে যেতে এর পেছনের যুক্তিতে পাব। এর পরে, আমরা একটি ছদ্ম-উপাদান ব্যবহার করে গ্রেডিয়েন্ট শ্যাডো তৈরি করি <sh>
.
.box { --r: 50px; position: relative; border-radius: var(--r); transform-style: preserve-3d;
}
.box sh { position: absolute; inset: -150px; border: 150px solid #0000; border-radius: calc(150px + var(--r)); transform: translateZ(-1px)
}
.box sh::before { content: ""; position: absolute; inset: -5px; border-radius: var(--r); background: /* Your gradient */; filter: blur(10px); transform: translate(10px,8px);
}
আপনি দেখতে পাচ্ছেন, ছদ্ম-উপাদানটি আগের সমস্ত উদাহরণের মতো একই কোড ব্যবহার করে। পার্থক্য শুধুমাত্র 3D transform
উপর সংজ্ঞায়িত <sh>
ছদ্ম-উপাদানের পরিবর্তে উপাদান। এই মুহুর্তের জন্য, আমাদের স্বচ্ছতা বৈশিষ্ট্য ছাড়া একটি গ্রেডিয়েন্ট ছায়া আছে:
উল্লেখ্য যে এর এলাকা <sh>
উপাদান কালো আউটলাইন দ্বারা সংজ্ঞায়িত করা হয়. কেন আমি এটা করছি? কারণ যে ভাবে, আমি একটি আবেদন করতে সক্ষম mask
সবুজ এলাকার ভিতরে অংশ লুকানোর জন্য এটির উপর এবং উপচে পড়া অংশটি রাখুন যেখানে আমাদের ছায়া দেখতে হবে।
আমি জানি এটা একটু কঠিন, কিন্তু ভিন্ন clip-path
, দ্য mask
সম্পত্তি এলাকার জন্য হিসাব করে না বাহিরে জিনিসগুলি দেখানো এবং লুকানোর জন্য একটি উপাদান। এই কারণেই আমি অতিরিক্ত উপাদানটি প্রবর্তন করতে বাধ্য ছিলাম - "বাইরের" অঞ্চলটি অনুকরণ করতে।
এছাড়াও, নোট করুন যে আমি এর সংমিশ্রণ ব্যবহার করছি border
এবং inset
যে এলাকা সংজ্ঞায়িত করতে. এটি আমাকে সেই অতিরিক্ত উপাদানটির প্যাডিং-বক্সটিকে মূল উপাদানের মতো রাখতে দেয় যাতে ছদ্ম-উপাদানের অতিরিক্ত গণনার প্রয়োজন না হয়।
একটি অতিরিক্ত উপাদান ব্যবহার করে আরেকটি দরকারী জিনিস যা আমরা পাই তা হল উপাদানটি স্থির, এবং শুধুমাত্র ছদ্ম-উপাদানটি চলমান (ব্যবহার করে translate
) এটি আমাকে সহজেই মাস্কটি সংজ্ঞায়িত করার অনুমতি দেবে, যা গত এই কৌশলের ধাপ।
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
এটা হয়ে গেছে! আমরা আমাদের গ্রেডিয়েন্ট ছায়া আছে, এবং এটি সমর্থন করে border-radius
! আপনি সম্ভবত একটি জটিল আশা mask
গ্রেডিয়েন্টের বহুগুণ সহ মান, কিন্তু না! আমাদের শুধুমাত্র দুটি সহজ গ্রেডিয়েন্ট এবং একটি প্রয়োজন mask-composite
যাদু সম্পূর্ণ করতে।
আসুন বিচ্ছিন্ন করি <sh>
সেখানে কি ঘটছে তা বোঝার উপাদান:
.box sh { position: absolute; inset: -150px; border: 150px solid red; background: lightblue; border-radius: calc(150px + var(--r));
}
আমরা যা পাই তা এখানে:
অভ্যন্তরীণ ব্যাসার্ধ কীভাবে মূল উপাদানের সাথে মেলে তা লক্ষ্য করুন border-radius
. আমি একটি বড় সীমানা সংজ্ঞায়িত করেছি (150px
) এবং ক border-radius
বড় সীমানার সমান যোগ প্রধান উপাদানের ব্যাসার্ধ। বাইরে, আমার সমান একটি ব্যাসার্ধ আছে 150px + R
. ভিতরে, আমি আছে 150px + R - 150px = R
.
আমাদের অবশ্যই ভিতরের (নীল) অংশটি লুকিয়ে রাখতে হবে এবং নিশ্চিত করতে হবে যে সীমানা (লাল) অংশটি এখনও দৃশ্যমান। এটি করার জন্য, আমি দুটি মুখোশ স্তর সংজ্ঞায়িত করেছি — একটি যা শুধুমাত্র বিষয়বস্তু-বক্স এলাকা কভার করে এবং অন্যটি বর্ডার-বক্স এলাকা (ডিফল্ট মান) কভার করে। তারপর একটা থেকে আরেকটা বাদ দিয়ে সীমানা প্রকাশ করলাম।
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
আমি একই কৌশল ব্যবহার করেছি গ্রেডিয়েন্ট এবং সমর্থন করে এমন একটি সীমানা তৈরি করুন border-radius
. Ana Tudor একটি ভাল নিবন্ধ আছে মাস্কিং কম্পোজিট সম্পর্কে যে আমি আপনাকে পড়ার জন্য আমন্ত্রণ জানাচ্ছি।
এই পদ্ধতির কোন অপূর্ণতা আছে?
হ্যাঁ, এটি অবশ্যই নিখুঁত নয়। আপনি যে প্রথম সমস্যাটির মুখোমুখি হতে পারেন তা প্রধান উপাদানের একটি সীমানা ব্যবহার করার সাথে সম্পর্কিত। আপনি যদি এটির জন্য হিসাব না করেন তবে এটি ব্যাসার্ধে একটি ছোট বিভ্রান্তি তৈরি করতে পারে। আমাদের উদাহরণে এই সমস্যাটি রয়েছে, তবে সম্ভবত আপনি এটি খুব কমই লক্ষ্য করতে পারেন।
সমাধান তুলনামূলকভাবে সহজ: এর জন্য সীমানার প্রস্থ যোগ করুন <sh>
উপাদান এর inset
.
.box { --r: 50px; border-radius: var(--r); border: 2px solid;
}
.box sh { position: absolute; inset: -152px; /* 150px + 2px */ border: 150px solid #0000; border-radius: calc(150px + var(--r));
}
আরেকটি অপূর্ণতা হল বড় মান যা আমরা সীমান্তের জন্য ব্যবহার করছি (150px
উদাহরণে)। এই মানটি ছায়া ধারণ করার জন্য যথেষ্ট বড় হওয়া উচিত কিন্তু ওভারফ্লো এবং স্ক্রলবার সমস্যা এড়াতে খুব বড় নয়। ভাগ্যক্রমে, অনলাইন জেনারেটর সমস্ত পরামিতি বিবেচনা করে সর্বোত্তম মান গণনা করবে।
আপনি যখন একটি কমপ্লেক্সের সাথে কাজ করছেন তখন আমি যে শেষ ত্রুটি সম্পর্কে সচেতন border-radius
. উদাহরণস্বরূপ, আপনি যদি প্রতিটি কোণে একটি ভিন্ন ব্যাসার্ধ প্রয়োগ করতে চান তবে আপনাকে অবশ্যই প্রতিটি পাশের জন্য একটি পরিবর্তনশীল সংজ্ঞায়িত করতে হবে। এটি সত্যিই একটি ত্রুটি নয়, আমি মনে করি, কিন্তু এটি আপনার কোড বজায় রাখা একটু কঠিন করতে পারে।
.box { --r-top: 10px; --r-right: 40px; --r-bottom: 30px; --r-left: 20px; border-radius: var(--r-top) var(--r-right) var(--r-bottom) var(--r-left);
}
.box sh { border-radius: calc(150px + var(--r-top)) calc(150px + var(--r-right)) calc(150px + var(--r-bottom)) calc(150px + var(--r-left));
}
.box sh:before { border-radius: var(--r-top) var(--r-right) var(--r-bottom) var(--r-left);
}
অনলাইন জেনারেটর শুধুমাত্র সরলতার জন্য একটি অভিন্ন ব্যাসার্ধ বিবেচনা করে, কিন্তু আপনি এখন জানেন কিভাবে কোডটি পরিবর্তন করতে হয় যদি আপনি একটি জটিল ব্যাসার্ধ কনফিগারেশন বিবেচনা করতে চান।
মোড়ক উম্মচন
আমরা শেষ পর্যন্ত পৌঁছেছি! গ্রেডিয়েন্ট শ্যাডোর পিছনে যাদু আর রহস্য নয়। আমি আপনার মুখোমুখি হতে পারে এমন সমস্ত সম্ভাবনা এবং সম্ভাব্য সমস্যাগুলি কভার করার চেষ্টা করেছি। যদি আমি কিছু মিস করি বা আপনি কোন সমস্যা খুঁজে পান, অনুগ্রহ করে মন্তব্য বিভাগে এটি নির্দ্বিধায় প্রতিবেদন করুন এবং আমি এটি পরীক্ষা করে দেখব।
আবার, এটির অনেকগুলি সম্ভবত ওভারকিল বিবেচনা করে যে ডি ফ্যাক্টো সমাধানটি আপনার ব্যবহারের বেশিরভাগ ক্ষেত্রেই কভার করবে। তবুও, কৌশলটির পিছনে "কেন" এবং "কীভাবে" এবং কীভাবে এর সীমাবদ্ধতাগুলি কাটিয়ে উঠতে হয় তা জানা ভাল। এছাড়াও, আমরা CSS ক্লিপিং এবং মাস্কিংয়ের সাথে ভাল অনুশীলন করেছি।
এবং, অবশ্যই, আপনি আছে অনলাইন জেনারেটর আপনি ঝামেলা এড়াতে চাইলে যে কোন সময় পৌঁছাতে পারেন।
- এসইও চালিত বিষয়বস্তু এবং পিআর বিতরণ। আজই পরিবর্ধিত পান।
- প্লেটোব্লকচেন। Web3 মেটাভার্স ইন্টেলিজেন্স। জ্ঞান প্রসারিত. এখানে প্রবেশ করুন.
- উত্স: https://css-tricks.com/different-ways-to-get-css-gradient-shadows/
- 1
- 10
- 11
- 3d
- 7
- 9
- 98
- a
- সক্ষম
- সম্পর্কে
- আইটি সম্পর্কে
- উপরে
- পরম
- অনুযায়ী
- হিসাব
- অ্যাকাউন্টস
- সঠিক
- প্রকৃতপক্ষে
- অতিরিক্ত
- পর
- অ্যালগরিদম
- সব
- অনুমতি
- ইতিমধ্যে
- সর্বদা
- বাণীসংগ্রহ
- এবং
- অন্য
- কোথাও
- ফলিত
- প্রয়োগ করা
- প্রয়োগ করা হচ্ছে
- এলাকায়
- কাছাকাছি
- প্রবন্ধ
- এড়াতে
- পটভূমি
- মূলত
- কারণ
- আগে
- পিছনে
- বিশ্বাস করা
- নিচে
- বিশাল
- বড়
- বিট
- কালো
- ব্লগ
- নীল
- দাগ
- সীমান্ত
- Boring
- বক্স
- বিরতি
- নম
- গণনা করা
- না পারেন
- কেস
- মামলা
- চ্যালেঞ্জ
- চেক
- সর্বোত্তম
- ক্লিপ-পাথ
- ঘনিষ্ঠভাবে
- কোড
- রঙ
- সমাহার
- আসছে
- মন্তব্য
- সাধারণ
- সম্পূর্ণ
- জটিল
- ধারণা
- কনফিগারেশন
- দ্বন্দ্ব
- বিবেচনা
- বিবেচনা করা
- বিবেচনা করে
- বিষয়বস্তু
- প্রসঙ্গ
- নিয়ন্ত্রণ
- কোণ
- কোণে
- পারা
- পথ
- আবরণ
- কভার
- সৃষ্টি
- সৃষ্টি
- সিএসএস
- সিএসএস কৌশল
- প্রথা
- কাটা
- কাট
- লেনদেন
- ডিলিং
- সিদ্ধান্ত নিয়েছে
- হ্রাস
- ডিফল্ট
- সংজ্ঞায়িত
- সংজ্ঞায়িত
- সংজ্ঞা
- স্পষ্টভাবে
- ডেমো
- নির্ভর করে
- DID
- পার্থক্য
- বিভিন্ন
- অভিমুখ
- আবিষ্কার করা
- দূরত্ব
- না
- করছেন
- Dont
- অপূর্ণতা
- প্রতি
- পূর্বে
- সহজে
- প্রভাব
- পারেন
- অন্যত্র
- যথেষ্ট
- নিশ্চিত করা
- বিশেষত
- থার (eth)
- এমন কি
- সব
- উদাহরণ
- উদাহরণ
- ছাঁটা
- ব্যায়াম
- প্রত্যাশিত
- ব্যাখ্যা
- অন্বেষণ করুণ
- এক্সপ্লোরিং
- বহিরাগত
- অতিরিক্ত
- মুখ
- ফ্যাক্টো
- নিরপেক্ষভাবে
- প্রিয়
- বৈশিষ্ট্য
- কয়েক
- ব্যক্তিত্ব
- ছাঁকনি
- আবিষ্কার
- আবিষ্কার
- প্রথম
- ঠিক করা
- স্থায়ী
- অনুসরণ করা
- বল
- বিনামূল্যে
- থেকে
- সাধারণ
- উত্পন্ন
- পাওয়া
- দাও
- Go
- চালু
- ভাল
- গ্রেডিয়েন্টস
- Green
- এরকম
- সাহায্য
- এখানে
- লুকান
- কিভাবে
- কিভাবে
- এইচটিএমএল
- HTTPS দ্বারা
- আমি আছি
- ধারণা
- গুরুত্বপূর্ণ
- in
- বৃদ্ধি
- পরিবর্তে
- প্রবর্তন করা
- আমন্ত্রণ করা
- সমস্যা
- সমস্যা
- IT
- রাখা
- পালন
- জানা
- গত
- স্তর
- শিখতে
- সম্ভবত
- সীমাবদ্ধতা
- সীমা
- সামান্য
- দীর্ঘ
- আর
- দেখুন
- তাকিয়ে
- সৌন্দর্য
- অনেক
- জাদু
- প্রধান
- বজায় রাখা
- সংখ্যাগুরু
- করা
- মাস্ক
- মানে
- পদ্ধতি
- হতে পারে
- পরিবর্তন
- মুহূর্ত
- অধিক
- সেতু
- পদক্ষেপ
- চলন্ত
- মোজিলা
- রহস্য
- প্রয়োজন
- নেতিবাচক
- তবু
- নতুন
- পরবর্তী
- অফসেট
- ONE
- অনলাইন
- বিপরীত
- অনুকূল
- অপশন সমূহ
- কমলা
- ক্রম
- অন্যান্য
- অন্যরা
- অন্যভাবে
- রূপরেখা
- বাহিরে
- পরাস্ত
- পরামিতি
- অংশ
- বিশেষ
- পথ
- প্যাটার্ন
- নির্ভুল
- সম্ভবত
- বাছাই
- জায়গা
- Plato
- প্লেটো ডেটা ইন্টেলিজেন্স
- প্লেটোডাটা
- কেলি
- দয়া করে
- যোগ
- পয়েন্ট
- বহুভুজ
- অবস্থান
- সম্ভাবনার
- সম্ভব
- পোস্ট
- সম্ভাব্য
- চমত্কার
- আগে
- সম্ভবত
- সম্পত্তি
- ধাক্কা
- করা
- প্রশ্ন
- নাগাল
- পৌঁছেছে
- পড়া
- বাস্তবতা
- কারণ
- সুপারিশ করা
- লাল
- হ্রাস করা
- সংশ্লিষ্ট
- অপেক্ষাকৃতভাবে
- নির্ভর করা
- মনে রাখা
- অপসারণ
- পুনরাবৃত্ত
- রিপোর্ট
- ফল
- প্রকাশ করা
- রুট
- নিয়ম
- বলেছেন
- হেতু
- একই
- অধ্যায়
- ছায়া
- শেয়ার
- উচিত
- প্রদর্শনী
- অনুরূপ
- সহজ
- সরলতা
- থেকে
- ছোট
- So
- কঠিন
- সমাধান
- কিছু
- কিছু
- কোথাও
- স্থান
- নির্দিষ্ট
- বিস্তার
- গাদা
- স্ট্যাক
- শুরু
- শুরু
- শুরু
- থাকা
- ধাপ
- এখনো
- গল্প
- উপযুক্ত
- সমর্থন
- সমর্থন
- আশ্চর্য
- গ্রহণ করা
- লক্ষ্যবস্তু
- কার্য
- সার্জারির
- ক্ষেত্র
- জিনিস
- কিছু
- মনে
- থেকে
- একসঙ্গে
- অত্যধিক
- বিষয়
- মোট
- স্পর্শ
- রুপান্তর
- অনুবাদ
- অনুবাদ
- স্বচ্ছতা
- স্বচ্ছ
- ঠাট
- সত্য
- টিপিক্যাল
- বোঝা
- আপডেট
- আপডেট
- us
- ব্যবহার
- মূল্য
- মানগুলি
- দৃশ্যমান
- উপায়
- কি
- যে
- যখন
- ইচ্ছা
- ছাড়া
- হয়া যাই ?
- কাজ
- কাজ
- মূল্য
- X
- আপনার
- z-সূচক
- zephyrnet
- শূন্য