یہ ایک سوال ہے جو میں نے اکثر پوچھا تھا: کیا ٹھوس رنگوں کے بجائے میلان سے سائے بنانا ممکن ہے؟ سی ایس ایس کی کوئی خاص خاصیت نہیں ہے جو ایسا کرتی ہے (مجھ پر یقین کریں، میں نے دیکھا ہے) اور کوئی بھی بلاگ پوسٹ جو آپ کو اس کے بارے میں ملتی ہے وہ بنیادی طور پر ایک میلان کا تخمینہ لگانے کے لیے بہت سی سی ایس ایس چالیں ہیں۔ ہم اصل میں ان میں سے کچھ کا احاطہ کریں گے جیسا کہ ہم جاتے ہیں.
لیکن پہلے… ایک اور تدریجی سائے کے بارے میں مضمون؟ واقعی؟
جی ہاں، یہ ابھی تک موضوع پر ایک اور پوسٹ ہے، لیکن یہ مختلف ہے. ایک ساتھ، ہم ایک ایسا حل حاصل کرنے کے لیے حدود کو آگے بڑھانے جا رہے ہیں جس میں ایسی چیز شامل ہو جو میں نے کہیں اور نہیں دیکھی ہو: شفافیت. زیادہ تر چالیں کام کرتی ہیں اگر عنصر کا پس منظر غیر شفاف ہے لیکن اگر ہمارے پاس شفاف پس منظر ہو تو کیا ہوگا؟ ہم یہاں اس کیس کا جائزہ لیں گے!
اس سے پہلے کہ ہم شروع کریں، میں تعارف کرواتا ہوں۔ میرا گریڈینٹ شیڈو جنریٹر. آپ کو بس کنفیگریشن کو ایڈجسٹ کرنا ہے، اور کوڈ حاصل کرنا ہے۔ لیکن ساتھ چلیں کیونکہ میں آپ کو تیار کردہ کوڈ کے پیچھے تمام منطق کو سمجھنے میں مدد کرنے جا رہا ہوں۔
کی میز کے مندرجات
غیر شفاف حل
آئیے اس حل کے ساتھ شروع کریں جو زیادہ تر معاملات میں سے 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-axis کے ساتھ ایک منفی ترجمہ استعمال کریں گے۔ ہم سب کچھ اندر ڈال دیں گے۔ 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
X کوآرڈینیٹ سے، اور --y
Y کوآرڈینیٹ سے۔
اب ہمیں صرف یہ کرنا ہے کہ گریڈینٹ شیڈو کو کنٹرول کرنے کے لیے چند متغیرات کو اپ ڈیٹ کرنا ہے۔ اور جب ہم اس پر ہیں، آئیے blur radius کو بھی متغیر بنائیں:
کیا ہمیں اب بھی 3D کی ضرورت ہے؟
transform
چال؟
یہ سب سرحد پر منحصر ہے۔ یہ نہ بھولیں کہ سیوڈو عنصر کا حوالہ پیڈنگ باکس ہے، لہذا اگر آپ اپنے مرکزی عنصر پر بارڈر لگاتے ہیں، تو آپ کو اوورلیپ ملے گا۔ آپ یا تو 3D رکھیں transform
چال یا اپ ڈیٹ inset
سرحد کے حساب سے قدر۔
یہاں ایک تازہ کاری کے ساتھ پچھلا ڈیمو ہے۔ inset
3D کی جگہ قدر transform
:
میں کہوں گا کہ یہ جانے کا زیادہ مناسب طریقہ ہے کیونکہ پھیلاؤ کا فاصلہ زیادہ درست ہوگا، کیونکہ یہ پیڈنگ باکس کے بجائے بارڈر باکس سے شروع ہوتا ہے۔ لیکن آپ کو ایڈجسٹ کرنے کی ضرورت ہوگی۔ inset
اہم عنصر کی سرحد کے مطابق قدر۔ بعض اوقات، عنصر کی سرحد نامعلوم نہیں ہوتی ہے اور آپ کو پچھلا حل استعمال کرنا پڑتا ہے۔
پہلے کے غیر شفاف حل کے ساتھ، یہ ممکن ہے کہ آپ کو اسٹیکنگ سیاق و سباق کے مسئلے کا سامنا کرنا پڑے۔ اور شفاف حل کے ساتھ، یہ ممکن ہے کہ آپ کو سرحدی مسئلے کا سامنا کرنا پڑے۔ اب آپ کے پاس ان مسائل پر کام کرنے کے اختیارات اور طریقے ہیں۔ 3D ٹرانسفارم ٹرک میرا پسندیدہ حل ہے کیونکہ یہ تمام مسائل کو ٹھیک کرتا ہے (آن لائن جنریٹر اس پر بھی غور کریں گے)
سرحدی رداس شامل کرنا
اگر آپ شامل کرنے کی کوشش کریں۔ border-radius
عنصر کے لیے جب غیر شفاف حل کا استعمال کرتے ہوئے ہم نے شروع کیا تھا، تو یہ کافی معمولی کام ہے۔ آپ کو صرف وہی قدر حاصل کرنے کی ضرورت ہے جو اہم عنصر سے ہے، اور آپ نے کام کر لیا ہے۔
یہاں تک کہ اگر آپ کے پاس سرحدی رداس نہیں ہے، تو اس کی وضاحت کرنا اچھا خیال ہے۔ border-radius: inherit
. یہ کسی بھی ممکنہ کے لئے اکاؤنٹس border-radius
آپ بعد میں یا ایک بارڈر رداس شامل کرنا چاہتے ہیں جو کہیں اور سے آتا ہے۔
شفاف حل سے نمٹنے کے دوران یہ ایک الگ کہانی ہے۔ بدقسمتی سے، اس کا مطلب ایک اور حل تلاش کرنا ہے کیونکہ clip-path
curvatures کے ساتھ نمٹنے نہیں کر سکتے ہیں. اس کا مطلب ہے کہ ہم مرکزی عنصر کے اندر کے علاقے کو کاٹ نہیں سکیں گے۔
ہم متعارف کرائیں گے۔ mask
مرکب کی جائیداد.
یہ حصہ بہت تکلیف دہ تھا، اور میں نے ایک عمومی حل تلاش کرنے کے لیے جدوجہد کی جس پر بھروسہ نہ ہو۔ جادو نمبر. میں نے ایک بہت ہی پیچیدہ حل کے ساتھ ختم کیا جو صرف ایک چھدم عنصر کا استعمال کرتا ہے، لیکن کوڈ سپتیٹی کا ایک گانٹھ تھا جو صرف چند مخصوص معاملات کا احاطہ کرتا ہے۔ مجھے نہیں لگتا کہ اس راستے کو تلاش کرنے کے قابل ہے۔
میں نے آسان کوڈ کی خاطر ایک اضافی عنصر داخل کرنے کا فیصلہ کیا۔ یہاں مارک اپ ہے:
<div class="box"> <sh></sh>
</div>
میں ایک حسب ضرورت عنصر استعمال کر رہا ہوں، <sh>
، بیرونی CSS کے ساتھ کسی بھی ممکنہ تنازعہ سے بچنے کے لیے۔ میں استعمال کر سکتا تھا a <div>
، لیکن چونکہ یہ ایک عام عنصر ہے، اس کو آسانی سے کسی اور سی ایس ایس اصول کے ذریعے نشانہ بنایا جا سکتا ہے جو ہمارے کوڈ کو توڑ سکتا ہے۔
پہلا قدم پوزیشن کرنا ہے۔ <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);
}
جیسا کہ آپ دیکھ سکتے ہیں، سیوڈو عنصر وہی کوڈ استعمال کرتا ہے جیسا کہ تمام پچھلی مثالیں ہیں۔ فرق صرف تھری ڈی کا ہے۔ transform
پر وضاحت کی گئی ہے۔ <sh>
سیوڈو عنصر کے بجائے عنصر۔ اس وقت، ہمارے پاس شفافیت کی خصوصیت کے بغیر ایک تدریجی سایہ ہے:
نوٹ کریں کہ کے علاقے <sh>
عنصر کی وضاحت سیاہ خاکہ کے ساتھ کی گئی ہے۔ میں ایسا کیوں کر رہا ہوں؟ کیونکہ اس طرح، میں درخواست دینے کے قابل ہوں a 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
. اینا ٹیوڈر کا بھی اچھا مضمون ہے۔ ماسکنگ کمپوزٹ کے بارے میں کہ میں آپ کو پڑھنے کی دعوت دیتا ہوں۔
کیا اس طریقہ کار میں کوئی خرابیاں ہیں؟
ہاں، یہ یقینی طور پر کامل نہیں ہے۔ پہلا مسئلہ جس کا آپ کو سامنا ہوسکتا ہے وہ مرکزی عنصر پر بارڈر استعمال کرنے سے متعلق ہے۔ اگر آپ اس کا حساب نہیں رکھتے ہیں تو یہ ریڈی آئی میں ایک چھوٹی سی غلط ترتیب پیدا کر سکتا ہے۔ ہمارے پاس یہ مسئلہ ہماری مثال میں ہے، لیکن شاید آپ اسے شاید ہی محسوس کر سکیں۔
ٹھیک کرنا نسبتاً آسان ہے: کے لیے بارڈر کی چوڑائی شامل کریں۔ <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 کلپنگ اور ماسکنگ کے ساتھ اچھی ورزش ملی۔
اور، یقینا، آپ کے پاس ہے آن لائن جنریٹر آپ کسی بھی وقت تک پہنچ سکتے ہیں جب آپ پریشانی سے بچنا چاہتے ہیں۔
- SEO سے چلنے والا مواد اور PR کی تقسیم۔ آج ہی بڑھا دیں۔
- پلیٹو بلاک چین۔ Web3 Metaverse Intelligence. علم میں اضافہ۔ یہاں تک رسائی حاصل کریں۔
- ماخذ: https://css-tricks.com/different-ways-to-get-css-gradient-shadows/
- 1
- 10
- 11
- 3d
- 7
- 9
- 98
- a
- قابلیت
- ہمارے بارے میں
- اس کے بارے میں
- اوپر
- مطلق
- کے مطابق
- اکاؤنٹ
- اکاؤنٹس
- درست
- اصل میں
- ایڈیشنل
- کے بعد
- یلگورتم
- تمام
- کی اجازت دیتا ہے
- پہلے ہی
- ہمیشہ
- رکن کی
- اور
- ایک اور
- کہیں
- اطلاقی
- کا اطلاق کریں
- درخواست دینا
- رقبہ
- ارد گرد
- مضمون
- سے اجتناب
- پس منظر
- بنیادی طور پر
- کیونکہ
- اس سے پہلے
- پیچھے
- یقین ہے کہ
- نیچے
- بگ
- بڑا
- بٹ
- سیاہ
- بلاگ
- بلیو
- کلنک
- سرحد
- بورنگ
- باکس
- توڑ
- بگ کی اطلاع دیں
- حساب
- نہیں کر سکتے ہیں
- کیس
- مقدمات
- چیلنج
- چیک کریں
- کلاسک
- کلپ کا راستہ
- قریب سے
- کوڈ
- رنگ
- مجموعہ
- آنے والے
- تبصرہ
- کامن
- مکمل
- پیچیدہ
- تصور
- ترتیب
- تنازعہ
- غور کریں
- پر غور
- سمجھتا ہے
- مواد
- سیاق و سباق
- کنٹرول
- کونے
- کونوں
- سکتا ہے
- کورس
- احاطہ
- پر محیط ہے
- تخلیق
- پیدا
- CSS
- سی ایس ایس ٹیکنیکس
- اپنی مرضی کے
- کٹ
- کمی
- نمٹنے کے
- معاملہ
- فیصلہ کیا
- کمی
- پہلے سے طے شدہ
- کی وضاحت
- وضاحت کرتا ہے
- وضاحت
- ضرور
- ڈیمو
- انحصار کرتا ہے
- DID
- فرق
- مختلف
- سمت
- دریافت
- فاصلے
- نہیں کرتا
- کر
- نہیں
- خرابیاں
- ہر ایک
- اس سے قبل
- آسانی سے
- اثر
- یا تو
- دوسری جگہوں پر
- کافی
- کو یقینی بنانے کے
- خاص طور پر
- Ether (ETH)
- بھی
- سب کچھ
- مثال کے طور پر
- مثال کے طور پر
- خارج کر دیا گیا
- ورزش
- توقع
- وضاحت
- تلاش
- ایکسپلور
- بیرونی
- اضافی
- چہرہ
- اصل
- کافی
- پسندیدہ
- نمایاں کریں
- چند
- اعداد و شمار
- فلٹر
- مل
- تلاش
- پہلا
- درست کریں
- مقرر
- پر عمل کریں
- مجبور
- مفت
- سے
- جنرل
- پیدا
- حاصل
- دے دو
- Go
- جا
- اچھا
- میلان
- سبز
- ہوتا ہے
- مدد
- یہاں
- ذاتی ترامیم چھپائیں
- کس طرح
- کیسے
- HTML
- HTTPS
- میں ہوں گے
- خیال
- اہم
- in
- اضافہ
- کے بجائے
- متعارف کرانے
- مدعو
- مسئلہ
- مسائل
- IT
- رکھیں
- رکھتے ہوئے
- جان
- آخری
- تہوں
- جانیں
- امکان
- حدود
- حدود
- تھوڑا
- لانگ
- اب
- دیکھو
- دیکھا
- دیکھنا
- بہت
- ماجک
- مین
- برقرار رکھنے کے
- اکثریت
- بنا
- ماسک
- کا مطلب ہے کہ
- طریقہ
- شاید
- نظر ثانی کرنے
- لمحہ
- زیادہ
- سب سے زیادہ
- منتقل
- منتقل
- موزیلا
- اسرار
- ضرورت ہے
- منفی
- پھر بھی
- نئی
- اگلے
- آفسیٹ
- ایک
- آن لائن
- اس کے برعکس
- زیادہ سے زیادہ
- آپشنز کے بھی
- اورنج
- حکم
- دیگر
- دیگر
- دوسری صورت میں
- خاکہ
- باہر
- پر قابو پانے
- پیرامیٹرز
- حصہ
- خاص طور پر
- راستہ
- پاٹرن
- کامل
- شاید
- لینے
- مقام
- پلاٹا
- افلاطون ڈیٹا انٹیلی جنس
- پلیٹو ڈیٹا
- کھیل
- مہربانی کرکے
- علاوہ
- پوائنٹس
- کثیرالاضلاع
- پوزیشن
- امکانات
- ممکن
- پوسٹ
- ممکنہ
- خوبصورت
- پچھلا
- شاید
- جائیداد
- پش
- ڈال
- سوال
- تک پہنچنے
- پہنچ گئی
- پڑھیں
- حقیقت
- وجہ
- سفارش
- ریڈ
- کو کم
- متعلقہ
- نسبتا
- انحصار کرو
- یاد
- ہٹا
- بار بار
- رپورٹ
- نتیجہ
- ظاہر
- روٹ
- حکمرانی
- کہا
- خاطر
- اسی
- سیکشن
- شیڈو
- سیکنڈ اور
- ہونا چاہئے
- دکھائیں
- اسی طرح
- سادہ
- سادگی
- بعد
- چھوٹے
- So
- ٹھوس
- حل
- کچھ
- کچھ
- کہیں
- خلا
- مخصوص
- پھیلانے
- ڈھیر لگانا
- اسٹیکنگ
- شروع کریں
- شروع
- شروع ہوتا ہے
- رہنا
- مرحلہ
- ابھی تک
- کہانی
- موزوں
- حمایت
- کی حمایت کرتا ہے
- حیرت
- لے لو
- ھدف بنائے گئے
- ٹاسک
- ۔
- علاقہ
- بات
- چیزیں
- سوچو
- کرنے کے لئے
- مل کر
- بھی
- موضوع
- کل
- چھو
- تبدیل
- ترجمہ کریں
- ترجمہ
- شفافیت
- شفاف
- چالوں
- سچ
- ٹھیٹھ
- سمجھ
- اپ ڈیٹ کریں
- اپ ڈیٹ
- us
- استعمال کی شرائط
- قیمت
- اقدار
- نظر
- طریقوں
- کیا
- کیا ہے
- جس
- جبکہ
- گے
- بغیر
- کام
- کام کر
- کام کرتا ہے
- قابل
- X
- اور
- z-انڈیکس
- زیفیرنیٹ
- صفر