01 جو 04
CSS3 سان Cross-Browser Linear Gradients ٺاهڻ
لائين ڊگري
گھڻن جو عام قسم جو توهان ڏسون ٿا ٻه رنگن جي لائينري جي ترتيب. هن جو مطلب اهو آهي ته سست رفتار کي سڌريل ليڪ ۾ سڌو رنگ تبديل ٿي وينديون پهرين رنگ کان پوء ٻئي قطار ۾. ھن صفحي تي عڪس سڌو # 999 (گري گرين) کان # ايفف (اڇو) تي سڌي بائیں طرف کان -ٻيٽ ڇڏي ڏيکاري ٿو.
لٽريري جون هدايتون آسان آھن جيڪي بيان ڪن ٿا، ۽ برائوزرن ۾ سڀ کان وڌيڪ مدد ڪن ٿا. CSS3 لائين گرڊيونٽس Android 2.3+، Chrome 1+، فائر فاکس 3.6+، اوپیرا 11.1+، ۽ سفاري 4+ ۾ حمايت ڪئي وينديون آهن. انٽرنيٽ ايڪسپلورٽ فلٽر استعمال ڪندي گرديڊٽس شامل ڪري سگهي ٿو ۽ انهن کي واپس آگاهي ڏئي IE 5.5. هي CSS3 نه آهي، پر اهو هڪ پارٽ برائوزر مطابقت لاء اختيار آهي.
جڏهن توهان هڪ فيلڊ کي وضاحت ڪيو ٿا ته توهان ڪيترن ئي مختلف شين کي بيان ڪرڻ جي ضرورت آهي:
- ڪهڙي قسم جي صفائي وارو ۽ ريڊريل آهي
- جتي اهو نوڪر شروع ٿيڻ گهرجي
- جتي کيري کي روڪڻ گهرجي
- ڇا رنگين صفن ۾ آهن ۽ اهي شروع ڪرڻ ۽ روڪي رهيا آهن
CSS3 استعمال ڪندي ليڪن گرڊيڊيٽ جي وضاحت ڪريو، توهان لکي ڏيو ٿا:
قطار-فليٽري ( زاويه يا پاسي يا ڪنڊ ، رنگ جو اسٽاپ ، رنگ جو اسٽاپ )
- پهريان توهان لينگر جو نالو لائيناري -گرادري سان وضاحت ڪري ٿو.
- وري، توهان ٻن طريقن مان ھڪڙو ڏاڪڻ جي شروعات ۽ اسٽاپ پوائنٽ کي بيان ڪريو: درجي جي ليڪ کي 0 کان 359 کان، يعني 0 درجا سڌو سڌي طرح کڻي. يا "پاسي يا ڪنڊ" جي فنڪشن سان، جهڙوڪ بائیں، دڙو، هيٺيان، ۽ مٿي. اهي ايندڙ صفحي تي وڌيڪ تفصيل ۾ بيان ڪيا ويندا. جيڪڏهن توهان انهن کي ڇڏي ڏيو، ته فليٽري انهن عنصر جي هيٺان کان مٿانهون وهندي ويندي.
- پوء توهان رنگ اسٽاپ بيان ڪريو. توهان رنگ جو ڪوڊ ڪوڊ ۽ اختياري فيصد سان بيان ڪري ٿو. فيصد برائوزر کي برائوزر ٻڌائي ٿو جتي ليڪ تي انهي رنگ سان شروع يا ختم ٿيڻ. اهو ڊفالٽ پڻ رنگ سان گڏ رنگن کي رکي ٿو. توهان صفحو 3 تي رنگ اسٽاپ بابت وڌيڪ سکيا ويندا.
تنهن ڪري، مٿي ايس ايڇ 3 سان سسٽري کي بيان ڪرڻ لاء، توهان لکي ٿو:
سڌار-فليٽري (بائیں، # 999999 0٪، # 100).
۽ ان کي قائم ڪرڻ لاء هڪ DIV جي پس منظر جي طور تي توهان لکي ٿو:
div {
پس منظر واري تصوير: سڌار-فليٽري (بائیں، # 999999 0٪، # 100٪؛
}
CSS3 لينسر گريٽري لاء برائوزر لڳائڻ
توهان جي برائوزر کي پارڪر برائوزر ڪم ڪرڻ لاء، توهان گهڻن برائوزرن ۽ انٽرنيٽ ايڪسپلورر 9 لاء فلٽر لڳائڻ جي ضرورت هوندي آهي ۽ انهي کي گهٽ (حقيقت ۾ 2 فلٽر). اهي سڀ توهان جي اڳوڻين کي بيان ڪرڻ لاء ساڳيو عنصر وٺي رهيا آهن (سواء انهي کان سواء توهان صرف IE ۾ 2 رنگ رنگ ڳريٽي مقرر ڪري سگهو ٿا).
Microsoft فلٽر ۽ توسیع- انٽرنيٽ ايڪسپلورر کي سپورٽ ڪرڻ ۾ سڀ کان وڌيڪ مشڪل آهي، ڇو ته توهان مختلف برائوزر نسخن جي مدد لاء ٽي مختلف لائنن جي ضرورت آهي. مٿي ڏنل سرمائي حاصل ڪرڻ لاء جنگي سفري تائين توهان لکي سگهندا آهيو:
/ * IE 5.5-7 * /
فلٽر: پروگاهه: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999'، endColorstr = '# ffffff'، GradientType = 1)؛
/ * IE 8-9 * /
فائيل فلٽر: "پروgid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999'، endColorstr = '# ffffff'، GradientType = 1)"؛
/ * IE 10 * /
گهرن جي ليڪن-فليٽري (بائیں، # 999999 0٪، # 100 سيڪفف).
ميڪيللا وڌائڻ- The -moz- توسيع اس طرح CSS3 ملڪيت وانگر ڪم ڪري ٿو، صرف -moz- توسیع سان. هيٺئين فليڪس فارڪس لاء حاصل ڪرڻ لاء، لکڻ:
-موز-صفر-فليٽري (بائیں، # 999999 0٪، # 100٪).
اوپرا توسیع -جو-تو-وڌا وڌا اوپيرا 11.1+ تائين گراديٽس شامل آهن. مٿين تدريسي حاصل ڪرڻ لاء، لکي:
-o-linear-gradient (بائیں، # 999999 0٪، # 100٪).
ويبڪٽ وڌائڻ- The -webkit- extension گهڻو ڪري CSS CSS ملڪيت وانگر ڪم ڪندو آهي. صفاري 5.1+ يا ڪروم 10+ لاء مٿي بيان ڪندڙ کي بيان ڪرڻ لاء توهان لکي سگھو ٿا:
ويڪرائي-ليڪر-فليٽري (بائیں، # 999999 0٪، # 100٪).
هتي ويبڪٽ جي واڌاري جو هڪ پراڻو نسخو آهي جيڪو ڪاروائي 2+ ۽ سفاري 4+ سان ڪم ڪندو آهي. ان ۾ توهان پراپرٽائن جي قسم جي ملڪيت جي ڀيٽ ۾ قدر جي طور تي بيان ڪيو ٿا. هن واڌ سان وڌو سفيد کي سرمائي حاصل ڪرڻ لاء، لکڻ:
ويڪرائيٽ-فليٽري (سڌار، کاٻي مٿي، ساڄي ترين، رنگ-اسٽاپ (0٪، # 999999)، رنگ-اسٽاپ (100٪، # ffffff))؛
مڪمل CSS3 لائينري گريٽريٽ سي ايس اي ڪوڊ
مڪمل پارڪر برائوزر جي حمايت لاء توهان جي مٿان اڇا وڌائڻ لاء سرمائي حاصل ڪرڻ لاء پهريان ۾ شامل ٿيڻ گهرجي اهي برائوزر لاء فليش ٽڪر رنگ شامل ڪن جيڪي گرڊيون جي حمايت نه ڪن، ۽ آخري شيون براڊرن لاء CSS3 انداز هجڻ گهرجي جيڪي مڪمل طور تي تعميل آهن. تنهن ڪري توهان لکندا آهيو:
پس منظر: # 999999؛
پس منظر: -موز-صفر-ڏاچي (بائیں، # 999999 0٪، # 100٪).
پس منظر، بائيڪاٽ، ساڄي مٿين، رنگ واري اسٽاپ (0٪، # 999999)، رنگ-اسٽاپ (100٪، # ffffff))؛
پس منظر: -webkit-linear-gradient (بائیں، # 999999 0٪، #ffffff 100٪)؛
پس منظر: -o-linear-gradient (بائیں، # 999999 0٪، #ffffff 100٪)؛
پس منظر: -ms-linear-gradient (بائیں، # 999999 0٪، #ffffff 100٪)؛
فلٽر: پروگاهه: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999'، endColorstr = '# ffffff'، GradientType = 1)؛
فائيل فلٽر: پروgid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999'، endColorstr = '# ffffff'، GradientType = 1)؛
پس منظر: ليڪار-فليٽائن (بائیں، # 999999 0٪، #ffffff 100٪)؛
هن سبق ۾ ايندڙ صفحن کي وڌيڪ تفصيل سان ترقي جي حصن جي وضاحت ڪري ٿو، ۽ آخري صفحو توهان کي هڪ اوزار ڏانهن اشارو ڪري ٿو جيڪو خودڪار CSS3 گرديٽين ٺاهڻ لاء بهترين طريقو آهي.
صرف سي ايس ايس استعمال ڪندي هن قطار کي فوري عمل ۾ ڏسو.
02 جو 04
درين گريٽري ٺاهي ٿو- گرديٽ جو زاويه
شروع ۽ پوائنٽ کي بند ڪرڻ جي ڏاڪڻ جو اندازو لڳايو. گھڻي صفا گراديون مٿي کان مٿي يا کاٻي پاسي کان. پر اهو ممڪن آهي ته هڪ ڏاڪڻ ٺاهي جيڪو ڊريڪ لائين تي هلندو آهي. هن صفحي تي تصوير هڪ سادي ترقي ڪندڙ ڏيکاري ٿو جيڪا 45degree زاوي ۾ صحيح کان ساڄي پاسي تصوير تي هلندو آهي.
گريٽريئن لائن کي وضاحت ڪرڻ لاء اينگال
زاويڪ جي مرڪزي علائقي ۾ هڪ تصوراتي دائري تي هڪ ليڪ آهي. 0 سيڪري پوائنٽ، ساڄي پاسي 90 ڪلو پوائنٽ، 180deg پوائنٽ گهٽ، ۽ 270deg پوائنٽ ڇڏي ويو. توهان ڪي 0 کان 359 درجا کان ڪئين وضاحت ڪري سگھو ٿا.
توهان کي ياد رکڻ گهرجي ته هڪ چورس ۾، مٿي کاٻي پاسي کان هيٺئين پاسي کان 45 درجي زاويه هلن ٿا، پر مستطيل ۾ شروع ۽ آخر نقطي شڪل کان ٻاهر ٿوري آهي، جيئن توهان تصوير ۾ ڏسي سگهو ٿا.
ھڪڙي دڳل ساليج کي وضاحت ڪرڻ لاء عام طريقو ھڪ ڪنڊ کي بيان ڪرڻ لاء آھي، جيئن مٿي جي ساڄي ۽ خريدار ان ڪنڊ مان گھڙھي واري ڪنڊ تي منتقل ڪندو. توھان هيٺ ڏنل لفظن سان شروعاتي پوزيشن بيان ڪري سگھو ٿا:
- مٿي
- ساڄو
- هيٺ
- کاٻو
- مرڪز
۽ اهي وڌيڪ خاص ٿي سگهجن ٿيون، جهڙوڪ:
- سڀ کان وڏو
- مٿي کاٻي پاسي
- مکيه مرڪز
- هيٺيان حق
- هيٺيون کاٻي پاسي
- هيٺيون مرڪز
- صحيح مرڪز
- کاٻي مرڪز
هتي هڪ سالياني بنيادي طور تي ايس اي سي ايس آهي، جيڪا هڪ پاسي واري تصوير، ڳاڙهو مٿين ڪنڊ کان هيٺيان کاٻي پاسي کان اڇلائي اچي ٿي.
پس منظر: ## 901A1C؛
پس منظر-شڪل: -موز-صفر-ڏاچي (صحيح چوٽي، # 901 اي 1 سي 0٪، # ايف ايف ايف ايف 100٪)؛
پس منظر واري تصوير: -webkit-gradient (رينار، ساڄي مٿي، کاٻي پاسي، رنگ-اسٽاپ (0، # 901A1 سي)، رنگ-اسٽاپ (1، #FFFFFF))؛
پس منظر: -webkit-linear-gradient (صحيح ترين، # 901A1 سي 0٪، #ffffff 100٪)؛
پس منظر: -o-linear-gradient (صحيح مٿي، # 901A1 سي 0٪، # ايفففف 100٪)؛
پس منظر: -ms-linear-gradient (صحيح مٿي، # 901A1 سي 0٪، # ايفففف 100٪)؛
پس منظر: سڌار-خريدار (صحيح چوڪ، # 901A1 سي 0٪، #ffffff 100٪)؛
توھان محسوس ڪري سگھو ٿا تھ ھن مثال ۾ IE فلٽر موجود آھن. اهو ئي آهي ڇو ته صرف صرف ٻن قسمن جي فلٽرن کي اجازت ڏئي ٿو: مٿاهين کان تدوين (ڊفالٽ) ۽ کاٻي پاسي سان (گرائونڊ ٽائپ سان = 1 سوئچ سان).
صرف سي ڊي استعمال ڪندي هي ديروائي لائين صفري جي عمل ۾ ڏسو.
03 جو 04
رنگ جو دڪان
CSS3 لينار گرڊيڊين سان، توهان کي شايد رنگن کي وڌائڻ لاء فينئرئر اثرات ٺاهي سگھو ٿا. هنن رنگن کي شامل ڪرڻ لاء، توهان پنهنجي ملڪيت جي اختتام تي رنگ وڌيڪ اضافو ڪندا آهن، ڪاما ذريعي الڳ ٿيل. توھان کي شامل ھجڻ گھرجي جتي قطار تي شروع ٿيڻ يا ختم ٿيڻ گھرجي.
انٽرنيٽ ايڪسپلورر رڳو حمايت ٻه رنگ بند ڪري ٿو، تنهنڪري جڏهن توهان هن مخلص کي ٺاهيو ٿا، توهان صرف انهن کي پهريون ۽ سيڪنڊ رنگن ۾ شامل ڪرڻ چاهيو ٿا جيڪو توهان ڊسپلي ڪرڻ چاهيو ٿا.
مٿي ڄاڻايل 3 سي رنگ جي ترتيب لاء سي ايس ايس آهي.
background: #ffffff؛
پس منظر: -موز-صفر-خريدار (بائیں، #ففف 0٪، # 901 اي1 سي 51٪، # 100٪).
پس منظر، دٻايو مٿو، ساڄي ترين، رنگ واري اسٽاپ (0٪، # ffffff)، رنگ اسٽاپ (51٪، # 901A1 سي)، رنگ-اسٽاپ (100٪، # ffffff))؛
پس منظر: -webkit-linear-gradient (بائیں، #ffffff 0٪، # 901A1C 51٪، # ffffff 100٪)؛
پس منظر: -o-linear-gradient (بائیں، #ffffff 0٪، # 901A1C 51٪، # ffffff 100٪)؛
پس منظر: -ms-linear-gradient (بائیں، #ffffff 0٪، # 901A1C 51٪، # ffffff 100٪)؛
فلٽر: پروgid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff'، endColorstr = '# ffffff'، GradientType = 1)؛
پس منظر: سڌار-خريدار (بائیں، #ففف 0٪، # 901A1 سي 51٪، # ffffff 100٪)؛
هن قطار کي ڏسو ته صفا ٽي رنگ سان ايڪشن سيٽنگ استعمال ڪندي ڪم ۾ رکندي.
04 جو 04
بلڊنگ کي گريجوئيشن ٺاهيو
اتي ٻه سائيٽون آهن جن جي توهان توهان کي گرادي بڻائڻ ۾ مدد ڏيڻ جي صلاح ڏني آهي، انهن وٽ هر هڪ کي فائدي ۽ واپسي آهي، مون وٽ هڪ ڏاڪڻ بلڊر نه ملي آهي جيڪا هر شيء تائين پهچندي آهي.
آخري سي ايس جي گريريئيشن جنريٽر
هي سرڪشيشن جنريٽر تمام مقبول آهي ڇاڪاڻ ته اهو فوٽوشاپ جهڙو پروگرامز ۾ ترقيگار عمارتن ڏانهن پڻ ساڳيو طريقي سان ڪم ڪندو آهي. آئون اهو پڻ پسند ڪنديون آهن ڇاڪاڻ ته اهو توهان سڀني سي ايس ايس ڊيشنز، صرف ويبڪٽي ۽ موزولا نه ڏئي. هن جنريٽر سان مسئلو اهو آهي ته اهو صرف افقي ۽ عمودي گراديٽس کي سهارو ڏئي ٿو. جيڪڏهن توهان ويرين گريڊيئرز ڪرڻ چاهيو ٿا، توهان کي ٻي سفارش ڪرڻ واري ٻئي جنريٽر ڏانهن وڃڻ گهرجي.
CSS3 گريجوئيشن جنريٽر
ھي جنورٽر مون کي ٿوري گهڻي وقت کان سمجھڻ لاء مون کي ورتو، پر اھا ھڪڙي ويندڙ ڏانھن سڌو رستو ڏيکاريندي آھي.
جيڪڏھن توھان انھن کان وڌيڪ بھتر پسند پسند ڪريو ٿا تھ ٻي ٻئين سي ايس پي گريڊيڊيٽر جنن جو ڄاڻو ، مھرباني ڪري اسان کي ڄاڻ ڏيو .