سی ایس ایس 'ڈسپلے' + 'اوپیسٹی' پراپرٹیز کو کیسے منتقل کریں۔

Sy Ays Ays Spl Awpys Y Prapr Yz Kw Kys Mntql Kry



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

یہ پوسٹ سی ایس ایس کی مدد سے منتقلی کو ترتیب دینے کے طریقہ کار کی وضاحت کرتی ہے۔ ڈسپلے 'اور' دھندلاپن پراپرٹیز۔

سی ایس ایس 'ڈسپلے' اور 'اوپیسٹی' پراپرٹیز کو کیسے منتقل کیا جائے؟

سی ایس ایس کو منتقل کرنے کے لیے ' ڈسپلے 'اور' دھندلاپن خصوصیات، سب سے پہلے، کے ساتھ ایک div کنٹینر بنائیں

' عنصر. پھر، div کنٹینر تک رسائی حاصل کریں اور 'کی مدد سے پس منظر کی تصویر شامل کریں پس منظر کی تصویر ' جائیداد. اس کے بعد، سیٹ کریں ' منتقلی '،' دھندلاپن ، اور آپ کی پسند کے مطابق دیگر مطلوبہ خصوصیات۔







مرحلہ 1: ایک 'div' کنٹینر بنائیں

شروع میں اس کی مدد سے ایک div کنٹینر بنائیں۔

کنٹینر اور ایک خاص نام کے ساتھ کلاس وصف شامل کریں۔ ایسا کرنے کے لیے، ہم نے کلاس کا نام رکھا ہے ' آئٹم ”:



= 'اہم شے' > >

مرحلہ 2: 'ڈسپلے' پراپرٹی سیٹ کریں۔

اگلا، کلاس کا نام استعمال کرکے div کنٹینر تک رسائی حاصل کریں۔ اہم شے 'اور سیٹ کریں' ڈسپلے جائیداد:



.main-item {

ڈسپلے : بلاک ;

}

یہاں، کی قدر ' ڈسپلے 'پراپرٹی سیٹ کی گئی ہے' بلاک اسکرین کی تمام چوڑائی لینے کے لیے۔





مرحلہ 3: پس منظر کی تصویر شامل کریں۔

اگلا، رسائی شدہ div کنٹینر پر درج ذیل CSS خصوصیات کا اطلاق کریں:

.main-item {

اونچائی : 400px ;

چوڑائی : 400px ;

پس منظر کی تصویر : یو آر ایل ( spring-flowers.jpg ) ;

دھندلاپن : 0.1 ;

منتقلی : دھندلاپن 2s آسانی سے باہر ;

مارجن : 30px 50px ;

}

اوپر بیان کردہ کوڈ کے ٹکڑوں میں:



  • ' اونچائی 'اور' چوڑائی خصوصیات بیان کردہ عنصر کے سائز کا تعین کرتی ہیں۔
  • ' پس منظر کی تصویر سی ایس ایس پراپرٹی کو اس کی مدد سے امیج داخل کرنے کے لیے استعمال کیا جاتا ہے۔ url() عنصر کے پچھلے حصے میں فنکشن۔
  • ' دھندلاپن ' کسی عنصر کے لیے دھندلاپن کی سطح کا تعین کرتا ہے۔ دھندلاپن کی سطح شفافیت کی سطح کو ظاہر کرتی ہے، جہاں ' 1 'کوئی شفافیت کے لئے استعمال کیا جاتا ہے، اور' 0.5 'کے لیے ہے' پچاس٪ 'شفافیت.
  • ' منتقلی CSS میں صارفین کو ایک مقررہ مدت کے دوران پراپرٹی کی قدروں کو آسانی سے تبدیل کرنے کی اجازت دیتا ہے۔
  • ' مارجن کسی عنصر کے ارد گرد متعین حد سے باہر کی جگہ کی وضاحت کرتا ہے۔

آؤٹ پٹ

مرحلہ 4: ': ہوور' سیوڈو سلیکٹر کا اطلاق کریں۔

اب، div کنٹینر تک رسائی حاصل کریں ' : ہوور ' سیوڈو سلیکٹر جو عناصر کو منتخب کرنے کے لیے استعمال کیا جاتا ہے جب ہم ان پر ماؤس ہوور کرتے ہیں:

.main-item : ہوور {

دھندلاپن : 1 ;

}

پھر، سیٹ کریں ' دھندلاپن 'منتخب کردہ عنصر کا بطور' 1 شفافیت کو دور کرنے کے لیے۔

آؤٹ پٹ

یہ سب کچھ ٹرانزیشن CSS 'ڈسپلے' اور 'مبہم' خصوصیات کو ترتیب دینے کے بارے میں ہے۔

نتیجہ

ٹرانزیشن 'ڈسپلے' اور 'اوپیسٹی' پراپرٹیز کو سیٹ کرنے کے لیے، سب سے پہلے

عنصر کا استعمال کرکے ایک div کنٹینر بنائیں۔ اگلا، div عنصر تک رسائی حاصل کریں اور سیٹ کریں ' ڈسپلے 'جیسے' بلاک ' اس کے بعد، دیگر سی ایس ایس خصوصیات کو لاگو کریں، بشمول ' پس منظر کی تصویر کنٹینر میں تصویر داخل کرنے کے لیے، 'منتقلی'، 'دھندلاپن'، اور دیگر۔ اس پوسٹ نے CSS کے ساتھ منتقلی کو ترتیب دینے کے طریقہ کار کی وضاحت کی ہے۔ ڈسپلے 'اور' دھندلاپن خصوصیات