سی ایس ایس کے ساتھ براؤزر میں کولج اثرات بنائیں

Feb 3, 2026

کيسے

اگر آپ نے ہمیشہ کی خواہش کی ہے تو آپ روایتی اثرات کا پیچھا کرسکتے ہیں کولج میکر آپ میں ویب سائٹ کی ترتیب ، یہ آپ کے لئے سبق ہے.

ویب ڈیزائن ٹیوٹوریل تین سی ایس ایس کی خصوصیات دیکھیں گے: ماسک تصویر ، کلپ راستہ اور شکل سے باہر . یہاں تک کہ اگر آپ نے ان کا استعمال کیا ہے تو فکر مت کرو. میں مثالیں دکھائے گا جو آپ کو ممکنہ اثرات پیدا کرنے میں مدد ملے گی جو آپ نے بہت سے ویب سائٹس پر نہیں دیکھا ہے.

ایک مختلف قسم کے ٹیوٹوریل کی تلاش میں؟ دیکھو فوٹوشاپ میں تصویر کولاج کیسے بنائیں . اور آسان ہدایات کے لئے، سب سے اوپر کا انتخاب کریں ویب سائٹ بلڈر اور ویب میزبانی سروس.

18 اوپر سی ایس ایس حرکت پذیری کی مثالیں

ذکر کردہ خصوصیات کو استعمال کرنے کے لحاظ سے میرا سب سے بڑا حوصلہ افزائی روایتی کولج ہے. میں سوچ رہا تھا کہ اگر کسی بھی گرافکس ایڈیٹرز یا سافٹ ویئر کے استعمال کے بغیر، ویب براؤزر میں ان کو تخلیق کرنا ممکن تھا. سی ایس ایس کے جادو کے ساتھ، یہ مکمل طور پر قابل عمل ہے! کوڈ کے ساتھ ان کی تخلیق کرنے کا ایک اور بونس ان کی سکلیبل، متحرک اور انٹرایکٹو ہے. آپ شروع کرنے سے پہلے، اس بات کو یقینی بنائیں کہ آپ مندرجہ ذیل ہیں:

تمہیں ضرورت پڑے گی:

آپ کے پسندیدہ ویب براؤزر اور ڈویلپر کے اوزار - میں گوگل کروم کا استعمال کرتے ہوئے مشورہ دیتا ہوں کیونکہ میں اس سبق میں استعمال کرتا ہوں تمام خصوصیات کی حمایت کرتا ہوں
ایک کوڈ ایڈیٹر
اثاثوں جیسے تصاویر یا SVG فائلوں - آپ ان لوگوں کو ڈاؤن لوڈ کرسکتے ہیں جو ہم اس ٹیوٹوریل میں استعمال کر رہے ہیں یہاں

ماسک تصاویر جو متن کو ختم کرتی ہیں

CSS masks example — سی ایس ایس ماسک آپ کو خاص اثرات پیدا کرنے کے قابل بناتا ہے - جیسے سائٹ کے سربراہ کو منتخب کرنے کے لئے منتخب کریں اور صارف کے سکرال کے طور پر صفحہ اور نیچے کے طور پر غائب ہو جائیں (اس سے اوپر اس تصویر کو اس تصویر کے برعکس)

ماسکنگ پہلی خصوصیت ہے جسے میں آپ کو ظاہر کرنا چاہتا ہوں. یہ آپ کے براؤزر کو بتا کر ویب پر زیادہ تخلیقی شکلیں اور ترتیبوں کی تعمیر میں مدد ملتی ہے جس میں اثاثہ عناصر نظر آتے ہیں. ماسکنگ تین مختلف طریقوں میں کیا جا سکتا ہے: ایک رسٹر کی تصویر کا استعمال کرتے ہوئے (جو شفاف حصوں کے ساتھ PNG فارمیٹ میں ہے)؛ سی ایس ایس گرڈینٹس؛ یا SVG عناصر. نوٹ کریں کہ ایک عام رسٹر کی تصویر کے برعکس، SVG معیار میں اہم نقصان کے بغیر تیز یا تبدیل کیا جا سکتا ہے.

میں خاص طور پر ماسکنگ کے بارے میں کیا پسند کرتا ہوں اس کے طور پر اسی خصوصیات کو لاگو کرنے کی صلاحیت ہے پس منظر مثال کے طور پر، ہم ماسک کی پوزیشن، سائز اور تکرار کی وضاحت کرسکتے ہیں، مثال کے طور پر: ماسک - دوبارہ: نہیں اور ماسک سائز: کور .

سی ایس ایس ماسکنگ کا شکریہ ہم ویب پر زیادہ جدید ترین اثرات پیدا کرسکتے ہیں. ان میں سے ایک ہماری مثال میں پایا جا سکتا ہے، جہاں تصویر کے حصے کچھ متن کا احاطہ کرتا ہے؛ جب صارف اس صفحے کو اوپر اور نیچے آتا ہے تو متن کے کچھ حصوں کو دکھایا گیا ہے. یہ یہ تاثر دیتا ہے کہ صفحے کا عنوان پہاڑوں کے پیچھے واقع ہے. اس اثر کو تخلیق کرنے کے لئے، کچھ چالیں کی ضرورت ہوتی ہے اور سی ایس ایس ماسک کی ہوشیار درخواست ہمیں حاصل کرنے میں ہماری مدد کرے گی.

چلو ایک منتخب پس منظر کی تصویر اور دو ہیڈر کے اندر اندر ایک ہیڈر بنائیں. ان میں سے ایک بنیادی ایک (سرخی کی پہلی سطح) ہوگی.

 اور ایل ٹی؛ ہیڈر اور جی ٹی؛
        & lt؛ h3 & gt؛ یہ ہے & lt؛ / h3 & gt؛
        & lt؛ h1 & gt؛ & lt؛ اسپین اور GT؛ میرا ساہسک & lt؛ / span & gt؛ & lt؛ / h1 & gt؛
& lt؛ / ہیڈر اور جی ٹی؛

سرخی کا متن اندر رکھا جائے گا & lt؛ اسپین اور جی ٹی؛ ٹیگ. یہ ایک عام چیز نہیں ہے لیکن، اس صورت میں، ہم کنٹینر کو نہیں، سرخی کرنے کے لئے ماسکنگ کا اطلاق کر رہے ہیں.

 ہیڈر {
    چوڑائی: 100VW؛
    اونچائی: 80VH؛
    اوپر: 0؛
    بائیں: آٹو؛
    پس منظر: یو آر ایل (../ تصاویر / زمین کی تزئین کی. jpg) مرکز سب سے اوپر دوبارہ دوبارہ؛
    پس منظر کا سائز: کور؛
}
H1 {
    ماسک: URL (../ تصاویر / mask.svg # ماسکڈ)؛
    - Webkit ماسک: URL (../ تصاویر / زمین کی تزئین - ماسک. png)
مرکز سب سے اوپر نہیں
    ماسک سائز: کور؛
    WebKit ماسک سائز: کور؛
    چوڑائی: 100VW؛
    اونچائی: 80VH؛
    رنگ: #fff؛
    فونٹ سائز: 100px؛
    پوزیشن: رشتہ دار؛
}
H1 اسپین {
    پوزیشن: فکسڈ؛
    ڈسپلے: ان لائن بلاک؛
    متن سیدھا: مرکز؛
    فونٹ خاندان: 'لیبر باسکرویل'، سیرف؛
    چوڑائی: 100VW؛
    اوپر: 80px؛
    فونٹ سٹائل: اٹلی؛
}

سی ایس ایس کیپنگ کا استعمال کرتے ہوئے تصاویر کاٹ دیں

CSS clipping example — کلپ کے راستے آپ کو اس مثال میں پودے کی تصویر کو کاٹنے کے قابل بناتا ہے

چلو ایک اور مثال تلاش کریں اور سی ایس ایس کیپنگ کے بارے میں مزید تلاش کریں. مختصر میں، کی وضاحت کی وضاحت کرتا ہے کہ تصویر کا علاقہ نظر آتا ہے. کاغذ کاغذ کے ٹکڑوں کو کاٹ کرنے کی طرح ہے. شکل کی حد کو کلپ کا راستہ کہا جاتا ہے: راستے کے باہر کچھ بھی پوشیدہ ہو جائے گا، جبکہ راستے کے اندر کچھ بھی نظر آتا ہے. ایک کلپ کے راستے کے ساتھ آپ بھاری PNG فائلوں کو استعمال کرنے کے بجائے اپنی تصویر سے پس منظر کو ہٹا سکتے ہیں. اس کے لئے ہمیں پہلے سے ہی کٹ کے لئے شکل تیار کرنے کی ضرورت ہے.

اس مشق میں مقصد اس پس منظر کو ہٹانے، تصویر سے باہر پلانٹ کلپ کرنا ہے. ہم SVG کوڈ ہماری فائل سے کاپی کر سکتے ہیں اور اسے ایچ ٹی ایم ایل دستاویز میں چسپاں کرسکتے ہیں. کلپ کا راستہ اندر رکھنا پڑتا ہے & lt؛ Defs & gt؛ & lt؛ / defs & gt؛ ٹیگز.

 & lt؛ svg & gt؛
  & lt؛ Defs & gt؛
      & lt؛ clippath id = "کلپ پلانٹ" اور GT؛
     & lt؛ راہ D = "M293.2،524.8C0،3.3،0 ... [اور زیادہ نمبرز]" اور جی ٹی؛
     & lt؛ / clippath & gt؛
  & lt؛ / defs & gt؛
& lt؛ / svg & gt؛
& lt؛ div class = "پلانٹ" اور GT؛ & lt؛ / div & gt؛

بعد میں ہم آسانی سے ایس وی جی کوڈ میں بیان کردہ راستے کا حوالہ دیتے ہیں یو آر ایل فنکشن

 .پلانٹ {
    اونچائی: 700px؛
    پس منظر کی تصویر: یو آر ایل (../ تصاویر / plant.jpg)؛
    پس منظر کا سائز: کور؛
    پوزیشن: رشتہ دار؛
    پس منظر - دوبارہ: نہیں دوبارہ؛
    WebKit کلپ کا راستہ: یو آر ایل ("# کلپ پلانٹ")؛
    کلپ راہ: یو آر ایل ("# کلپ پلانٹ")؛}

محدود دائرے سے باہر نکل کر سوچیں

clipping in CSS example — آپ استعمال کر سکتے ہیں **شکل کے اندر** اور **شکل سے باہر** تمام قسم کے سائز بنانے کے لئے

کون نے کہا کہ ٹیکسٹ کنٹینرز ہمیشہ آئتاکار بننے کی ضرورت ہے؟ مواد کو لاگو کرکے مختلف قسم کے مختلف سائز میں کاٹ دیا جا سکتا ہے شکل سے باہر اور شکل کے اندر خصوصیات جو آپ کو سی ایس ایس میں اپنی مرضی کے راستوں کے ارد گرد آپ کے مواد کو لپیٹ کرنے کے قابل بناتا ہے.

تو، یہ کیسے کام کرتا ہے؟ صرف درخواست شکل سے باہر دی گئی فلائی تصویر یا کنٹینر کو. یہ نوٹ کرنا ضروری ہے کہ فلوٹ پراپرٹی اور عنصر کے طول و عرض - اونچائی یا چوڑائی - دوسری صورت میں یہ کام نہیں کرتا. آپ استعمال کر سکتے ہیں یو آر ایل () فنکشن، جو قابل بناتا ہے شکل سے باہر SVG فائل سے راستے پر مبنی ایک عنصر شکل کی وضاحت کرنے کے لئے جائیداد.

 .اگر خط {
    پس منظر کی تصویر: URL ('../ تصاویر / گولڈ-BG.jpg')؛
    پس منظر کا سائز: 1000px؛
    - WebKit ماسک-تصویر: یو آر ایل ('../ تصاویر / A-lister2.svg')؛
    WebKit ماسک-جامع: ماخذ آؤٹ؛
    - بیکک - ماسک - دوبارہ: کوئی بار بار نہیں؛
    WebKit ماسک سائز: 300px؛
    چوڑائی: 100٪؛
    اونچائی: 60vh؛
    پوزیشن: رشتہ دار؛
    اوپر: 0px؛
    پس منظر منسلک: فکسڈ؛
    فلوٹ: بائیں؛
    ڈسپلے: ان لائن بلاک؛
    چوڑائی: 310px؛
    شکل مارجن: 23px؛
    شکل سے باہر: یو آر ایل ('../ تصاویر / mask.svg')؛
}

The. شکل سے باہر جائیداد اس کے فلوٹ کے علاقے کے علاوہ کسی عنصر کے بارے میں کچھ بھی تبدیل نہیں کرتا. اس کا مطلب یہ ہے کہ کسی بھی سرحدوں اور پس منظر کی تصاویر عنصر پر پیدا کی شکل میں اپنائیں. یہی وجہ ہے کہ ہمیں بھی درخواست دینے کی ضرورت ہے ماسک تصویر پراپرٹی - مقرر کردہ شکل سے ملنے کے لئے عنصر کے پس منظر کو کاٹنے کے لئے.

نوٹ کرنے کے لئے ایک اہم بات یہ ہے کہ شکل سے باہر خصوصیت صرف CORS فعال فائلوں کے ساتھ کام کرتا ہے. CORS کراس اصل وسائل کے حصول کے لئے کھڑا ہے.

اس خاص معاملے میں یہ دیکھنے کا بہترین طریقہ مقامی ہسٹسٹ کا استعمال کرنا ہے، ورنہ یہ کام نہیں کرے گا اگر آپ صرف اپنے براؤزر میں کھولیں.

استعمال کرتے وقت، براہ کرم ذہن میں رکھو کہ تمام ذکر کردہ خصوصیات تمام براؤزرز کی طرف سے حمایت نہیں کی جاتی ہیں، لہذا یہ ان کی جانچ پڑتال کے قابل ہے یہاں . تازہ ترین مثال فائر فاکس، اوپیرا اور یعنی یعنی میں کام نہیں کرتا لیکن امید ہے کہ یہ تمام براؤزرز کے لئے جلد ہی دستیاب ہوگا. اور اگر آپ کے منصوبے کے لئے ذخیرہ کرنے کے لئے بہت سے دستاویزات ہیں تو، انہیں محفوظ طریقے سے محفوظ رکھیں کلاؤڈ اسٹوریج .

مزید پڑھ:

سی ایس ایس میں متغیر فونٹ کے ساتھ شروع کریں
سی ایس ایس گرڈ کا استعمال کرنے کے لئے ایک جامع گائیڈ
اب نئی کوشش کرنے کے لئے کس طرح نئے سی ایس ایس قواعد ہیں

سی ایس ایس کے ساتھ براؤزر میں کولج اثرات بنائیں

تمہیں ضرورت پڑے گی:

ماسک تصاویر جو متن کو ختم کرتی ہیں

سی ایس ایس کیپنگ کا استعمال کرتے ہوئے تصاویر کاٹ دیں

محدود دائرے سے باہر نکل کر سوچیں

کيسے - انتہائی مشہور مضامین

جانوروں کو کیسے ڈراؤ: 15 اوپر تجاویز

artrage 6 سے زیادہ حاصل کریں: آپ کے کام کے بہاؤ کو فروغ دینے کے لئے اوپر کی تجاویز

زبرش میں ایک ویڈیو گیم کردار کیسے بنائیں

ایک اے پی پی کی تعمیر کیسے کریں

ایک ساخت میں متحرک تحریک بنائیں

آپ کے براؤزر میں SVG گرافکس ڈیزائن

ایک ڈیجیٹل ایٹچ ایک خاکہ بنائیں

برانڈنگ پیشہ اس بات کا اشتراک کریں کہ وہ برانڈ کی آواز کیسے کریں

اقسام