انٹرنیٹویب ڈیزائن

سی ایس ایس کے سائے: بنانے کا طریقہ

اندھیرے کے بغیر سایہ کے بغیر کوئی روشنی کوئی فارم نہیں ہے. کہا جاتا ہے خواتین کے لیے بھی بنیادی میک اپ کے آلے "سائے". آپ کو اپنے صفحات پر خوبصورتی لانے کے لئے چاہتے ہیں، تو آپ صحیح زور دینے کی ضرورت ہے - CSS-سایہ اس کی ضرورت ہے جہاں پر شامل کریں.

مواد ذیل میں پیش کیا تم سایہ نصب کرنے یا سی ایس ایس کے کوڈ کا استعمال کرتے ہوئے تصاویر کو مسدود کرنے کا طریقہ جاننے میں مدد ملے گی.

سی ایس ایس کے سائے. نحو

دراصل باکس سائے، باکس جہاں - ایک بلاک اور سائے - یہ خود ایک سایہ ہے.

کوڈ کے منحنی خطوط وحدانی میں لکھا:

{باکس سائے: 11px 22px 33px 44px میں # 333333؛}.

لائن آف ہمیں بتاتا یونٹ سائے پکسل رداس کے ساتھ معیاری لئے مقرر کیا جاتا ہے کہ. مندرجہ ذیل کے طور پر اعداد و شمار کے decrypted ہے:

  • 11px - سائے آفسیٹ X محور پر بلاک کرنے کے رشتہ دار (مثبت قدر (20px) حق سائے، منفی (-37px) میں منتقل کرے گا - بائیں)؛
  • 22px - (سایہ کے نیچے منفی (-17px) کی ایک شفٹ میں مثبت قدر (5px) کو لیڈ - اوپر) بلاک کی Y محور کرنے کے لئے احترام کے ساتھ سائے displacements کے؛
  • 33px - اس کلنک پیرامیٹر، زیادہ تعداد، مضبوط اثر؛
  • 44px میں - سائے کے رداس، اور براہ راست متناسب ہے؛
  • # 333333 - رنگ، جس کے سایہ میں رنگا ہوا ہے.

گزشتہ تین پیرامیٹرز اختیاری ہیں اور صرف سٹرنگ میں لپ کیا جا سکتا ہے، یعنی {باکس سائے: 10px 13px؛ } - .. اس طرح ایک لائن نہیں غلط ہے (چھایا رنگ بلاک میں متن کا رنگ ایک جیسی ہے).

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

کچھ تشریحی مثالوں پر غور کریں، یہ کوڈنگ کے مطابق سائے CSS بلاک کی طرح دکھائی دیتی ہے:

  1. {باکس سائے: 25px 25px؛} - سی ایس ایس کی چھایا 25 پکسلز آفسیٹ محور.
  2. {باکس سائے: 25px 25px 10px؛} - سی ایس ایس کی چھایا آفسیٹ 25 پکسلز اور کناروں 10 پکسلز دھندلاہٹ محور.
  3. {باکس سائے: 25px 25px 10px 5px؛} - سی ایس ایس کی چھایا آفسیٹ محور 25 پکسلز، کلنک 10 پکسلز کناروں اور 5 پکسلز کی ایک پہلے سے مقرر رداس
  4. {باکس سائے: 25px 25px 10px 5px # 9e9e9e؛} - سی ایس ایس کی چھایا 25 پکسلز آفسیٹ محور، کلنک 10 پکسلز، 5 پکسلز اور رنگ کی ایک رداس کی وضاحت کناروں.

شیڈو چھوڑ

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

{باکس سائے: لگانا 4px کے 2px 6px # 9e9e9e؛}.

یہ ممکن ہے کہ بلاک کوڈ میں مکمل طور پر مختلف پیرامیٹرز کے ساتھ چند سائے، وہ (سائے) کوما سے علیحدہ درج ہیں تحت ڈال کرنے کے لئے:

{باکس سائے: -20px -10px 11px 15px # 800080، -50px -40px 5px 10px # daa520، 20px 10px 11px 15px # 0700f9، 50px 40px سے 5px 10px # ffa500}.

سائے کی تصاویر

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

اس مسئلے کا سب سے زیادہ سادہ اور syntactically درست حل - یونٹ کی تخلیق، آپ کی تصویر میں پس منظر Kotormo گا. اگلا، آپ یونٹ کے لئے ضروری سایہ بناتے ہیں اور وہ پس منظر کی تصویر پر ظاہر کئے جاتے ہیں:

  • .block1 {باکس سائے: لگانا 0 0 11px 9px # 9e9e9e؛ چوڑائی: 480px کے؛ اونچائی: 360px؛ پس منظر: یو آر ایل (تصاویر / charlize_theron_2.jpg) 0 0 کوئی دہرانے؛}

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

سی ایس ایس کے کوڈ کا استعمال کرتے ہوئے سائے پیدا کرنے کے لئے اتفاق کرتا ہوں - یہ بہت آسان ہے، ابھی تک دلچسپ ہے، اور سب سے اہم - مفید مشق.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 ur.atomiyme.com. Theme powered by WordPress.