25 ຄຳ ແນະ ນຳ ທີ່ສົ່ງເສີມເພື່ອຫາຍໃຈຊີວິດ ໃໝ່ ເຂົ້າໃນ CSS ຂອງທ່ານ

ກະວີ: John Stephens
ວັນທີຂອງການສ້າງ: 25 ເດືອນມັງກອນ 2021
ວັນທີປັບປຸງ: 11 ເດືອນພຶດສະພາ 2024
Anonim
25 ຄຳ ແນະ ນຳ ທີ່ສົ່ງເສີມເພື່ອຫາຍໃຈຊີວິດ ໃໝ່ ເຂົ້າໃນ CSS ຂອງທ່ານ - Creative
25 ຄຳ ແນະ ນຳ ທີ່ສົ່ງເສີມເພື່ອຫາຍໃຈຊີວິດ ໃໝ່ ເຂົ້າໃນ CSS ຂອງທ່ານ - Creative

ເນື້ອຫາ

ໃນບາງເວລາທີ່ມີເຕັກໂນໂລຢີໃດໆ, ມີຄວາມຮູ້ສຶກວ່າທຸກໆຢ່າງທີ່ສາມາດເຮັດໄດ້ກໍ່ໄດ້ເຮັດແລ້ວ. ເມື່ອບາງສິ່ງບາງຢ່າງບໍ່ຄືເກົ່າແລະເຫຼື້ອມ, ຄວາມສົນໃຈແລະຄວາມສົນໃຈຈະຖືກດຶງດູດໄປສູ່ສິ່ງໃຫຍ່ໆຕໍ່ໄປ. ນີ້ມັກຈະເປັນກໍລະນີໃນອຸດສາຫະ ກຳ ເວັບ, ເຊິ່ງມັກຈະໄດ້ຮັບຄວາມຕື່ນເຕັ້ນທີ່ ໜ້າ ຢ້ານກົວຈາກລັກສະນະເຕັກໂນໂລຢີທີ່ແນ່ນອນກ່ອນ, ໄວໆນີ້, ມັນຈະປ່ອຍມັນໄປສູ່ mundane.

ເມື່ອ CSS ໄດ້ປະກົດຕົວເປັນຄັ້ງ ທຳ ອິດ, ມັນແມ່ນການປະຕິວັດ, ແລະໃນໄລຍະເວລາມັນໄດ້ພັດທະນາເພື່ອໃຫ້ຜູ້ອອກແບບສາມາດສ້າງແຜນຜັງເວັບທີ່ມີຄວາມຍືດຫຍຸ່ນ, ແໜ້ນ ໜາ ແລະສວຍງາມ. ເຖິງແມ່ນວ່າໃນທ້າຍປີນີ້, ມີ ຄຳ ແນະ ນຳ ຈາກຫລາຍໆເຂດທີ່ວ່າ CSS ເມື່ອຍແລະບາງທີເວລາໃນດວງອາທິດໄດ້ຜ່ານໄປແລ້ວ.

ຂ້ອຍຕ້ອງການສະແດງໃຫ້ເຫັນວ່າມັນຍັງມີຄວາມຕື່ນເຕັ້ນແລະຊີວິດຫຼາຍໆຢ່າງໃນໂລກຂອງ CSS, ບໍ່ວ່າຄຸນລັກສະນະນີ້ອາດຈະຍັງບໍ່ທັນໄດ້ຄົ້ນຫາເທື່ອກ່ອນ, ຫຼືໂດຍຜ່ານການ ນຳ ໃຊ້ລັກສະນະຂອງ CSS ໃນແບບທີ່ທ່ານບໍ່ໄດ້ພິຈາລະນາມາກ່ອນ.

ນີ້ແມ່ນ ຄຳ ແນະ ນຳ ຈາກຜູ້ຊ່ຽວຊານດ້ານ CSS ຂອງອຸດສາຫະ ກຳ ຈຳ ນວນ ໜຶ່ງ.


(ໝາຍ ເຫດ: ເຕັກນິກບາງຢ່າງໃນຄຸນລັກສະນະນີ້ແມ່ນການຕັດຕໍ່ແລະອາດຈະບໍ່ໄດ້ຮັບການສະ ໜັບ ສະ ໜູນ ຢ່າງເຕັມທີ່ໃນທຸກ browser. ການທົດສອບຢ່າງລະອຽດແລະຮັບປະກັນການຫຼຸດລົງແມ່ນມີຢູ່ກ່ອນທີ່ຈະເຮັດວຽກໃດໆທີ່ມີຊີວິດຢູ່.)

01. ກົງກັບຮູບພາບເຂົ້າໃນລະບົບສີຂອງເວັບໄຊ

Christopher Schmitt, ຜູ້ຈັດງານປະຊຸມ

ກອງປະຊຸມມີລະບົບສີຂອງຕົນເອງແລະໂດຍມີຜູ້ເວົ້າຫຼາຍ, ການເຮັດວຽກ ສຳ ລັບການຈັດການຮູບຄົນສາມາດສັບຊ້ອນໄດ້. ການ ນຳ ໃຊ້ຕົວກອງທີ່ ກຳ ນົດເອງບໍ່ໄດ້ຂະ ໜາດ ແລະເພິ່ງພາທ່ານໃນການເຂົ້າເຖິງ, ເວົ້າ, ການປະຕິບັດ Photoshop ສະເພາະ. ຕອນນີ້ຂ້ອຍໃຊ້ PNGs ທີ່ມີຄວາມໂປ່ງໃສສູງແລະເພີ່ມສຽງໂດຍໃຊ້ຕົວກອງ CSS. ນີ້ຊ່ວຍໃຫ້ຂ້ອຍສາມາດກົງກັບຮູບພາບໃດ ໜຶ່ງ ໃນໂຄງການຂອງເຫດການ, ແລະຍັງສາມາດ ນຳ ໃຊ້ຮູບພາບຕ່າງໆໃນຫລາຍຫົວຂໍ້. ຂ້ອຍພຽງແຕ່ຕ້ອງການກົດລະບຽບ CSS ໃໝ່ ສຳ ລັບແຕ່ລະອັນ. ເບິ່ງການສາທິດ.

02. ແບ່ງປັນພື້ນທີ່ໃຫ້ເປັນແຖວສຸດທ້າຍຂອງຕາຂ່າຍໄຟຟ້າ

Stephen Hay, ນັກອອກແບບແລະນັກຂຽນ


ຖ້າທ່ານມີ ຈຳ ນວນສິນຄ້າທີ່ບໍ່ຮູ້ຈັກທີ່ຈະສະແດງຢູ່ໃນຕາຂ່າຍໄຟຟ້າ, ທ່ານສາມາດໃຊ້ Flexbox ເພື່ອແບ່ງແຖວສຸດທ້າຍ. ສະນັ້ນຖ້າມີພຽງແຕ່ລາຍການດຽວເທົ່ານັ້ນ, ມັນຈະເປັນການຕິດຕໍ່ທັງ ໝົດ; ຖ້າມີສອງລາຍການ, ແຖວຈະຖືກແບ່ງອອກເປັນເຄິ່ງ, ແລະອື່ນໆ. ເບິ່ງການສາທິດ.

03. ສ້າງພາບເຄື່ອນໄຫວອະນຸພາກທີ່ມີກ່ອງເງົາ

Ana Tudor, ນັກຂຽນລະຫັດແລະຄະນິດສາດທີ່ມີສະ ເໜ່

ໂດຍການປະສົມ box-shadow ດ້ວຍຄະນິດສາດແລະ Sass ບາງຢ່າງ, ທ່ານສາມາດເສັ້ນສະແດງເສັ້ນໂຄ້ງ 2D, ເຮັດຕາມພາບເຄື່ອນໄຫວ 3D ແລະສ້າງພາບເຄື່ອນໄຫວອະນຸພາກທີ່ບ້າໆທີ່ທຸກຄົນຈະເຮັດຜິດພາດ ສຳ ລັບຜ້າໃບ! ເບິ່ງການສາທິດແລະອື່ນໆ.

04. polyhedra ທີ່ມີຊີວິດຊີວາກັບການຫັນປ່ຽນ

Ana Tudor, coder ແລະຄະນິດສາດທີ່ມີຄວາມຫລົງໄຫຼ

ທ່ານອາດຈະໄດ້ເຫັນ polygons CSS ບໍລິສຸດທີ່ຖືກສ້າງຂື້ນດ້ວຍເຂດແດນ, ແຕ່ວ່າພວກເຮົາມີເຄື່ອງມືທີ່ມີປະສິດທິພາບຫຼາຍກວ່າຢູ່ໃນ ການຫັນປ່ຽນ ຄຸນ​ສົມ​ບັດ. ລະບົບຕ່ອງໂສ້ແລະການ ນຳ ໃຊ້ການຫັນປ່ຽນກ່ຽວກັບອົງປະກອບຮັງຊ່ວຍໃຫ້ພວກເຮົາສ້າງ polygons ທີ່ສັບສົນທີ່ມີພື້ນຖານຮູບພາບຫລືຊາຍແດນແລະພາຍໃນໂປ່ງໃສ. ໂດຍ ນຳ ໃຊ້ການຫັນປ່ຽນແບບ 3D, ພວກເຮົາສາມາດປະສົມຮູບ 2D ເຫຼົ່ານີ້ອອກເປັນ polyhedra ແລະເຮັດໃຫ້ຕົວແຂງລວມເຂົ້າກັນ, ເປີດເຜີຍ, ລະເບີດຫຼືແນະ ນຳ ໃນແບບທີ່ຜິດພາດງ່າຍ ສຳ ລັບ WebGL. ເບິ່ງການສາທິດ.


05. ປະລິນຍາໂທ 'calc ()' ສຳ ລັບຈັດ ຕຳ ແໜ່ງ

Ana Tudor, coder ແລະຄະນິດສາດທີ່ມີຄວາມຫລົງໄຫຼ

ຂ້ອຍ​ໄດ້​ຮັກ calc () ຈາກປັດຈຸບັນທີ່ຂ້ອຍຄົ້ນພົບມັນ. ມັນມີປະໂຫຍດຕໍ່ການປັບແຕ່ງຂອບ, ຂະ ໜາດ ຫລືມິຕິ, ແລະສາມາດເປັນສິ່ງທີ່ຊ່ວຍຊີວິດໄດ້ເມື່ອໃຊ້ ສຳ ລັບການຕັ້ງ ຕຳ ແໜ່ງ ຫຼືຂະ ໜາດ ຂອງພື້ນຫລັງ, ພາຍໃນ gradients ຫຼືການຫັນປ່ຽນ, ແລະລວມກັນບໍ່ພຽງແຕ່ກັບຫົວ ໜ່ວຍ ເກົ່າເທົ່ານັ້ນ, ແຕ່ຍັງເປັນບ່ອນເບິ່ງທີ່ສວຍງາມແລະ ໃໝ່ ອີກດ້ວຍ.

06. ເຮັດໃຫ້ຮູບແບບກ່ອງບໍ່ເປັນປະໂຫຍດກັບ“ ການປັບຂະ ໜາດ ຂອງຊ່ອງ”

Sawyer Hollenshead, Oak Studios dev ແລະນັກອອກແບບ

ໃຊ້ box-sizing ເພື່ອຊ່ວຍປະຢັດສຸຂະພາບຂອງທ່ານ. ຖ້າບໍ່ມີມັນ, ອົງປະກອບ ໜຶ່ງ ທີ່ມີຄວາມກວ້າງ 250px ແລະ 25px ຂອງແຜ່ນຮອງປະສົມກັບຄວາມກວ້າງ 300px, ເຮັດໃຫ້ pixels ປະສົມແລະເປີເຊັນເຄັ່ງຄັດ. ກັບ ກ່ອງຂະ ໜາດ:ຊາຍແດນ - ປ່ອງ ຂອບເຂດແລະແຜ່ນຮອງແມ່ນຖືກຈັດໃສ່ໃນຄວາມກວ້າງທີ່ໄດ້ ກຳ ນົດໄວ້.

07. ຕັ້ງສູນກາງດ້ວຍ CSS

Trent Walton, ຜູ້ກໍ່ຕັ້ງ Paravel

ທາງດ້ານປະຫວັດສາດ, ມັນຍາກທີ່ຈະເອົາບາງສ່ວນແນວຕັ້ງກັບແນວຕັ້ງ, ເຊັ່ນວ່າທ່ານມີຮູບພາບທີ່ມີຂໍ້ຄວາມທີ່ຢູ່ຕິດກັນທ່ານຕ້ອງການຈັດແນວຕັ້ງ. ແທນທີ່ຈະກືນແລະດ່າກັນ, ໃຫ້ໃຊ້ Flexbox ເພື່ອຈັດການກັບຄວາມເສີຍເມີຍ. ເບິ່ງການສາທິດ.

08. ເປົ້າ ໝາຍ ທະນາຄານຂອງວັດຖຸທີ່ກ່ຽວຂ້ອງ

Jonathan Smiley, ຄູ່ຮ່ວມງານຂອງ Zurb ແລະເປັນຜູ້ ນຳ ພາການອອກແບບ

ໂກນ້ ຳ ໜັກ ເສັ້ນ CSS ໂດຍການ ນຳ ໃຊ້ຕົວເລືອກຄຸນລັກສະນະທີ່ປະມານໃສ່ຊື່ຫ້ອງຮຽນ, ເພື່ອແນໃສ່ທະນາຄານໃຫຍ່ຂອງວັດຖຸທີ່ກ່ຽວຂ້ອງ, ແທນທີ່ຈະເອົາໃຈໃສ່ຄຸນລັກສະນະທົ່ວໄປຂອງທຸກໆຊັ້ນຮຽນ. ຍົກຕົວຢ່າງ ... [class * = "- block-grid-"] {} ... ຈະແນເປົ້າ ໝາຍ ທີ່ມັກ: .small-block-grid-3 .large-block-grid-5

09. ຄວບຄຸມການວາງສະກົດຈິດ

Savid Storey, ຜູ້ສະ ໜັບ ສະ ໜູນ ເປີດເວັບ

Hyphenation ຖືກປະຕິບັດໃນການພິມ, ແລະບາງນັກພັດທະນາໃຊ້ ຄຳ ສະກົດຈິດ ຊັບສິນທາງອິນເຕີເນັດ, ແຕ່ມີ ໜ້ອຍ ຄົນທີ່ຈະຮູ້ເຖິງຄຸນສົມບັດອື່ນໆທີ່ໃຫ້ການຄວບຄຸມທີ່ດີກວ່າເກົ່າ. ຖ້າທ່ານບໍ່ລະມັດລະວັງ, ທ່ານໄດ້ຮັບບັນໄດຂັ້ນໄດທີ່ສະກົດຈິດຖືກໃຊ້ຢູ່ໃນຫຼາຍສາຍ. ກົດລະບຽບທົ່ວໄປຂອງໂປ້ມືແມ່ນບໍ່ເກີນສອງແຖວ, ເຊິ່ງທ່ານສາມາດຄວບຄຸມການໃຊ້ hyphenate-limit-lines. ພ້ອມນີ້, hyphenate-limit-chars ຊ່ວຍໃຫ້ທ່ານສາມາດ ກຳ ນົດຄວາມຍາວຂອງ ຄຳ ທີ່ຕ່ ຳ ສຸດ, ພ້ອມກັບ ຈຳ ນວນຕົວອັກສອນຕ່ ຳ ທີ່ສຸດກ່ອນແລະຫຼັງການສະກົດຈິດ.

10. ນຳ ໃຊ້ປະໂຫຍດຈາກການຂຽນແບບ Modes

David Storey, ຜູ້ສະ ໜັບ ສະ ໜູນ ເປີດເວັບ

ຮູບແບບການຂຽນຊ່ວຍໃຫ້ທ່ານສາມາດ ກຳ ນົດທິດທາງທີ່ກະແສຂໍ້ຄວາມ. ບາງບົດເລື່ອງຂອງອາຊີຕາເວັນອອກຖືກຂຽນເປັນແນວຕັ້ງ, ສາຍຕັ້ງຂື້ນຈາກຂວາຫາຊ້າຍ, ລະບຸດ້ວຍ ຮູບແບບການຂຽນ: vertical-rl (tb-rl ໃນ IE). ຂໍ້ຄວາມແນວຕັ້ງບໍ່ໄດ້ຖືກ ນຳ ໃຊ້ແທ້ໆໃນລະບົບການຂຽນຂອງເອີຣົບ, ແຕ່ສາມາດໃຊ້ໄດ້ງ່າຍ ສຳ ລັບຫົວຂໍ້ຕາຕະລາງເວລາທີ່ທ່ານມີພື້ນທີ່ແນວນອນ.

11. ໃຊ້ gradients ດ້ວຍວິທີທີ່ຜິດປົກກະຕິ

Ruth John, ຜູ້ອອກແບບ

gradients ພື້ນຫລັງສາມາດເບິ່ງທີ່ຍິ່ງໃຫຍ່ໃນເວລາທີ່ການນໍາໃຊ້ກັບຊາຍແດນແລະຂ່າວ. ຂ້ອຍໃຊ້ທັງໃນ blog ຂອງຂ້ອຍແລະກັບໂປແກຼມ preprocessor ສາມາດໂທຫາ mixin ກັບລະຫັດທີ່ໃຊ້ ໃໝ່, ເພື່ອບໍ່ໃຫ້ມັນເຮັດດ້ວຍຕົນເອງ. ຢ່າໄປພິເສດເພາະວ່າ gradients ສາມາດເຮັດວຽກ ໜັກ. SCSS mixin ສຳ ລັບລາຍຊື່ລູກປືນ:

@mixin gradedBullet ($ color) {ຮູບພາບພື້ນຫລັງ: linear-gradient (ຊ້າຍ, ເບົາບາງ ($ color, 15%) 10px, $ color 11px, $ color 20px, darken ($ color, 15%) 21px, darken ($ color , 15%) 30px, ໂປ່ງໃສ 31px); }

12. ໃຊ້ string-Matching ໃນ link ຕ່າງໆ

Ruth John, ຜູ້ອອກແບບ

ໃນບລັອກຂອງຂ້ອຍ, ຂ້ອຍໄດ້ໃຊ້ CSS attribute selectors ກັບສາຍທີ່ກົງກັບຮູບສັນຍາລັກສັງຄົມ. ສິ່ງເຫຼົ່ານີ້ປາກົດຢູ່ທົ່ວ blog ຂອງຂ້ອຍ, ບາງຄັ້ງກໍ່ມີຂໍ້ຄວາມແລະບາງຄັ້ງກໍ່ບໍ່ມີ, ແຕ່ມີຮູບສັນຍາລັກຢູ່ສະ ເໝີ. ເພື່ອໃຫ້ຮູບແບບການເຊື່ອມໂຍງທີ່ຖືກຕ້ອງກັບຮູບສັນຍາລັກສັງຄົມທີ່ຖືກຕ້ອງ, ຂ້ອຍໃຊ້ສາຍກົງຢູ່ເທິງ href ຄຸນລັກສະນະຂອງອົງປະກອບສະມໍ. ຂ້ອຍ​ໃຊ້ *= ສະນັ້ນ href ກ່ຽວກັບອົງປະກອບສະມໍພຽງແຕ່ຕ້ອງມີສາຍສະຕິງທີ່ຂ້ອຍລະບຸ.

/ * ສຳ ລັບທຸກເຊື່ອມຕໍ່ທາງສັງຄົມ * / .social a: ກ່ອນ {display: inline-block; padding-right: 30px; font-family: 'FontAwesome';} / * ແຕ່ລະລິ້ງສະເພາະ * / .social a [href * = "twitter"]: ກ່ອນ {ເນື້ອຫາ: " f099"; color: # 52ae9f;} .social a [href * = "github"]: ກ່ອນ {ເນື້ອຫາ: " f09b"; ສີ: # 5f2e44;} .social a [href * = "ອາຫານ"]: ກ່ອນ {ເນື້ອຫາ: " f09e"; ສີ: # b47742;}

13. ເຮັດໃຫ້ FOUT ເຮັດວຽກໃຫ້ກັບທ່ານ

Jason Pinic, ຜູ້ ອຳ ນວຍການໃຫຍ່ໃນການອອກແບບ H + W

ເວບໄຊທ໌ໄດ້ຖືກສ້າງຂຶ້ນໃນສະຖານທີ່ທີ່ມັນຄວນຈະສົ່ງເນື້ອຫາ, ເຖິງແມ່ນວ່າຕົວທ່ອງເວັບບໍ່ສາມາດຕອບສະ ໜອງ ຄວາມເສຍຫາຍ. ການ ນຳ ໃຊ້ຕົວອັກສອນທີ່ຊ້າລົງສາມາດເປັນສິ່ງທີ່ ໜ້າ ເສົ້າໃຈ, FOUT (Flash Of Unstyled Text) ແມ່ນການ ນຳ ທາງແລະການສະແດງຂໍ້ຄວາມໃນຂະນະທີ່ດາວໂຫລດຕົວອັກສອນ. Google ແລະ Typekit ໃຫ້ ຄຳ ຕອບ: web-font loader. ໂດຍການໃສ່ຊັ້ນຮຽນໃນ ໜ້າ ເວັບ, ໂດຍອີງໃສ່ສະຖານະພາບຂອງການ ນຳ ໃຊ້ຕົວອັກສອນ, ທ່ານສາມາດລົງແບບຮຽນກັບຫ້ອງຮຽນເຫຼົ່ານັ້ນເພື່ອຮັກສາລະດັບ ຕຳ ່ສຸດ, ພ້ອມທັງ ກຳ ຈັດໂຣກທີ່ບໍ່ສາມາດເບິ່ງເຫັນໄດ້ຂອງ WebKit. ເບິ່ງການສາທິດ.

14. ສຳ ຫລວດ SVG ສຳ ລັບປະຫວັດຄວາມເປັນມາ

Emil Björklund, ນັກພັດທະນາເວັບໄຊຕ໌ທີ່ໃຊ້

ຕົວທ່ອງເວັບດຽວທີ່ບໍ່ມີການສະ ໜັບ ສະ ໜູນ ດ້ານ SVG ແມ່ນ IE8 ແລະລຸ່ມນີ້ແລະ Android 2 WebKit, ແລະດັ່ງນັ້ນການໃຊ້ SVG ສຳ ລັບພື້ນຫລັງໃນ CSS ແມ່ນເປັນໄປໄດ້, ໂດຍສະເພາະພ້ອມກັບວິທີແກ້ໄຂແບບ PNG, ເຊັ່ນ Grunticon. SVG ສາມາດໄດ້ຮັບການອອກແບບໂດຍ CSS, ແລະມີຄຸນສົມບັດທີ່ມີເລືອດທີ່ ໜ້າ ສົນໃຈຂອງ CSS (ຕົວກອງ!) ຈາກ SVG ທີ່ພວກເຮົາສາມາດຫຼີ້ນກັບທີ່ ນຳ ໃຊ້ກັບ HTML.

15. ສຸມໃສ່ຜູ້ໃຊ້ດ້ວຍການຫັນປ່ຽນແບບ 3D

Emil Björklund, ນັກພັດທະນາເວັບໄຊຕ໌ທີ່ໃຊ້

ການ ນຳ ໃຊ້ການປ່ຽນແປງ 3D ແລະການ ນຳ ໃຊ້ z-ມິຕິ ໃນການໂຕ້ຕອບຂອງຜູ້ໃຊ້ສາມາດເປັນປະໂຫຍດແທ້ໆ, ໂດຍສະເພາະໃນການເຊື່ອງ / ສະແດງຫຼືຫຍໍ້ / ຂະຫຍາຍເນື້ອຫາ. ມັນຍັງງ່າຍດາຍທີ່ຈະມີການປ່ຽນແປງ 2D, ຫຼືບໍ່ມີການປ່ຽນແປງຫຍັງເລີຍ, ໃນສະຖານະການດັ່ງກ່າວ. ມັນແມ່ນພື້ນທີ່ທີ່ມີການປັບປຸງທີ່ກ້າວ ໜ້າ ໄປເລື້ອຍໆ.

16. ສ້າງເມນູວົງມົນດ້ວຍ CSS ແລະຄະນິດສາດ

Sara Soueidan, ນັກພັດທະນາ frontend

ເມນູວົງແມ່ນມີຄວາມນິຍົມໃນແອັບ mobile ມືຖື, ແລະທ່ານສາມາດໃຊ້ CSS ການຫັນປ່ຽນແລະການຫັນປ່ຽນຕ່າງໆເພື່ອສ້າງເມນູວົງມົນແບບງ່າຍດາຍ. ເມນູນີ້ສາມາດຖືກດັດແປງແລະປັບແຕ່ງເພື່ອສ້າງເມນູຂຶ້ນ - ລົງລຸ່ມ, ເຊັ່ນກັນ. CSS ບໍ່ມີວິທີການໂດຍກົງໃນການແປພາສາຕາມລວງຂວາງ, ແຕ່ທ່ານສາມາດໃຊ້ຄຸນຄ່າຂອງລັດສະ ໝີ ວົງມົນທີ່ທ່ານຕ້ອງການຈັດວາງລາຍການແລະ ນຳ ໃຊ້ກົດລະບຽບຄະນິດສາດທີ່ງ່າຍດາຍໃນການຄິດໄລ່ຄ່າແປພາສາຕາມແນວນອນແລະແນວຕັ້ງເພື່ອສົ່ງຕໍ່ translateX () ແລະ translateY () ໜ້າ ທີ່. ວິທີນັ້ນ, ທ່ານຈົບລົງດ້ວຍກ ເສັ້ນຂວາງ ການແປເພື່ອຍ້າຍລາຍການເມນູໄປຍັງ ຕຳ ແໜ່ງ ທີ່ຖືກຕ້ອງໃນວົງມົນ. ກໍລະນີກົດທີ່ປິດ / ເປີດເມນູສາມາດຈັດການໄດ້ໂດຍໃຊ້ JavaScript, ຫຼືທ່ານສາມາດ ນຳ ໃຊ້ອີກ ໜຶ່ງ ບາດກ້າວແລະມີເມນູ CSS ເທົ່ານັ້ນໂດຍການໃຊ້ CSS checkbox hack. ໃນການສາທິດຂອງຂ້ອຍ, ຂ້ອຍໃຊ້ JavaScript ແລະ HTML5 classList API, ເຊິ່ງບໍ່ໄດ້ຮັບການສະ ໜັບ ສະ ໜູນ ໃນ browser ທັງ ໝົດ ສະນັ້ນທ່ານ ຈຳ ເປັນຕ້ອງເບິ່ງການສາທິດໃນ browser ທີ່ທັນສະ ໄໝ ເພື່ອເຮັດໃຫ້ມັນເຮັດວຽກ, ຫຼືບໍ່ເຮັດລະຫັດລະຫັດ jQuery ແທນທີ່ຈະໃຊ້ API classList API ລະຫັດ.

ເບິ່ງການສາທິດແລະການສອນແບບເຕັມຮູບແບບ. ຕົວຢ່າງ CSS Checkbox hack.

17. ການເຊື່ອມໂຍງທີ່ມີຊີວິດຊີວາກ່ຽວກັບການເລື່ອນ

Paul Lloyd, ຜູ້ອອກແບບໂຕ້ຕອບ Guardian

ລັດ Hover ບໍ່ຄວນອີງໃສ່ການເຮັດວຽກງານຫຼືສະ ໜອງ ຂໍ້ມູນທີ່ ສຳ ຄັນ, ແຕ່ທ່ານຍັງສາມາດເພີ່ມອິນເຕີເຟດ ສຳ ລັບຜູ້ໃຊ້ທີ່ໃຊ້ເມົາສ໌ຢູ່. ໃນເວັບໄຊທ໌ 24ways.org, ພວກເຮົາເປີດເຜີຍຫົວຂໍ້ບົດຄວາມໃນເວລາທີ່ທ່ານຄົ້ນຄວ້າເຊື່ອມຕໍ່ໃນ ໜ້າ ກ່ອນ ໜ້າ / ຕໍ່ໄປ. ນີ້ແມ່ນບັນລຸໄດ້ໂດຍການສ້າງ a :: ຫລັງຈາກ pseudo-element ມີເນື້ອຫາທີ່ຜະລິດມາຈາກມູນຄ່າຂອງ a ຂໍ້ມູນ - ຄຸນລັກສະນະ, ໂດຍມີການປ່ຽນແປງ CSS ໃຊ້ເພື່ອໃຫ້ມັນເລື່ອນລົງໄປໃນມຸມເບິ່ງ. ເບິ່ງການສາທິດ.

18. ເຮັດພາບເຄື່ອນໄຫວຂອງ keyframe ງ່າຍໆ

Paul Lloyd, ຜູ້ອອກແບບໂຕ້ຕອບ Guardian

ໃນເວັບໄຊທ໌ 24ways.org, ພວກເຮົາໄດ້ເພີ່ມຂໍ້ສະ ເໜີ ແຈທີ່ມີພາບເຄື່ອນໄຫວເຂົ້າໃນບົດສະຫຼຸບ, ເຊິ່ງເປີດຂື້ນ. ສິ່ງນີ້ໄດ້ເຮັດໂດຍການສົມທົບລະບົບ @keyframes ກົດລະບຽບກັບຄຸນສົມບັດພາບເຄື່ອນໄຫວ, ປ່ຽນ ຕຳ ແໜ່ງ ຂອງພາບພື້ນຫລັງເພື່ອບັນລຸພາບເຄື່ອນໄຫວທີ່ອີງໃສ່ sprite. ເຄັດລັບແມ່ນການປະກາດ ຈຳ ນວນເຟຣມທີ່ທ່ານມີຢູ່ໃນພາບເຄື່ອນໄຫວຂອງທ່ານດ້ວຍ the ຂັ້ນຕອນ () ມູນຄ່າ. ເບິ່ງການສາທິດ.

19. ສ້າງຜົນກະທົບ 3D ທີ່ເລື່ອນໄດ້ດ້ວຍເງົາ

Catherine Farman, ນັກພັດທະນາ Happy Cog

ໂຄງການທີ່ຜ່ານມາໄດ້ຮຽກຮ້ອງໃຫ້ມີຮູບພາບຜະລິດຕະພັນທີ່ເລື່ອນໄດ້ດ້ວຍເງົາອ້ອມຮອບ, ສ້າງຜົນກະທົບ 3D ຂອງການເລື່ອນອອກຈາກ ໜ້າ ຈໍ. ເງົາໃຊ້ຫລາຍ CSS3 ລັກສະນະ: ຊາຍແດນ - radius ຄວາມໂປ່ງໃສບໍ່ມີເພດ; ແລະ box-shadow. ມັນເຮັດວຽກໄດ້ດີ ສຳ ລັບຕາ ໜ່າງ ຜະລິດຕະພັນ, ການສະແດງຮູບພາບໃນ hero ໃນ ໜ້າ ທຳ ອິດ, ຫຼືການອອກແບບ whimsical ກັບໂຄ້ງທີ່ບໍ່ຄ່ອຍເຊື່ອງ່າຍໆ. ເບິ່ງການສາທິດ.

20. ປັບປຸງລະດັບ ໜ້າ ທີໃຊ້ໂດຍ: 'ເປົ້າ ໝາຍ'

Simon Madine, ນັກພັດທະນາເວັບຊັ້ນສູງຂອງ HeRe

CSS ບໍ່ແມ່ນພາສາການຂຽນໂປແກຼມໃນຄວາມ ໝາຍ ທຳ ມະດາ, ແຕ່ທ່ານຍັງສາມາດເຮັດສິ່ງທີ່ສະຫລາດໂດຍບໍ່ຕ້ອງກັບໄປໃຊ້ກັບ JavaScript. ຍົກຕົວຢ່າງ, the :ເປົ້າ​ຫມາຍ pseudo-class ແມ່ນໃຊ້ກັບອົງປະກອບທີ່ເປັນເປົ້າ ໝາຍ ຂອງການເຊື່ອມຕໍ່ທີ່ກົດປຸ່ມ.

ທ່ານສາມາດໃຊ້ສິ່ງນີ້ເພື່ອ ກຳ ນົດສະຖານະຂອງ ໜ້າ ເວັບ, ຕັ້ງເປົ້າ ໝາຍ ໃສ່ພໍ່ແມ່ທີ່ມີສ່ວນປະກອບຫຼາຍຢ່າງ, ແລະລິ້ງຂອງທ່ານກາຍເປັນວິທີໃນການຄວບຄຸມລັກສະນະແລະຮູບແບບຂອງເດັກນ້ອຍທຸກຄົນດ້ວຍການກົດປຸ່ມດຽວ. ເບິ່ງການສາທິດ.

21. ໃຫ້ ຄຳ ຕິຊົມກັບພາບເຄື່ອນໄຫວທີ່ບໍ່ຊ້ ຳ

Neil Renicker, ນັກອອກແບບແລະນັກພັດທະນາ

CSS pseudo-elements :: ກ່ອນ ແລະ :: ຫລັງຈາກ ພ້ອມກັບການປ່ຽນຜ່ານ CSS, ສາມາດເຮັດໃຫ້ພາບເຄື່ອນໄຫວທີ່ ໜ້າ ຍິນດີເຊິ່ງໃຫ້ ຄຳ ຕິຊົມທີ່ບໍ່ດີຕໍ່ຜູ້ໃຊ້ຫນູ. ຕົວຢ່າງ, ສ້າງລູກສອນ CSS ພາຍໃນ pseudo-element, ນຳ ໃຊ້ການປ່ຽນໄປສູ່ pseudo-element (ການຫັນປ່ຽນ: ທຸກຄວາມງ່າຍໃນການອອກ .15s;), ແລະຫຼັງຈາກນັ້ນຕື່ມການປ່ຽນແປງຮູບແບບງ່າຍໆໃສ່ : hover pseudo-class (ເຊັ່ນ: ການແກ້ໄຂ ຂອບໃບ). ເບິ່ງການສາທິດ.

22. ກະກຽມ ສຳ ລັບ 'will-animate'

Paul Lewis, ສະມາຊິກທີມງານການພົວພັນດ້ານການພັດທະນາຂອງ Chrome

ຖ້າທ່ານເຄີຍໃຊ້ -webkit-transform: translateZ (0) ເພື່ອເຮັດໃຫ້ຫນ້າເວັບຂອງທ່ານໄວຂຶ້ນ, ການ hack, ເຊິ່ງໃນຫລາຍໆຕົວທ່ອງເວັບພຽງແຕ່ສ້າງຊັ້ນປະສົມ ໃໝ່, ກຳ ລັງຖືກທົດແທນໂດຍ ຈະ - ສັດ. ໃນໄວໆນີ້, ທ່ານຈະສາມາດບອກໂປແກຼມທ່ອງເວັບໃນສິ່ງທີ່ທ່ານວາງແຜນທີ່ຈະປ່ຽນແປງກ່ຽວກັບອົງປະກອບໃດ ໜຶ່ງ (ຕຳ ແໜ່ງ, ຂະ ໜາດ, ເນື້ອຫາຫຼື ຕຳ ແໜ່ງ ເລື່ອນ) ແລະຕົວທ່ອງເວັບຈະ ນຳ ໃຊ້ການເພີ່ມປະສິດທິພາບທີ່ ເໝາະ ສົມພາຍໃຕ້ ໜ້າ ຕາ. ຂໍ້ມູນເພີ່ມເຕີມ.

23. ຂົງເຂດປ້ອນຂໍ້ມູນຂອງມະນຸດ

Yaron Schoen, ຜູ້ກໍ່ຕັ້ງ Made For Humans

ການເພີ່ມພາບເຄື່ອນໄຫວຢ່າງລວດໄວໃຫ້ກັບອົງປະກອບທີ່ຜູ້ໃຊ້ພົວພັນກັບເຮັດໃຫ້ອິນເຕີເຟດຮູ້ສຶກວ່າມີຄອມພິວເຕີ້ ໜ້ອຍ ລົງ. ກັບຊ່ອງຂໍ້ມູນການປ້ອນຂໍ້ມູນ, ລອງວາງ ໂທປ່ຽນ ພາຍໃນ, ດັ່ງນັ້ນທຸກຄັ້ງທີ່ທ່ານສຸມໃສ່ຫລືບໍ່ສຸມໃສ່ມັນ, ມີການຫັນປ່ຽນທີ່ດີ.

ວັດສະດຸປ້ອນ, textarea {-moz-transition: 0.2s ທັງ ໝົດ ງ່າຍຂື້ນ; -o-transition: ທັງ ໝົດ 0.2s ງ່າຍຕໍ່ການອອກ; -webkit-transition: ທັງ ໝົດ 0.2s ງ່າຍຂື້ນ; -ms-transition: ທັງ ໝົດ 0.2s ງ່າຍຂື້ນ; ການຫັນປ່ຽນ: ທັງ ໝົດ 0.2s ອອກງ່າຍ;

24. ຢຸດແລະຫຼີ້ນພາບເຄື່ອນໄຫວ CSS

Val Head, ນັກອອກແບບແລະທີ່ປຶກສາ

ທ່ານສາມາດ 'ພັກໄວ້' ແລະ 'ຫລິ້ນ' ຮູບແບບເຄື່ອນໄຫວ CSS ໂດຍການປ່ຽນແປງຂອງມັນ animation-play-state ຄຸນ​ສົມ​ບັດ. ການຕັ້ງຄ່າໃຫ້ 'ຢຸດຊົ່ວຄາວ' ຢຸດການເຄື່ອນໄຫວຂອງທ່ານຢູ່ບ່ອນນັ້ນຈົນກວ່າທ່ານຈະປ່ຽນ animation-play-state ເຖິງ ແລ່ນ, ຕົວຢ່າງກ່ຽວກັບ hover.

.animating_thing {ພາບເຄື່ອນໄຫວ: spin 10s linear infinite; animation-play-state: ຢຸດຊົ່ວຄາວ; }. animating_thing: hover {animation-play-state: ແລ່ນ; }

25. ຢ່າໃຊ້ຕົວແປ CSS

Dave Shea, ນັກອອກແບບແລະນັກຂຽນ

ໃນທີ່ສຸດພວກເຮົາໄດ້ຮັບຕົວແປ CSS, ຕົວຢ່າງເພື່ອຂຽນຄ່າ hex ຂອງ colour ຄັ້ງ ໜຶ່ງ ແລະອ້າງອີງມັນຜ່ານແບບແຜນ. ແຕ່ຂໍ້ ກຳ ນົດຢ່າງເປັນທາງການແມ່ນ verbose, ເພີ່ມຄວາມສັບສົນແບບ syntactic, ສະ ເໜີ ການ ທຳ ງານທີ່ບໍ່ມີປະໂຫຍດ, ແລະສ່ວນໃຫຍ່ບໍ່ໄດ້ຮັບການສະ ໜັບ ສະ ໜູນ ຈາກຕົວທ່ອງເວັບສ່ວນໃຫຍ່. ໃນຍຸກທີ່ Sass ກຳ ລັງໄດ້ຮັບຄວາມນິຍົມຢ່າງກວ້າງຂວາງແລະນອກ ເໜືອ ຈາກຕົວແປທີ່ມີເຫດຜົນດ້ານການຂຽນໂປແກຼມທີ່ມີປະສິດຕິພາບເຊັ່ນ: ໜ້າ ທີ່ທີ່ ກຳ ຫນົດເອງແລະຖ້າ / ຖ້າມີການກ່າວເຖິງອື່ນໆ

ຫວັງເປັນຢ່າງຍິ່ງວ່າ ຄຳ ແນະ ນຳ ສຸດຍອດເຫລົ່ານີ້ໄດ້ສ້າງມຸມມອງ ໃໝ່ ຂອງທ່ານກ່ຽວກັບ CSS ແລະຄວາມເປັນໄປໄດ້ທີ່ມັນເປັນຕົວແທນໃນການພັດທະນາແລະອອກແບບເວັບ ຢ່າລືມທົດສອບເຕັກນິກເຫຼົ່ານີ້ຢ່າງລະອຽດເພື່ອກວດສອບການສະ ໜັບ ສະ ໜູນ ຂອງໂປແກຼມທ່ອງເວັບກ່ອນທີ່ຈະເຮັດວຽກໃດໆ.

ຄຳ ເວົ້າ: Craig Grannell ພາບປະກອບ: Mike Chipperfield

ບົດຂຽນນີ້ມີຢູ່ໃນວາລະສານສຸດທິສະບັບທີ 253.

ບົດຂຽນທີ່ຜ່ານມາ

The Coke ໃໝ່ ທີ່ສາມາດບອກໄດ້ວ່າມັນເຢັນສໍ່າໃດ
ມາດຕາຕໍ່ໄປ

ຜູ້ຄົ້ນຫາທີ່ ສຳ ຄັນທີ່ດີທີ່ສຸດ ສຳ ລັບ Microsoft Office 2016
ພວກເຮົາແນະນໍາ
ອາທິດນີ້ໃນ GIFs: ໜຶ່ງ ທີ່ມີອົງການອອກແບບຊັ້ນ ນຳ
ອ່ານ​ຕື່ມ

ອາທິດນີ້ໃນ GIFs: ໜຶ່ງ ທີ່ມີອົງການອອກແບບຊັ້ນ ນຳ

ເດືອນພຶດສະພາ 2024
ດ້ວຍຕາຕະລາງການຄ່ອຍມີເວລາດັ່ງກ່າວເພື່ອຮັກສາ, ທ່ານອາດຈະບໍ່ມີໂອກາດທີ່ຈະເຂົ້າເບິ່ງຂ່າວກ່ຽວກັບການອອກແບບທີ່ໃຫຍ່ທີ່ສຸດໃນອາທິດນີ້. ໂຊກດີ ສຳ ລັບທ່ານ, ພວກເຮົາໄດ້ຮວບຮວມພວກມັນໄວ້ໃນລາຍການນ້ອຍໆທີ່ມີປະໂຫຍດນີ້ເຊິ່ງຈະ...
ໄປຈັບມືກັບການຄ້າ Google
ອ່ານ​ຕື່ມ

ໄປຈັບມືກັບການຄ້າ Google

ເດືອນພຶດສະພາ 2024
ບົດຂຽນນີ້ປາກົດເປັນຄັ້ງ ທຳ ອິດໃນສະບັບທີ 237 ຂອງວາລະສານ .net - ວາລະສານທີ່ຂາຍດີທີ່ສຸດໃນໂລກ ສຳ ລັບນັກອອກແບບແລະນັກພັດທະນາເວັບ.ບໍ່ດົນມານີ້, Google ໄດ້ຍົກເລີກບໍລິການຄົ້ນຫາຜະລິດຕະພັນ Google ຂອງຕົນຢູ່ອັງກິດແລະ...
ວິທີການອິດສະຫຼະໃນເວລາທີ່ທ່ານມີລູກ
ອ່ານ​ຕື່ມ

ວິທີການອິດສະຫຼະໃນເວລາທີ່ທ່ານມີລູກ

ເດືອນພຶດສະພາ 2024
ບັງເອີນດ້ວຍຄວາມກະຕືລືລົ້ນກ່ຽວກັບເຄື່ອງຫຼິ້ນກິດຈະ ກຳ ດົນຕີຂອງລາວໃຫ້ກັບສຽງຊ້ ຳ ຊ້ ຳ ຂອງ 'Baa Baa Black heep', ອາຍຸ 8 ເດືອນຂອງຂ້ອຍແມ່ນດູດຊືມເຂົ້າໄປໃນໂລກນ້ອຍໆຂອງລາວ, ຫຼີ້ນຢ່າງມ່ວນຊື່ນພຽງບໍ່ເທົ່າໃດ...