د 01 04
د CSS3 سره د کراس براؤزر لینر ګرادي جوړونه
لینري ګرديز
د سرلیک ترټولو عام ډول ډول به تاسو د دوه رنگونو یو صفر صفر وي. دا پدې مانا ده چې درجه بندي به په مستقیم کرښه کې حرکت وکړي په تدریجي ډول د لومړي رنګ څخه دویمې برخې ته. د دې پاڼې انځور د ښي ښي ښي ښې ښیښې ښکارندويي کوي. د 999 (تور خاکی) ښیې ته # سپی (سپینه).
لینکرین ګرډینټونه خورا آسان دي چې تعریف کړي، او په براؤزرونو کې ډیر مالتړ ولري. CSS3 لینکرین ګرډینټونه په Android 2.3+، کروم 1+، فایرفوکس 3.6+، اوپیرا 11.1+، او سفاري 4+ کې ملاتړ کیږي. انټرنیټ انټرنیټ کولی شي فلټر کاروونکي د فلټر په کارولو سره اضافه کړي او دوی ته بېرته IE 5.5 ته مالتړ ورکړي. دا CSS3 ندی، مګر دا د کراس براؤزر مطابقت لپاره یو اختیار دی.
کله چې تاسو یو تدریجي تعریف کړئ تاسو اړتیا لرئ څو مختلف شیان تعریف کړئ:
- کوم ډول ډول درجه لري یا ریډیلیل
- چیرته چې مخکی باید پیل شي
- چیرې چې تدریجي باید ودروي
- کوم رنګونه په درجه بندي کې دي او چیرې چې دوی باید پیل او بند شي
د CSS3 کارولو سره د لینډی ګریډیټونو تعریفولو لپاره، تاسو لیکئ:
لینری-ژړونکی ( زاویه یا طرف یا کوډ ، د رنګ بند ، رنګ بندول )
- لومړی تاسو د لینری جریان سره د تدریسی ډول تعریف کړئ.
- بیا، تاسو د یو لاندینیو لارو څخه په درجه بندي کې د پیل پیل او بندولو تعریف کړئ: د 0 څخه تر 359 درجې درجې کې د لیک زاویه، د 0 درجې سره په مستقیم ډول اشاره کوي. یا د "اړخ یا کوډ" فنکشن سره، لکه بائیں، ښیټ، لاندې، او پورته. دا به په راتلونکې پاڼه کې په تفصیل سره تشریح شي. که تاسو دا ایستل پریږدی، درجه به د عنصر څخه تر ټیټ پورې تیریږي.
- بیا تاسو د رنګ بندونه تعریف کړئ. تاسو د رنګ کود او اختیاري فیصده سره رنګ بند کړئ. فیصده هغه براؤن ته وایي چې په هغه ځای کې چې د رنګ سره پیل یا پای ته رارسیږي. اصلي بڼه د رنګ سره سم په رنګ سره ځای په ځای کول دي. تاسو به په دریم پاڼه کې د رنګ تړلو په اړه نور معلومات ترلاسه کړئ.
نو، د CSS3 سره پورته پورته درجه بندي تعریف کړئ، تاسو لیکئ:
لینیر-ګریلینټ (بائیں، # 999999 0٪، # 100ffffff)؛
او دا د DIV پس منظر په توګه وټاکئ چې تاسو ولیکئ:
div {
پس منظر - انځور: لینکر - فاریین (بائیں، # 999999 0٪، # 100٪ #ffffff؛
}
د CSS3 لینر ګرديز لپاره د براؤزر توکی
د کراس براؤزر کار کولو لپاره خپل مخیف ترلاسه کولو لپاره، تاسو اړتیا لرئ چې د ډیری برائوزرونو لپاره د براوزر توزیع او د انټرنټ اکسپورورټ 9 لپاره فلټر او د ټیټې کچې (په حقیقت کې 2 فلټرونه) وکاروئ. ټول دا ټول ورته عناصر لري چې تاسو خپل درجه بندي تعریف کړئ (پرته له دې چې تاسو کولی شئ یوازې په IE کې د 2 رنګ رنګونه تعریف کړئ).
د مایکروسافټ فلټر او توسیع - انټرنیټ اکسپورټ د ملاتړ لپاره ترټولو چیلنج دی، ځکه چې تاسو د بیلابیلو براؤزر نسخو مالتړ لپاره درې مختلف لینونو ته اړتیا لرئ. د پورته سپین رنګ سپین رنګ ته د رسیدو لپاره تاسو به ولیکئ:
/ * IE 5.5-7 * /
فلټر: وړاندیز: د ډاټا ایممټرانسform.microsoft.gradient (startColorstr = '# 999999'، endColor = '# ffffff'، ګريډینټائپ = 1)؛
/ * IE 8-9 * /
- فلټرونه: ". د فلټر کولو". پروسس: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999'، endColorstr '' # ffffff '، ګورتینټائپ = 1) "؛
/ * IE 10 * /
- لینکر-پلینټینټ (پاتې، # 999999 0٪، # 100ffffff)؛
د موزیلا توسیع - د Moz- توسیع د CSS-3 ملکیت په څیر کار کوي، یواځې د Moz- توسیع سره. د فایبر فاکس لپاره پورته پورته درجه ترلاسه کولو لپاره، ولیکئ:
-Moz-linear-gradient (پاتې، # 999999 0٪، # 100ffffff)؛
د اوپیرا توسیع - تایید - توسیع د Opera 11.1+ ته ګرادیان اضافه کوي. پورته پورته درجه بندي ترلاسه کولو لپاره، ولیکئ:
-و لینر-درجه بندي (پاتې، # 999999 0٪، # 100ffffff)؛
د ویبکټ توسیع - د ویب پاڼې - توسعې د CSS3 ملکیت په څیر کار کوي. د سفاري 5.1+ یا کروم 10+ لپاره پورته پورته درجه بندي تعریف کولو لپاره تاسو لیکئ:
د کټ مټ - صفر - درجه بندي (پاتې، # 999999 0٪، # 100٪ #)؛
همدا راز د ویبکټ توسیع یو پخوانی نسخه ده چې د کروم 2+ او سفاري 4+ سره کار کوي. په دې کې تاسو د ملکیت نوم په ځای د قیمت ارزښت د ارزښت په توګه تعریف کړئ. د دې ترویج سره سپینه سرغړونکی ته سپینه درکړی، لیکئ:
(لویه برخه، ښي خوا ته، ښی لوړ پوړ، رنګ بندول) 0٪، # 999999 (، رنګ بندول) 100٪، # ffffff ()؛
د بشپړ CSS3 لینډ ګرډریټ CSS CSS کوډ
د بشپړ کراس براؤزر ملاتړ لپاره تاسو ته د سپینې سرپرست ته سپینې سپکاوی لپاره تاسو باید لومړی د هغو براؤزرونو لپاره یو راشبندی رنګ ولرئ چې د ګرديټونو مالتړ نه کوي، او وروستی توکي باید د هغه براؤزرونو لپاره CSS3 بڼه وي چې په بشپړ ډول مطابقت لري. نو ته لیکي:
شاليد: 999999؛
پس منظر: -موټر-صفر-درجه بندي (پاتې، # 999999 0٪، # 100٪ #)؛
شاليد: -ټکيټ-درجه بندي (صفر، ښي خوا ته، ښي لوړ پوړ، رنګ بندول) 0٪، # 999999 (، رنګ-بند (100٪، # ffffff))؛
شاليد: -ټارټ-لائنر-درجه بندي (پاتې، # 999999 0٪، # 100٪ #)؛
پس منظر: -و-صفر-درجه بندي (پاتې، # 999999 0٪، # 100ffffff)؛
پس منظر: -ms-linear-gradient (left، # 999999 0٪، # 100ffffff)؛
فلټر: وړاندیز: د ډاټا ایممټرانسform.microsoft.gradient (startColorstr = '# 999999'، endColor = '# ffffff'، ګريډینټائپ = 1)؛
- فلترینګیپ = 1)؛ ګړندۍ: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999'، endColor = '# ffffff'، GradientType = 1)؛
شاليد: صفر - درجه بندي (پاتې، # 999999 0٪، # 100ffffff)؛
په دې سبق کې راتلونکی پاڼې د پراخیدو برخو برخو په تفصیل سره تشریح کوي، او وروستی پاڼه تاسو ته داسې وسیله درکوي کوم چې په خپله په اوتومات ډول د CSS3 ګراديټونو جوړولو لپاره یوه ښه لاره ده.
یواځې د سی ایس ایس کارولو په کارولو کې دا لینډیټ سرک وګورئ.
02 د 04
د وینډوز ګرديدونو رامینځته کول - د درجه کونکي زاویه
د پیل او بند ټکي د درجه بندي زاویه ټاکي. ډیری لینډی ګریډیټینټونه له پورته څخه ښکته یا ښي څخه ښي دي. مګر دا ممکنه ده چې یو سرتیري جوړ کړئ چې په یو ایینګونال کرښه باندې حرکت کوي. د دې پاڼې انځور ساده ساده ښکارندوی کوي چې په 45degree زاویه کې د انځور څخه د ښي بڼ څخه حرکت کوي.
د ګرديزي کرښې تعريف کولو لپاره زاويان
زاویه د عنصر په مرکز کې د عکاسې څراغ پر لیکه ده. 0deg پورته کوي، دقیقې 90 درجې ګرامه، 180deg ټیټه، او د بڼ لوري 270deg ټکي. تاسو کولی شئ کوم زاویه له 0 څخه 359 درجو څخه تعریف کړئ.
تاسو باید په یاد ولرئ چې په یوه مربع کې، 45 درجې زاویه د ښي خوا کښۍ څخه ښکته ښي لور ته ښي خوا ته حرکت کوي، مګر په مستطیل کې د پیل او پای ټکی د شکل څخه لږ وي، لکه څنګه چې تاسو په انځور کې لیدلی شئ.
د وینګالیل سټراینټ تعریف کولو لپاره ډیر عام الره د کوډ تعریفول دي، لکه څنګه چې پورته ښی او مخکی به د دې کوڅی څخه د مخالف کنډ ته حرکت وکړي. تاسو کولی شئ د لاندې کلیمو سره پیل پیل کړئ تعریف کړئ:
- پورته
- ښی
- لاندې
- پرېښودل
- مرکز
او دوی کولی شي نور مشخص شي، لکه:
- لوړ ښي
- لوړ چپ
- لوړ مرکز
- لاندې ښي
- ښکته ښکته
- ټیټ مرکز
- ښی مرکز
- ښي مرکز
دلته دلته د یو انځور په څیر د سریزه لپاره CSS دی، سور ته یې د ښي ښی خوا څخه سپین ښکته حرکت ته لاندې ښي لور ته:
شاليد: # 901A1C؛
د پس منظر انځور: -Moz-linear-gradient (ښی پورته، # 901A1C 0٪، # FFFFFF 100٪)؛
پس منظر-انځور: -webkit-gradient (لاري، ښي خواټ، ښې لاندې، رنګ رنځ (0، # 901A1C)، رنګ بندول (1، #FFFFFF))؛
شاليد: -تقال-ليکرار-درجه بندي (ښي خوا، # 901A1C 0٪، # 100٪ #)؛
پس منظر: -و-صفر-درجه بندي (ښی پورته، # 901A1C 0٪، # 100ffffff)؛
پس منظر: -ms-linear-gradient (ښی پورته، # 901A1C 0٪، # 100ffffff)؛
شاليد: کرښه - ګرديز (ښی پورته، # 901A1C 0٪، # 100ffffff)؛
تاسو ښايي پوه شي چې په دې مثال کې د IE فلټر شتون نلري. دا ځکه چې IE یواځې دوه ډوله فلټرونه ته اجازه ورکوي: پورته تر ښکته (ښکته) او له ښي خوا څخه ووت (د ګریډریټ ټائپ = 1 سوئچ سره).
یوازې د سی ایس ایس کارولو په کارولو کې دا ویناوال لینډ فریچ وګورئ.
03 of 04
د رنګ پایونه
د CSS3 لینکرین ګريډینټ سره، تاسو کولی شئ حتی د فینیکي تاثیراتو د رامنځته کولو لپاره څو درجې رنګونه اضافه کړئ. دا رنګونه اضافه کولو لپاره، تاسو د خپل ملکیت پای ته نور رنګونه اضافه کړئ، د کمونو لخوا جلا شوي. تاسو باید په هغه ځای کې چې رنګونه باید پیل او یا هم پای ته ورسیږي شامل وي.
انټرنیټ اکسپلور یوازې د دوه رنګونو بندونو فلټر کوي، نو کله چې تاسو دا درجه بندي جوړ کړئ، نو باید یوازې هغه لومړي او دویم رنګونه ولرئ چې تاسو یې ښکاره کول غواړئ.
دلته د پورته درې-رنګ رنګ درجه لپاره سی ایس ایس دی:
شاليد: #ffffff؛
پس منظر: -موټر-صفر-درجه بندي (پاتې، #ffffff 0٪، # 901A1C 51٪، # 100٪ #).
پس منظر: -webkit-gradient (صفر، ښي خوا، ښی لوړ پوړ، رنګ بندول) 0٪، # ffffff (، رنګ-بند (51٪، # 901A1C)، رنګ-بند (100٪، # ffffff))؛
شاليد: - د ليکير-صفر (فزيکي،٪ 0٪، # 901A1C 51٪، # 100 جعفر 100٪)؛
پس منظر: -و-صفر-درجه بندي (پاتې، #ffffff 0٪، # 901A1C 51٪، # ffffff 100٪)؛
پس منظر: -ms-linear-gradient (ښیې، #ffffff 0٪، # 901A1C 51٪، # ffffff 100٪)؛
فلټر: پروګیټ: ډاټا ایمیزون تغیرات. مایکروسافټ زړورتیا (StartColorstr = '# ffffff'، endColorstr '' # ffffff '، گرادریټائپ = 1)؛
شاليد: کرښه - مخکي (پاتې، #ffffff 0٪، # 901A1C 51٪، # ffffff 100٪)؛
دا لینډ سرپرست وګورئ د درې سایټونو سره یوازې د سی ایس ایس کارولو په کار کې.
04 04
د جوړولو وړ ګراديز جوړ کړئ
دلته دوه سایټونه شته چې زه تاسو ته د ګرادي جوړونې په برخه کې د مرستې کولو لپاره وړاندیز کوم، دوی هر یو یې ګټې او نیمګړتیاوې لري، ما د یو مخابراتي پلرونکی نه دی موندلی چې هر څه یې کوي.
د ایس ایس ایل ګردینټ جنریټر
دا مخابراتي جنریټر خورا مشهور دی ځکه چې دا د فټشپ په څیر پروګرامونو کې مخکښ جوړونکي ته د ورته طریقې سره ترسره کوي. زه دا هم خوښوم ځکه چې دا تاسو ته ټول سی ایس ایس توزیعونه، نه یوازې ویبکټ او موزیلا. د دې جنریټر سره ستونزه دا ده چې دا یوازې د افقی او عمودی جریدونو ملاتړ کوي. که تاسو غواړئ چې د وینډوز ګریډینټونه وکړئ، تاسو باید زه د نورو جنراتور ته وړاندیز ته لاړ شم.
د CSS3 ګرديز جنریټر
دا جنریټر ما دومره لږ وخت ونیوله چې د لومړي ځل په پرتله پوه شي، مګر دا د یو بل سره لارښوونه بدله کوي.
که تاسو د بل سیسټم سیسټم فارغه جنراتور پوهیږئ چې تاسو له دې څخه غوره غوره خوښئ، لطفا موږ ته خبر راکړئ .