CSS3 کے ساتھ ویب پیج عناصر کو ختم اور باہر بنائیں

سی ایس ایس 3 ٹرانزیشنیں اچھے موثر اثرات بنائیں

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

سی ایس ایس 3 کا استعمال کرتے ہوئے آپ اپنی ویب سائٹ میں عناصر میں اضافہ کرسکتے ہیں جو بہت اچھے بصری اثر کو دھندلاپن اور منتقلی کے حصول کے استعمال میں استعمال کرتے ہیں. یہ ایک آسان اور اچھی سہولیات ہے جس کے ذریعے آپ کے صفحات کو فضا شدہ علاقوں بنانے کے لۓ زیادہ انٹرایکٹو بننے کے لۓ توجہ مرکوز ہوجاتا ہے جب سائٹ کے وزیٹر کچھ ایسا کرتا ہے، جیسے اس عنصر کو ہورانا.

آئیے آپ کے ویب صفحات پر مختلف عناصر پر اس بات چیت بصری اثر کو شامل کرنے کے لئے کتنا آسان ہے کہ ایک نظر ڈالیں.

ہور پر دھندلاپن تبدیل کریں

جب ہم ایک عنصر پر اس عنصر پر ہور رہا ہے تو ہم اس تصویر کے بارے میں نظر آتے ہیں. اس مثال کے لئے (ایچ ٹی ایم ایل ذیل میں دکھایا گیا ہے) میں گرڈ آؤٹ کی کلاس کی خصوصیت کے ساتھ تصویر کا استعمال کر رہا ہوں.

یہ صاف کرنے کے لئے، ہم اپنے سی ایس ایس شیلیوں شیٹ میں مندرجہ ذیل سٹائل کے قوانین کو شامل کرتے ہیں:

.greydout {
ویب کیٹ-افادیت: 0.25؛
-موز-افادیت: 0.25؛
دھندلاپن: 0.25؛
}

یہ دھندلاپن کی ترتیبات میں 25٪ کا ترجمہ ہے. اس کا مطلب یہ ہے کہ اس تصویر کو عام شفافیت کا 1/4 دکھایا جائے گا. کوئی شفافیت کے ساتھ مکمل طور پر ناپسندی 100٪ ہو گی اور 0 فیصد مکمل طور پر شفاف ہو گی.

اگلا، اس تصویر پر بنانے کے لئے (یا زیادہ درست طریقے سے، مکمل طور پر غیر متوقع بننے کے لئے) آتے ہیں جب ماؤس اس پر ہورہی ہے تو، آپ کو شامل کریں گے: ہور چھسو کلاس:

.گریڈی آؤٹ: ہور {
ویب کی طرف سے استحکام: 1؛
-موز-استحکام: 1؛
دھندلاپن: 1؛
}

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

اگر آپ اس سائٹ پر تعیناتی کرتے ہیں، تو آپ یہ دیکھیں گے کہ یہ دھندلاپن ایڈجسٹمنٹ بہت خراب تبدیلی ہے. سب سے پہلے یہ سرمئی ہے اور پھر ان دونوں کے درمیان کوئی لاتعداد ریاستوں کے ساتھ نہیں ہے. یہ ایک ہلکی سوئچ کی طرح ہے - یا بند. یہ ہو سکتا ہے کہ آپ چاہتے ہیں، لیکن آپ اس تبدیلی کے ساتھ بھی تجربہ کرنا چاہتے ہیں جو زیادہ آہستہ آہستہ ہے.

واقعی اچھا اثر شامل کرنے کے لئے اور یہ آہستہ آہستہ ختم کرنے کے لئے، آپ گریڈیڈ کلاس میں منتقلی جائیداد شامل کرنا چاہتے ہیں:

.greydout {
ویب کیٹ-افادیت: 0.25؛
-موز-افادیت: 0.25؛
دھندلاپن: 0.25؛
ویب سائٹ کے منتقلی: تمام 3s آسانی سے؛
مووم ٹرانسمیشن: تمام 3 آسانی سے؛
حساس منتقلی: تمام 3 آسانی سے؛
- منتقلی: تمام 3s آسانی؛
منتقلی: تمام 3 آسانی سے؛
}

اس کوڈ کے ساتھ، تبدیلی آہستہ آہستہ سوئچنگ کے بجائے آہستہ آہستہ منتقل کرے گا.

ایک دفعہ، ہم یہاں ایک بہت سے فروغ کے پہلے سے طے شدہ قوانین استعمال کر رہے ہیں. منتقلی کے ساتھ ساتھ استحکام کے طور پر بھی حمایت نہیں کی جاسکتی ہے، لہذا یہ پیش نظر سمجھتے ہیں.

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

باہر دھندلاہت ممکن ہے

آپ کو ایک متعدد تصویر کے ساتھ شروع کرنے کی ضرورت نہیں ہے، آپ مکمل طور پر غیر متوقع تصویر سے نکالنے کے لئے ٹرانزیشن اور استحکام کا استعمال کرسکتے ہیں. ایک ہی تصویر کا استعمال کرتے ہوئے، صرف ایک کلاس کے ساتھ.

کلاس = "withfadeout">

اس طرح سے پہلے، آپ کو استعمال کرتے ہوئے استحکام کو تبدیل کرتے ہیں: ہور منتخب کنندہ:

.کے علاوہ {
ویب ٹرانسمیشن: تمام 2 سکیم آسان؛
مووم ٹرانسمیشن: تمام 2 سکیم آسان؛
حساس منتقلی: تمام 2 سکیم آسان؛
- منتقلی: تمام 2 سکیم آسان؛
منتقلی: تمام 2 سکیم آسان؛
}
.withfadeout: ہور {
ویب کیٹ-افادیت: 0.25؛
-موز-افادیت: 0.25؛
دھندلاپن: 0.25؛
}

اس مثال میں، تصویر مکمل طور پر غیر متوقع طور پر کسی حد تک شفاف سے منتقلی کرے گی - ہماری پہلی مثال کا ردعمل.

تصاویر سے باہر جا رہے ہیں

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

بنیادی طور پر کسی بھی بصری عنصر کو ختم کرنا ممکن ہوسکتا ہے جب ہور ہو یا پر کلک کریں. اس مثال میں میں اس کے مایوس کو تبدیل کرتا ہوں اور متن کا رنگ تبدیل کرتا ہوں جب ماؤس اس پر ہوتا ہے. یہاں سی ایس ایس ہے:

#myDiv {
چوڑائی: 280px؛
پس منظر کا رنگ: # 557A47؛
رنگ: #dfdfdf؛
بھرتی: 10px؛
ویب سائٹ کے منتقلی: تمام 4s آسانی سے 0s؛
مووم ٹرانسمیشن: تمام 4s آسانی سے 0s؛
حساس منتقلی: تمام 4s آسانی سے 0s؛
- منتقلی: تمام 4s آسانی سے 0s؛
منتقلی: تمام 4s آسانی سے 0s؛
}
#myDiv: ہور {
ویب کیٹ-افادیت: 0.25؛
-موز-افادیت: 0.25؛
دھندلاپن: 0.25؛
رنگ: # 000؛
}

نیوی گیشن مینو پس منظر کے رنگوں کو تباہ کرنے سے فائدہ اٹھا سکتے ہیں

اس آسان نیویگیشن مینو میں پس منظر کا رنگ مینو اشیاء کے اوپر آہستہ آہستہ اندر اور باہر fades. یہاں ایچ ٹی ایم ایل ہے:

• • گھر
  • • CSS3 سبق
    • • CSS3 پراپرٹیز

اور یہاں سی ایس ایس ہے:

ul # sampleNav {فہرست طرز: کوئی نہیں؛ }
ul # sampleNav li {
ڈسپلے: ان لائن؛
فلوٹ: بائیں؛
بھرتی: 5px 15px؛
مارجن: 0 5px؛
ویب سائٹ کی منتقلی: تمام 2 لکیری؛
مووم ٹرانسمیشن: تمام 2 لکیری؛
حساس منتقلی: تمام 2 لکیری؛
- منتقلی: تمام 2 لکیری؛
منتقلی: تمام 2 لکیری؛
}
ul # sampleNav ایک {ٹیکسٹ سجاوٹ: کوئی نہیں؛ }
ul # sampleNav li: hover {
پس منظر کا رنگ: # DAF197؛
}

براؤزر سپورٹ

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

اضافی تفریح؛ دو تصاویر کو تبدیل کریں

یہاں ایک مثال یہ ہے کہ کسی تصویر کو ایک دوسرے کو کیسے جلایا جائے. ایچ ٹی ایم ایل کا استعمال کریں:

اور سی ایس ایس جو ایک مکمل طور پر شفاف بناتا ہے جبکہ دوسرا مکمل طور پر غیر متوقع ہے اور پھر منتقلی دونوں کو تبدیل کرتی ہے.

.swapMe img {ویب سائٹ - منتقلی: تمام 1s آسانی سے باہر؛ مووم ٹرانسمیشن: تمام 1 سکیم آسان؛ حساس منتقلی: تمام 1s آسان میں؛ - منتقلی: تمام 1s آسان میں؛ منتقلی: تمام 1 سکس آسان؛ } .swap1، .swapMe: ہور .swap2 {-webkit-opacity: 1؛ -موز-استحکام: 1؛ دھندلاپن: 1؛ } .swapMe: ہور .swap1، .swap2 {-webkit-opacity: 0؛ -موز-افادیت: 0؛ دھندلاپن: 0؛ }