01 کے 04
CSS3 کے ساتھ کراس براؤزر لینر گرڈینٹس کی تشکیل
لکیری گرڈینٹس
آپ کو نظر آئے گا اس کے سب سے زیادہ عام قسم کے دو رنگوں کی ایک لکیری خالی ہے. اس کا مطلب یہ ہے کہ مریض آہستہ آہستہ پہلی رنگ سے اس قطار کے ساتھ دوسری طرف تبدیل کرنے کی براہ راست لائن میں منتقل ہو جائے گا. اس صفحے پر تصویر # 999 (سیاہ سرمئی) # بائیں (سفید) میں ایک بائیں سے دائیں دائرے میں دکھاتا ہے.
لکیری گرڈینٹ سب سے آسان ہیں، اور براؤزرز میں سب سے زیادہ حمایت کی وضاحت کریں. CSS3 لکیری gradients لوڈ، اتارنا Android 2.3+، کروم 1+، فائر فاکس 3.6+، اوپیرا 11.1+، اور سفاری 4+ میں حمایت کر رہے ہیں. انٹرنیٹ ایکسپلورر فلٹر کا استعمال کرتے ہوئے فلٹر کا استعمال کرسکتا ہے اور IE 5.5 پر ان کی حمایت کرتا ہے. یہ CSS3 نہیں ہے، لیکن یہ کراس براؤزر مطابقت کے لئے ایک اختیار ہے.
جب آپ فریڈٹی کی وضاحت کرتے ہیں تو آپ کو کئی مختلف چیزوں کی وضاحت کرنے کی ضرورت ہے:
- یہ کس قسم کی تدریجی ہے- لکیری یا ریڈیل
- جہاں تدریر شروع ہونا چاہئے
- جہاں تدریر کو روکنا چاہئے
- کیا رنگیں مریض میں ہیں اور وہ کہاں سے شروع کریں اور روکے ہیں
CSS3 استعمال کرتے ہوئے لکیری گرڈینٹس کی وضاحت کرنے کے لئے، آپ لکھتے ہیں:
لکیری-تدریری ( زاویہ یا طرف یا کونے ، رنگ سٹاپ ، رنگ سٹاپ )
- سب سے پہلے آپ نامیاتی قسم کے ساتھ مریض کی قسم کی وضاحت کرتے ہیں.
- اس کے بعد، آپ کو دو طریقوں میں مریض کے آغاز اور سٹاپ کی وضاحت کی وضاحت: 0 سے 359 تک ڈگری میں لائن کا زاویہ، 0 ڈگری کے ساتھ براہ راست اوپر اشارہ. یا "بائیں یا کونے" تقریب کے ساتھ، بائیں، دائیں، نیچے، اور اوپر کے طور پر. اگلے صفحے پر یہ مزید تفصیل سے وضاحت کی جائے گی. اگر آپ ان کو چھوڑ دیں تو، عنصر عنصر کے نچلے حصے سے اوپر بہاؤ گا.
- پھر آپ رنگ رک جاتا ہے. آپ رنگ کو رنگ کوڈ اور ایک اختیاری فیصد کے ساتھ روکتا ہے کی وضاحت کرتے ہیں. فی صد براؤزر کو بتاتا ہے جہاں لائن پر اس رنگ سے شروع یا اختتام کرنا ہے. ڈیفالٹ یہ ہے کہ رنگ کے ساتھ ساتھ رنگیں برابر رکھیں. آپ صفحہ 3 پر رنگ اسٹاپ کے بارے میں مزید سیکھیں گے.
لہذا، CSS3 کے ساتھ اوپر درجے کی وضاحت کرنے کے لئے، آپ لکھتے ہیں:
لکیری میلے (بائیں، # 999999 0٪، #ffffff 100٪)؛
اور اسے ڈی وی کے پس منظر کے طور پر مقرر کرنے کے لئے آپ لکھتے ہیں:
div {
پس منظر کی تصویر: لکیری-تدریری (بائیں، # 999999 0٪، #ffffff 100٪؛
}
CSS3 لینکر گرڈینٹس کے لئے براؤزر کی توسیع
کرغیز براؤزر کو کام کرنے کے لئے اپنے مریض کو حاصل کرنے کے لئے، آپ کو زیادہ تر براؤزروں کے لئے براؤزر کی توسیع اور انٹرنیٹ ایکسپلورر 9 کے لئے ایک فلٹر اور دراصل (اصل میں 2 فلٹرز) کا استعمال کرنا ہوگا. ان سبھی آپ کو فریم ورک کی وضاحت کرنے کے لئے اسی عناصر کو لے لیتے ہیں (اس کے علاوہ کہ آپ صرف IE میں 2 رنگ گرڈینٹس کی وضاحت کرسکتے ہیں).
مائیکروسافٹ فلٹر اور توسیع - انٹرنیٹ ایکسپلورر کی حمایت کرنے میں سب سے زیادہ مشکل ہے، کیونکہ آپ کو مختلف براؤزر کے ورژن کی حمایت کے لئے تین مختلف لائنوں کی ضرورت ہے. اوپر سفید بھوری رنگ کو حاصل کرنے کے لئے آپ لکھ لیں گے:
/ * IE 5.5-7 * /
فلٹر: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999'، endColorstr = '# ffffff'، GradientType = 1)؛
/ * IE 8-9 * /
- فلٹر: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999'، endColorstr = '# ffffff'، GradientType = 1)"؛
/ * IE 10 * /
سوفٹ ویئر کی تدریری (بائیں، # 999999 0٪، #ffffff 100٪)؛
موزیلا توسیع -مورز- توسیع صرف - Moz- توسیع کے ساتھ، صرف CSS3 پراپرٹی کی طرح کام کرتا ہے. فائر فاکس کے لئے اوپر کے فریم ورک حاصل کرنے کے لئے، لکھیں:
-موز لائنر-میلائنٹ (بائیں، # 999999 0٪، #ffffff 100٪)؛
اوپیرا کی توسیع - توسیع - توسیع گرادینٹ اوپیرا 11.1 + کو جوڑتا ہے. اوپر کی تدریر حاصل کرنے کے لئے، لکھیں:
-و-لائنر-تدریری (بائیں، # 999999 0٪، #ffffff 100٪)؛
ویبکٹ توسیع - ویب سائٹ - توسیع CSS3 پراپرٹی کی طرح بہت کام کرتا ہے. صفاری 5.1 + یا کروم 10 + کے لئے اوپر درجے کی وضاحت کرنے کے لئے آپ لکھتے ہیں:
ویب لنٹ-صفر (بائیں، # 999999 0٪، #ffffff 100٪)؛
ویبکٹ توسیع کا ایک پرانے ورژن بھی ہے جو Chrome ++ اور سفاری 4+ کے ساتھ کام کرتا ہے. اس میں آپ جائیداد کے نام کے بجائے آپ کو ایک قدر کے طور پر میدان کی قسم کی وضاحت کرتے ہیں. اس توسیع کے ساتھ سفید مریض کو سرمئی حاصل کرنے کے لئے، لکھیں:
ویب کٹ-میلانڈر (لکیری، بائیں اوپر، دائیں اوپر، رنگ سٹاپ (0٪، # 999999)، رنگ سٹاپ (100٪، # ffffff))؛
مکمل CSS3 لینکر گریجویٹ CSS کوڈ
پورے کراس براؤزر کی حمایت کے لئے آپ کے اوپر سفید فریم ورک میں سرمئی حاصل کرنے کے لئے سب سے پہلے براؤزروں کے لئے ایک fallback ٹھوس رنگ میں شامل ہونا چاہئے جس میں gradients کی حمایت نہیں کرتے، اور آخری شے براؤزرز کے لئے CSS3 سٹائل ہونا چاہئے جو مکمل طور پر مطابق ہیں. تو، آپ لکھتے ہیں:
پس منظر: # 999999؛
پس منظر: -موز لائنر-تدریری (بائیں، # 999999 0٪، #ffffff 100٪)؛
پس منظر: -مطالب - تدریری (لکیری، بائیں اوپر، دائیں اوپر، رنگ سٹاپ (0٪، # 999999)، رنگ سٹاپ (100٪، # ffffff))؛
پس منظر: -مطابق لکیری-تدریری (بائیں، # 999999 0٪، #ffffff 100٪)؛
پس منظر: -و-لکیری-تدریری (بائیں، # 999999 0٪، #ffffff 100٪)؛
پس منظر: -میں لکیری-تدریری (بائیں، # 999999 0٪، #ffffff 100٪)؛
فلٹر: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999'، endColorstr = '# ffffff'، GradientType = 1)؛
- فلٹر: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999'، endColorstr = '# ffffff'، GradientType = 1)؛
پس منظر: لکیری-تدریری (بائیں، # 999999 0٪، #ffffff 100٪)؛
اس ٹیوٹوریل میں اگلے صفحات کو مزید تفصیل میں ایک مریض کے حصوں کی وضاحت کرتے ہیں، اور آخری صفحہ آپ کو ایسے آلے میں اشارہ کرتا ہے جو خود بخود CSS3 گرڈینٹ بنانے کا بہترین طریقہ ہے.
صرف سی ایس ایس کا استعمال کرتے ہوئے کارروائی میں اس لکیری مریض دیکھیں.
02 کے 04
ڈریگن Gradients کی تخلیق - گریجویٹ کے زاویہ
ابتدائی اور سٹاپ پوائنٹس تدریجی زاویہ کا تعین کرتے ہیں. زیادہ سے زیادہ لکیری گرڈینٹس اوپر سے نیچے ہیں یا دائیں طرف بائیں طرف ہیں. لیکن یہ ممکن ہے کہ ایک فریری تخلیق کریں جو ویرل لائن پر چلتا ہے. اس صفحے پر تصویر ایک سادہ مریض ظاہر کرتا ہے جو دائیں جانب بائیں طرف تصویر میں 45 ڈگریگری زاویہ میں چلتا ہے.
گریجویشن لائن کی وضاحت کرنے کے لئے زاویہ
زاویہ عنصر کے مرکز میں ایک تصوراتی دائرے پر ایک قطار ہے. 0 ڈی جی پوائنٹس، دائیں جانب 90 ڈگری پوائنٹس، 180 ڈگری پوائنٹس نیچے، اور بائیں طرف 270 ڈگری پوائنٹس. آپ 0 سے 359 ڈگری سے کسی زاویہ کی وضاحت کرسکتے ہیں.
آپ کو یہ یاد رکھنا چاہئے کہ ایک مربع میں 45 ڈگری زاویہ اوپر بائیں کونے سے دائیں بائیں طرف چلتا ہے، لیکن آئتاکار میں شروع اور اختتام پوائنٹس شکل سے تھوڑا سا باہر ہیں، جیسا کہ آپ تصویر میں دیکھ سکتے ہیں.
اختیاری تدریسی کی وضاحت کرنے کا ایک عام طریقہ ایک کونے کی وضاحت کرنا ہے، جیسا کہ اوپر دائیں اور مریض اس کونے سے برعکس کونے تک منتقل ہوجائے گا. آپ مندرجہ ذیل مطلوبہ الفاظ کے ساتھ ابتدائی پوزیشن کی وضاحت کر سکتے ہیں:
- اوپر
- دائیں
- نیچے
- بائیں
- مرکز
اور وہ زیادہ مخصوص ہونے کے لئے مل کر مل سکتے ہیں، جیسے:
- اوپر سے دایاں
- سب سے اوپر بائیں
- سب سے اوپر مرکز
- نیچے دائیں طرف
- نیچے بائیں
- نیچے مرکز
- صحیح مرکز
- بائیں مرکز
یہاں سی ایس ایس ہے جس میں ایک تصویر کی طرح اسی طرح کے درجے کے لئے، اوپر دائیں کونے سے نیچے بائیں طرف سفید سفید ہونے پر سرخ ہے:
پس منظر: # 9 9 اے اے 1C؛
پس منظر کی تصویر: -موز لائنر-میلائنٹ (دائیں اوپر، # 901A1C 0٪، # FFFFFF 100٪)؛
پس منظر کی تصویر: ویب سائٹ-فائنل (لکیری، دائیں اوپر، بائیں نیچے، رنگ سٹاپ (0، # 901A1C)، رنگ سٹاپ (1، #FFFFFF))؛
پس منظر: - ویب لنک-میلنٹ (دائیں اوپر، # 901A1C 0٪، #ffffff 100٪)؛
پس منظر: -و-لکیری-تدریری (دائیں اوپر، # 901A1C 0٪، #ffffff 100٪)؛
پس منظر: -میں لکیری-تدریری (دائیں اوپر، # 901A1C 0٪، #ffffff 100٪)؛
پس منظر: لکیری-تدریری (دائیں اوپر، # 901A1C 0٪، #ffffff 100٪)؛
آپ نے محسوس کیا ہے کہ اس مثال میں IE فلٹرز موجود نہیں ہیں. یہی وجہ ہے کہ IE صرف دو قسم کی فلٹرز کی اجازت دیتا ہے: اوپر سے نیچے (پہلے سے طے شدہ) اور دائیں طرف بائیں (گرڈنٹ ٹائپ = 1 سوئچ کے ساتھ).
صرف سی ایس ایس کا استعمال کرتے ہوئے کارروائی میں یہ اختیاری لکیری مریض ملاحظہ کریں.
03 کے 04
رنگ رک جاتا ہے
CSS3 لکیری گرڈینٹینٹس کے ساتھ، آپ کو بھی فینچر اثرات پیدا کرنے کے لئے آپ کے مریض میں ایک سے زیادہ رنگ شامل کر سکتے ہیں. ان رنگوں کو شامل کرنے کے لئے، آپ کو اپنی جائیداد کے اختتام پر اضافی رنگ شامل کرتے ہیں، جس میں کما کی طرف سے الگ ہوتا ہے. آپ کو اس سلسلہ میں شامل ہونا چاہئے جہاں رنگ بھی شروع ہو یا ختم ہو جائیں.
انٹرنیٹ ایکسپلورر صرف دو رنگ اسٹاپوں کو سپورٹ کرتا ہے، لہذا جب آپ اس مریض کی تعمیر کرتے ہیں تو، آپ کو صرف اس میں شامل ہونے والے پہلے اور دوسرے رنگوں میں شامل ہونا چاہئے.
مندرجہ ذیل 3 رنگ کے رنگ کے لئے سی ایس ایس یہاں ہے:
پس منظر: #ffffff؛
پس منظر: -موز لائنر-تدریری (بائیں، #ffffff 0٪، # 901A1C 51٪، #ffffff 100٪)؛
پس منظر: -مطالب - فریڈینٹ (لکیری، بائیں اوپر، دائیں اوپر، رنگ سٹاپ (0٪، # ffffff)، رنگ سٹاپ (51٪، # 901A1C)، رنگ سٹاپ (100٪، # ffffff))؛
پس منظر: - ویب لنک-میلنٹ (بائیں، #ffffff 0٪، # 901A1C 51٪، # ffffff 100٪)؛
پس منظر: -و-لائنر-تدریری (بائیں، #ffffff 0٪، # 901A1C 51٪، # ffffff 100٪)؛
پس منظر: -میں لکیری-میلانڈر (بائیں، #ffffff 0٪، # 901A1C 51٪، # ffffff 100٪)؛
فلٹر: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff'، endColorstr = '# ffffff'، GradientType = 1)؛
پس منظر: لکیری-تدریری (بائیں، #ffffff 0٪، # 901A1C 51٪، # ffffff 100٪)؛
صرف اس سی ایس ایس کا استعمال کرکے تین رنگ کے ساتھ اس لکیری مریض کو دیکھیں.
04 کے 04
عمودی عمارتوں کو بہت آسان بنائیں
میں آپ کو گرڈینٹس بنانے میں مدد کرنے کے لئے دو سائٹس موجود ہیں، ان میں سے ہر ایک کے پاس فوائد اور خرابی ہوتی ہے، میں نے ایک اساتذہ بلڈر نہیں جو ابھی تک سب کچھ کرتا ہے.
الٹی سی ایس ایس گریجویٹ جنریٹر
یہ مریض جنریٹر بہت مقبول ہے کیونکہ اس کی فوٹوشاپ جیسے پروگراموں میں پرانی بلڈرز کے ساتھ اسی طریقے سے کام کرتا ہے. مجھے یہ بھی پسند ہے کیونکہ یہ آپ کو تمام سی ایس ایس کی توسیع دیتا ہے، نہ صرف ویبکٹ اور موزیلا. اس جنریٹر کے ساتھ مسئلہ یہ ہے کہ یہ صرف افقی اور عمودی gradients کی حمایت کرتا ہے. اگر آپ ڈریگن گرڈینٹس کرنا چاہتے ہیں تو، آپ کو دوسرے جنریٹر میں مشورہ دینا ہوگا.
CSS3 گریجویٹ جنریٹر
یہ جنریٹر مجھے پہلے سے زیادہ سمجھنے کے لئے تھوڑی دیر تک لے لیتا تھا، لیکن یہ ایک غیر معمولی راستے کو تبدیل کرنے میں مدد کرتا ہے.
اگر آپ کسی اور سی ایس ایس گریجویٹ جنریٹر سے واقف ہیں تو آپ کو ان سے بہتر پسند ہے، برائے مہربانی ہمیں بتائیں .