CSS3 افادیت کے بارے میں جانیں

آپ کے پس منظر شفاف بنانا

ایسی چیزوں میں سے ایک جو آپ آسانی سے پرنٹ ڈیزائن میں کرسکتے ہیں لیکن ویب پر نہ کسی تصویر یا رنگ کے پس منظر پر متن پڑھتے ہیں اور اس تصویر کی شفافیت کو تبدیل کرتے ہیں تاکہ متن پس منظر میں بدل جائے. لیکن CSS3 میں ایک پراپرٹی ہے جس سے آپ کو آپ کے عناصر کی افادیت کو تبدیل کرنے میں مدد ملے گی تاکہ وہ اندر اور باہر کھڑے ہوجائیں.

استحکام پراپرٹی کا استعمال کیسے کریں

دھندلاپن جائیداد 0.0 سے 1.0 تک شفافیت کی مقدار کا ایک قدر ہے.

0.0 100٪ شفاف ہے- اس عنصر کے نیچے کچھ بھی مکمل طور پر دکھائے گا. 1.0 ہے 100٪ غیر متوقع - عنصر کے نیچے کچھ بھی نہیں دکھایا جائے گا.

لہذا 50 فیصد شفاف عنصر مقرر کرنے کے لئے، آپ لکھ لیں گے:

استحکام: 0.5؛

کارروائی میں دھندلاپن کے کچھ مثالیں ملاحظہ کریں

پرانے براؤزرز میں ٹیسٹ کرنے کے لئے ضرور رہیں

نہ ہی IE 6 اور نہ ہی سی ایس ایس 3 کی غیر معمولی جائیداد کی حمایت کرتے ہیں. لیکن آپ قسمت سے باہر نہیں ہیں. اس کے بجائے، IE مائیکروسافٹ صرف پراپرٹی الفا فلٹر کی حمایت کرتا ہے. IE میں الفا فلٹر 0 (مکمل طور پر شفاف) سے 100 (مکمل طور پر غیر متوقع) اقدار کو قبول کرتے ہیں. لہذا، IE میں آپ کی شفافیت حاصل کرنے کے لئے، آپ کو اپنی دھندلاپن کو 100 کی طرف سے ضائع کرنا اور اپنی شیلیوں میں الفا فلٹر شامل کرنا چاہئے:

فلٹر: الفا (استحکام = 50)؛

کارروائی میں الفا فلٹر دیکھیں (صرف IE)

اور براؤزر کے ضمنی استعمال کریں

آپ کو - moz- اور -webkit- prefixes استعمال کرنا چاہئے تاکہ موزیلا اور ویبکٹ براؤزرز کے پرانے ورژن اس سے بھی تعاون کریں:

ویب کٹ-استحکام: 0.5؛
-موز-افادیت: 0.5؛
استحکام: 0.5؛

ہمیشہ سب سے پہلے براؤزر کے پہلے خطوط ڈالیں، اور درست CSS3 پراپرٹی آخری.

پرانے موزیلا اور ویبکٹ براؤزرز میں براؤزر کے ضمیمہ کو آزمائیں.

آپ کو شفاف تصاویر بنا سکتے ہیں

تصویر پر آپس میں استحکام مقرر کریں اور یہ پس منظر میں ختم ہوجائے گا. یہ پس منظر کی تصاویر کے لئے واقعی مفید ہے.

اور اگر آپ لنگر ٹیگ میں شامل ہوتے ہیں تو آپ تصویر کے ابلاغ کو تبدیل کرکے صرف ہور اثرات بنا سکتے ہیں.

ایک: ہور img {
فلٹر: الفا (افادیت = 50)
فلٹر: progid: DXImageTransform.Microsoft.Alpha (افادیت = 50)
-موز-افادیت: 0.5؛
ویب کٹ-استحکام: 0.5؛
استحکام: 0.5؛
}

اس HTML کو متاثر کرتا ہے:

مندرجہ ذیل شیلیوں اور ایچ ٹی ایم ایل کی کارروائی میں ٹیسٹ کریں.

اپنی تصاویر پر متن رکھو

دھندلاپن کے ساتھ، آپ ایک تصویر پر متن رکھ سکتے ہیں اور اس تصویر کو یہ پتہ چلتا ہے کہ یہ متن کہاں ہے.

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

1. سب سے پہلے آپ ایک کنٹینر ڈیویئیر تخلیق کرتے ہیں اور اپنی تصویر کو اندر اندر رکھیں:

   
   

2. تصویر کو خالی ڈی وی کے ساتھ عمل کریں - یہ وہی ہے جو آپ شفاف بناؤ گے.

   
   
   

3. آپ HTML میں شامل ہونے والی آخری چیز اس میں آپ کے متن کے ساتھ ڈی آئی آئی ہے:

   
   
   
   یہ میرا کتا شاستا ہے. کیا وہ پیارا نہیں ہے

4. آپ اس تصویر پر اوپر متن رکھنے کے لئے، سی ایس ایس کی پوزیشننگ کے ساتھ طرز کرتے ہیں. میں نے اپنے متن کو بائیں طرف رکھ دیا، لیکن آپ اسے دو بائیں کو تبدیل کر کے دائیں طرف ڈال سکتے ہیں: 0؛ حق کے لئے خصوصیات: 0؛ .

   #تصویر {
   پوزیشن: رشتہ داری؛
   چوڑائی: 170px؛
   اونچائی: 128px؛
   مارجن: 0؛
   }
   #text {
   پوزیشن: مطلق؛
   اوپر: 0؛
   بائیں: 0؛
   چوڑائی: 60px؛
   اونچائی: 118px؛
   پس منظر: #fff؛
   بھرتی: 5px؛
   }
   #text {
   فلٹر: الفا (استحکام = 70)؛
   فلٹر: progid: DXImageTransform.Microsoft.Alpha (افادیت = 70)؛
   -موز-افادیت: 0.70؛
   دھندلاپن: 0.7؛
   }
   #words {
   پوزیشن: مطلق؛
   اوپر: 0؛
   بائیں: 0؛
   چوڑائی: 60px؛
   اونچائی: 118px؛
   پس منظر: شفاف؛
   بھرتی: 5px؛
   }

دیکھو کہ یہ کیسے لگ رہا ہے