01 of 04
ການສ້າງຕົວລ້າໆເສັ້ນທາງກາຕູນຕົວທ່ອງເວັບທີ່ມີ CSS3
Linear Gradients
ແບບປະເພດທີ່ພົບເລື້ອຍທີ່ສຸດທີ່ທ່ານເຫັນຈະເປັນເສັ້ນເລື່ອນຂອງສອງສີ. ນີ້ຫມາຍຄວາມວ່າ gradient ຈະເຄື່ອນຍ້າຍໃນເສັ້ນກົງປ່ຽນແປງຄ່ອຍໆຈາກສີທໍາອິດໄປຫາທີສອງຕາມເສັ້ນນັ້ນ. ຮູບພາບໃນຫນ້ານີ້ສະແດງໃຫ້ເຫັນ gradient ຊ້າຍ - ຂວາທີ່ງ່າຍດາຍຂອງ # 999 (ຊ້ໍາສີຂີ້ເຖົ່າ) ກັບ #fff (ສີຂາວ).
ເລື່ອນເລິກແມ່ນງ່າຍທີ່ສຸດທີ່ຈະກໍານົດແລະມີການສະຫນັບສະຫນູນຫຼາຍທີ່ສຸດໃນຕົວທ່ອງເວັບ. CSS3 gradient linear ແມ່ນສະຫນັບສະຫນູນໃນ Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ ແລະ Safari 4+. Internet Explorer ສາມາດເພີ່ມ gradients ໂດຍໃຊ້ຕົວກອງແລະສະຫນັບສະຫນູນໃຫ້ກັບ IE 5.5. ນີ້ບໍ່ແມ່ນ CSS3, ແຕ່ມັນແມ່ນຕົວເລືອກທີ່ເຫມາະສົມສໍາລັບການເຂົ້າກັນຂອງຕົວທ່ອງເວັບ.
ໃນເວລາທີ່ທ່ານກໍານົດ gradient ທ່ານຈໍາເປັນຕ້ອງກໍານົດສິ່ງທີ່ແຕກຕ່າງກັນຫຼາຍ:
- ປະເພດໃດແດ່ຂອງ gradient ມັນແມ່ນ - ເສັ້ນຫຼືເສັ້ນທາງ
- ບ່ອນທີ່ gradient ຄວນເລີ່ມຕົ້ນ
- ບ່ອນທີ່ gradient ຄວນຢຸດ
- ສິ່ງທີ່ສີແມ່ນຢູ່ໃນ gradient ແລະບ່ອນທີ່ເຂົາເຈົ້າຄວນຈະເລີ່ມຕົ້ນແລະຢຸດເຊົາ
ເພື່ອກໍານົດ gradient ເລິກທີ່ໃຊ້ CSS3, ທ່ານຂຽນວ່າ:
ເສັ້ນສະຫວ່າງ ( ມຸມ ຫຼື ຂ້າງຫຼືແຈ , ຢຸດ ສີ , ຢຸດສີ )
- ທໍາອິດທ່ານກໍານົດປະເພດຂອງ gradient ທີ່ມີ ເສັ້ນ ຊື່ gradient.
- ຫຼັງຈາກນັ້ນ, ທ່ານກໍານົດຈຸດເລີ່ມຕົ້ນແລະຢຸດຂອງ gradient ໃນຫນຶ່ງໃນສອງວິທີ: ມຸມຂອງເສັ້ນໃນລະດັບ 0 ຫາ 359, 0 ອົງສາຊີ້ຊີ້ນໍາ. ຫລືມີຫນ້າທີ່ "ດ້ານຫຼືມຸມ", ເຊັ່ນ: ຊ້າຍ, ຂວາ, ດ້ານລຸ່ມ, ແລະດ້ານເທິງ. ເຫຼົ່ານີ້ຈະໄດ້ຮັບການອະທິບາຍໃນລາຍລະອຽດເພີ່ມເຕີມໃນຫນ້າຕໍ່ໄປ. ຖ້າທ່ານອອກຈາກການເຫຼົ່ານີ້, gradient ຈະໄຫລອອກຈາກປາຍໄປຫາລຸ່ມຂອງອົງປະກອບ.
- ຫຼັງຈາກນັ້ນ, ທ່ານກໍານົດການຢຸດສີ. ທ່ານກໍານົດສີຢຸດດ້ວຍລະຫັດສີແລະອັດຕາສ່ວນຕົວເລືອກ. ອັດຕາສ່ວນບອກຕົວທ່ອງເວັບທີ່ຢູ່ໃນເສັ້ນເພື່ອເລີ່ມຕົ້ນຫຼືສິ້ນສຸດດ້ວຍສີນັ້ນ. ຄ່າເລີ່ມຕົ້ນແມ່ນການຈັດໃສ່ສີຕາມລໍາດັບຕາມເສັ້ນ. ທ່ານຈະຮຽນຮູ້ເພີ່ມເຕີມກ່ຽວກັບການຢຸດສີໃນຫນ້າທີ 3.
ດັ່ງນັ້ນ, ເພື່ອກໍານົດ gradient ຂ້າງເທິງທີ່ມີ CSS3, ທ່ານຂຽນວ່າ:
linear-gradient (left, # 999999 0%, #ffffff 100%);
ແລະເພື່ອກໍານົດມັນເປັນພື້ນຖານຂອງ DIV ທ່ານຂຽນວ່າ:
div {
ພາບພື້ນຫລັງ: ເສັ້ນເລື່ອນ - ຊ້າຍ (# 999999 0%, #ffffff 100%;
}
ສ່ວນຂະຫຍາຍຂອງຕົວທ່ອງເວັບສໍາລັບ CSS3 Linear Gradients
ເພື່ອໃຫ້ gradient ຂອງທ່ານເຮັດວຽກຂ້າມ browser, ທ່ານຕ້ອງໃຊ້ສ່ວນຂະຫຍາຍຂອງ browser ສໍາລັບ browser ສ່ວນໃຫຍ່ແລະ filter ສໍາລັບ Internet Explorer 9 ແລະລຸ່ມ (ຕົວຈິງ 2 ຕົວກອງ). ທັງຫມົດເຫຼົ່ານີ້ໃຊ້ເວລາອົງປະກອບດຽວກັນເພື່ອກໍານົດ gradient ຂອງທ່ານ (ຍົກເວັ້ນວ່າທ່ານພຽງແຕ່ສາມາດກໍານົດລະດັບ 2 ສີໃນ IE).
Microsoft Filters and Extension -Internet Explorer ເປັນສິ່ງທ້າທາຍທີ່ສຸດທີ່ຈະສະຫນັບສະຫນູນ, ເພາະວ່າທ່ານຕ້ອງການສາມສາຍທີ່ແຕກຕ່າງກັນເພື່ອສະຫນັບສະຫນູນເວີຊັນຂອງເບົາເຊີທີ່ແຕກຕ່າງກັນ. ເພື່ອໃຫ້ໄດ້ສີຂີ້ເຖົ່າຂ້າງເທິງໃຫ້ສີຂາວ gradient ທ່ານຈະຂຽນ:
/ * IE5-7 * /
ຕົວກອງ: progid: DXImageTransformMicrosoftgradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)
/ * IE 8-9 * /
-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-linear-gradient (left, # 999999 0%, #ffffff 100%);
ການຂະຫຍາຍ Mozilla Extension -The-moz- ຂະຫຍາຍວຽກຄືກັບຊັບສິນ CSS3, ພຽງແຕ່ມີການຂະຫຍາຍ -moz-. ເພື່ອໃຫ້ໄດ້ gradient ຂ້າງເທິງສໍາລັບ Firefox, ຂຽນ:
-moz-linear-gradient (left, # 999999 0%, #ffffff 100%);
Extension Opera -The -o-extender ເພີ້ມ gradients ກັບ Opera 11.1+. ເພື່ອໃຫ້ໄດ້ gradient ຂ້າງເທິງ, ຂຽນ:
-lengthal-gradient (left, # 999999 0%, #ffffff 100%);
Webkit Extension -The-web-extension extends much like the property CSS3 ເພື່ອກໍານົດ gradient ຂ້າງເທິງສໍາລັບ Safari 5.1+ ຫຼື Chrome 10+ ທ່ານຂຽນວ່າ:
-webkit-linear-gradient (left, # 999999 0%, #ffffff 100%);
ນອກນັ້ນຍັງມີລຸ້ນ Webkit ເກົ່າແກ່ທີ່ເຮັດວຽກກັບ Chrome 2+ ແລະ Safari 4+. ໃນນັ້ນທ່ານກໍານົດປະເພດຂອງ gradient ເປັນມູນຄ່າ, ແທນທີ່ຈະຢູ່ໃນຊື່ຊັບສິນ. ເພື່ອໃຫ້ gradient ສີເທົາກັບສີຂາວມີສ່ວນຂະຫຍາຍນີ້, ໃຫ້ຂຽນ:
-webkit-gradient (linear, top left, top right, stop-color (0%, # 999999), ສີຢຸດ (100%, # ffffff));
CSS3 CSS Linear Gradient Full CSS Code
ສໍາລັບການສະຫນັບສະຫນູນການສະຫນັບສະຫນູນຂອງຕົວທ່ອງເວັບເຕັມຮູບແບບເພື່ອໃຫ້ໄດ້ສີ gradient ສີຂີ້ເຖົ່າຂ້າງເທິງ, ກ່ອນຫນ້ານີ້ທ່ານຄວນປະກອບດ້ວຍສີທີ່ຄົງທີ່ສໍາລັບຕົວທ່ອງເວັບທີ່ບໍ່ສະຫນັບສະຫນູນ gradient, ແລະລາຍການສຸດທ້າຍຄວນເປັນແບບ CSS3 ສໍາລັບຕົວທ່ອງເວັບທີ່ສອດຄ່ອງກັບຢ່າງເຕັມທີ່. ດັ່ງນັ້ນ, ທ່ານຂຽນວ່າ:
ພື້ນຫລັງ: # 999999;
background: -moz-linear-gradient (left, # 999999 0%, #ffffff 100%);
ພື້ນຫລັງ: -webkit-gradient (ເສັ້ນ, ດ້ານຊ້າຍ, ຂວາ, ສີຢຸດ (0%, # 999999), ສີຢຸດ (100%, # ffffff));
ພື້ນຫລັງ: -webkit-linear-gradient (ຊ້າຍ, # 999999 0%, #ffffff 100%);
background: -o-linear-gradient (left, # 999999 0%, #ffffff 100%);
background: -ms-linear-gradient (left, # 999999 0%, #ffffff 100%);
ຕົວກອງ: progid: DXImageTransformMicrosoftgradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
background: linear-gradient (left, # 999999 0%, #ffffff 100%);
ຫນ້າຕໍ່ໄປໃນບົດຮຽນນີ້ອະທິບາຍເຖິງສ່ວນຂອງ gradient ໃນລາຍະລະອຽດເພີ່ມເຕີມແລະຫນ້າສຸດທ້າຍຊີ້ໃຫ້ທ່ານເປັນເຄື່ອງມືທີ່ເປັນວິທີທີ່ດີທີ່ຈະສ້າງ CSS3 gradients ໂດຍອັດຕະໂນມັດ.
ເບິ່ງນີ້ gradient ເລິກໃນການປະຕິບັດໂດຍໃຊ້ CSS ເທົ່ານັ້ນ.
02 of 04
ການສ້າງຂີ້ເຫຍື້ອຫຼ່ຽມມຸມມອງ - ມຸມຂອງຊັ້ນເລິກ
ຈຸດເລີ່ມຕົ້ນແລະຈຸດຢຸດຈະກໍານົດມຸມຂອງ gradient. ບັນດາ gradient ເລິກສ່ວນຫຼາຍແມ່ນມາຈາກເທິງຫາລຸ່ມຫຼືຈາກຊ້າຍໄປຫາຂວາ. ແຕ່ວ່າມັນກໍ່ເປັນໄປໄດ້ທີ່ຈະສ້າງຄວາມ gradient ທີ່ເຄື່ອນຍ້າຍໄປຕາມເສັ້ນຂວາງ. ຮູບພາບໃນຫນ້ານີ້ສະແດງໃຫ້ເຫັນ gradient ງ່າຍດາຍທີ່ຍ້າຍໃນມຸມກວ້າງ 45degree ຜ່ານຮູບພາບຈາກຂວາຫາຊ້າຍ.
ມຸມເພື່ອກໍານົດເສັ້ນຄຼາດິ້ງ
ມຸມແມ່ນເສັ້ນຢູ່ໃນຮູບວົງມົນຂອງມຸດສະລິມທີ່ຢູ່ໃນຈຸດສູນກາງຂອງອົງປະກອບ. 0deg ຊີ້ຂຶ້ນ, ຈຸດ 90deg ກັບສິດ, 180deg ຈຸດລົງ, ແລະ 270deg ຈຸດໃສ່ທາງຊ້າຍ. ທ່ານສາມາດກໍານົດມຸມໃດຫນຶ່ງຈາກ 0 ເຖິງ 359 ອົງສາ.
ທ່ານຄວນສັງເກດວ່າຢູ່ໃນສີ່ຫລ່ຽມມົນ, ມຸມ 45 ອົງສາຈະເຄື່ອນຍ້າຍຈາກແຈເບື້ອງຊ້າຍໄປທາງຂວາລຸ່ມ, ແຕ່ໃນມຸມສາກຈຸດຈຸດເລີ່ມຕົ້ນແລະຈຸດເລັກນ້ອຍແມ່ນຢູ່ນອກຮູບ, ດັ່ງທີ່ທ່ານເຫັນໃນຮູບ.
ວິທີການທົ່ວໄປຫຼາຍທີ່ຈະກໍານົດ gradient diagonal ແມ່ນເພື່ອກໍານົດແຈ, ເຊັ່ນ: ເທິງຂວາແລະ gradient ຈະຍ້າຍຈາກແຈທີ່ຫາແຈກົງກັນຂ້າມ. ທ່ານສາມາດກໍານົດຕໍາແຫນ່ງເລີ່ມຕົ້ນດ້ວຍຄໍາທີ່ໃຊ້ຕໍ່ໄປນີ້:
- ດ້ານເທິງ
- right
- ດ້ານລຸ່ມ
- left
- ສູນກາງ
ແລະພວກເຂົາສາມາດໄດ້ຮັບການອະນຸຍາດໃຫ້ເປັນສະເພາະ, ເຊັ່ນ:
- ເທິງຂວາ
- ດ້ານເທິງຊ້າຍ
- top center
- bottom right
- bottom left
- bottom center
- right center
- left center
ນີ້ແມ່ນ CSS ສໍາລັບ gradient ທີ່ຄ້າຍຄືກັນກັບຫນຶ່ງຮູບ, ສີແດງກັບສີຂາວເຄື່ອນຍ້າຍຈາກແຈເທິງສິດໄປທາງລຸ່ມຊ້າຍ:
ພື້ນຫລັງ: ## 901A1C;
ພາບພື້ນຫລັງ: -moz-linear-gradient (ຂວາເທິງ, # 901A1C 0%, # FFFFFF 100%);
ພື້ນຫລັງຮູບພາບ: -webkit-gradient (ເສັ້ນ, ຂວາ, ດ້ານຊ້າຍ, ສີຢຸດ (0, # 901A1C), ສີຢຸດ (1, #FFFFFF));
ພື້ນຫລັງ: -webkit-linear-gradient (ຂວາເທິງ, # 901A1C 0%, #ffffff 100%);
ຄວາມເປັນມາ: -l -literary-gradient (ຂວາເທິງ, # 901A1C 0%, #ffffff 100%);
ພື້ນຫລັງ: -ms-linear-gradient (ຂວາເທິງ, # 901A1C 0%, #ffffff 100%);
ພື້ນຫລັງ: ເສັ້ນເລື່ອນ - ເສັ້ນຂວາງ (ຂວາເທິງ, # 901A1C 0%, #ffffff 100%);
ທ່ານອາດຈະສັງເກດເຫັນວ່າບໍ່ມີຕົວກອງ IE ໃນຕົວຢ່າງນີ້. ນັ້ນແມ່ນຍ້ອນວ່າ IE ພຽງແຕ່ອະນຸຍາດໃຫ້ສອງປະເພດຂອງການກັ່ນຕອງ: ດ້ານເທິງຫາລຸ່ມ (ຄ່າເລີ່ມຕົ້ນ) ແລະຊ້າຍຫາຂວາ (ດ້ວຍສະຫຼັບ GradientType = 1).
ເບິ່ງນີ້ gradient ເສັ້ນຂວາງເສັ້ນຂວາງໃນການປະຕິບັດໂດຍໃຊ້ພຽງແຕ່ CSS.
03 of 04
ສີຢຸດ
ກັບ CSS gradient linear, ທ່ານສາມາດເພີ່ມສີຫຼາຍໃນການ gradient ຂອງທ່ານເພື່ອສ້າງຜົນກະທົບ fancier ເຖິງແມ່ນວ່າ. ເພື່ອເພີ່ມສີເຫຼົ່ານີ້, ທ່ານຈະເພີ່ມສີເພີ່ມເຕີມໃນຕອນທ້າຍຂອງຄຸນສົມບັດຂອງທ່ານ, ແຍກໂດຍໂຄຣມ. ທ່ານຄວນປະກອບຢູ່ບ່ອນທີ່ເສັ້ນສີຄວນເລີ່ມຕົ້ນຫຼືສິ້ນສຸດເຊັ່ນກັນ.
ການກັ່ນຕອງຂອງ Internet Explorer ສະຫນັບສະຫນູນພຽງແຕ່ສອງສີຢຸດ, ດັ່ງນັ້ນ, ເມື່ອທ່ານສ້າງ gradient ນີ້, ທ່ານພຽງແຕ່ປະກອບມີສີທໍາອິດແລະທີສອງທີ່ທ່ານຕ້ອງການສະແດງ.
ນີ້ແມ່ນ CSS ສໍາລັບສີ gradient ສາມສີຂ້າງເທິງນີ້:
background: #ffffff;
background: -moz-linear-gradient (left, #ffffff 0%, # 901A1C 51%, #ffffff 100%)
ພື້ນຫລັງ: -webkit-gradient (ເສັ້ນ, ດ້ານຊ້າຍ, ຂວາ, ສີຢຸດ (0%, # ffffff), ສີຢຸດ (51%, # 901A1C), ສີຢຸດ (100%, # ffffff));
background: -webkit-linear-gradient (left, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
background: -o-linear-gradient (left, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
background: -ms-linear-gradient (left, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
ຕົວກອງ: progid: DXImageTransformMicrosoftgradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1)
background: linear-gradient (left, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
ເບິ່ງນີ້ gradient ເລິກທີ່ມີສາມສີຢຸດໃນການດໍາເນີນການໂດຍໃຊ້ CSS ເທົ່ານັ້ນ.
04 of 04
ເຮັດໃຫ້ຄວາມສະດວກໃນການກໍ່ສ້າງງ່າຍຂຶ້ນ
ມີສອງເວັບໄຊຕ໌ທີ່ຂ້າພະເຈົ້າແນະນໍາໃຫ້ຊ່ວຍໃຫ້ທ່ານສ້າງ gradients, ພວກເຂົາແຕ່ລະມີຜົນປະໂຫຍດແລະຂໍ້ບົກຜ່ອງກັບພວກເຂົາ, ຂ້າພະເຈົ້າບໍ່ໄດ້ພົບກັບຜູ້ສ້າງ gradient ທີ່ເຮັດທຸກສິ່ງທຸກຢ່າງ.
Ultimate CSS Gradient Generator
ຜູ້ຜະລິດ gradient ນີ້ແມ່ນທີ່ນິຍົມຫຼາຍເພາະວ່າມັນປະຕິບັດໃນລັກສະນະທີ່ຄ້າຍຄືກັນກັບຜູ້ສ້າງ gradient ໃນໂຄງການຕ່າງໆເຊັ່ນ Photoshop. ຂ້ອຍຍັງຊອບມັນເພາະມັນຊ່ວຍໃຫ້ທ່ານທັງຫມົດເສີມ CSS, ບໍ່ພຽງແຕ່ Webkit ແລະ Mozilla. ບັນຫາກັບເຄື່ອງກໍາເນີດໄຟຟ້ານີ້ແມ່ນວ່າມັນສະຫນັບສະຫນູນພຽງແຕ່ສະໄຕເລື່ອນແລະແນວຕັ້ງ. ຖ້າທ່ານຕ້ອງການເຮັດ gradient diagonal, ທ່ານຕ້ອງໄປຫາເຄື່ອງກໍາເນີດໄຟຟ້າອື່ນທີ່ຂ້າພະເຈົ້າແນະນໍາ.
CSS3 Gradient Generator
ຜູ້ຜະລິດນີ້ໄດ້ໃຊ້ເວລາຂ້ອຍພຽງເລັກນ້ອຍເພື່ອເຂົ້າໃຈກວ່າຄົນທໍາອິດ, ແຕ່ມັນກໍ່ສະຫນັບສະຫນູນການປ່ຽນທິດທາງໄປທາງຂວາງ.
ຖ້າທ່ານຮູ້ກ່ຽວກັບ CSS Generator ອື່ນທີ່ທ່ານຕ້ອງການດີກວ່ານີ້, ກະລຸນາ ແຈ້ງໃຫ້ພວກເຮົາທາບ .