ຮຽນຮູ້ວິທີການສ້າງ Caps Initial Fancy ໂດຍໃຊ້ CSS ແລະຮູບພາບຕ່າງໆ
ຮຽນຮູ້ວິທີການນໍາໃຊ້ CSS ເພື່ອສ້າງ ເມລ ຕົ້ນສະບັບ fancy ສໍາລັບວັກຂອງທ່ານ. ມີແມ້ກະທັ້ງເທກນິກການປ່ຽນຮູບພາບທີ່ງ່າຍດາຍທີ່ຈະໃຊ້ຮູບພາບກາຟິກສໍາລັບຝາເບື້ອງຕົ້ນຂອງທ່ານ.
Styles ພື້ນຖານຂອງ Caps ເບື້ອງຕົ້ນ
ມີສາມຮູບແບບຂັ້ນພື້ນຖານຂອງຫມວກຕົ້ນສະບັບໃນເອກະສານ:
- ຍົກຂຶ້ນມາ - ທີ່ພົບເຫັນຫຼາຍທີ່ສຸດ, ບ່ອນທີ່ຈົດຫມາຍທໍາອິດແມ່ນຂະຫນາດໃຫຍ່ແລະຢູ່ໃນເສັ້ນດຽວກັນກັບຂໍ້ຄວາມປະຈຸບັນ.
- ຫຼຸດລົງ - ທີ່ພົບທົ່ວໄປທົ່ວໄປ, ບ່ອນທີ່ຈົດຫມາຍທໍາອິດແມ່ນຂະຫນາດໃຫຍ່ແລະຫຼຸດລົງຢູ່ລຸ່ມເສັ້ນທໍາອິດຂອງຂໍ້ຄວາມ. ຂໍ້ຄວາມດັ່ງຕໍ່ໄປນີ້ຫຼັງຈາກນັ້ນ floats ປະມານມັນ.
- ຢູ່ຕິດກັນ - ບ່ອນທີ່ຈົດຫມາຍທໍາອິດຢູ່ໃນຄໍລໍາຫນຶ່ງຂ້າງສ່ວນທີ່ເຫຼືອຂອງຂໍ້ຄວາມ. ນີ້ແມ່ນຫຼາຍໃນການພິມຫຼາຍກ່ວາການອອກແບບເວັບໄຊຕ໌.
ຫມວກຕົ້ນສະບັບຫຼືເມັດທີ່ຫຼຸດລົງແມ່ນມີຄວາມຄຸ້ນເຄີຍຫຼາຍ. ພວກເຂົາເປັນວິທີທີ່ດີທີ່ຈະແຕ່ງຕົວໃນໄລຍະຍາວແລະຫນ້າເບື່ອຂອງຂໍ້ຄວາມ. ແລະມີຄຸນສົມບັດ CSS: ທໍາອິດຈົດຫມາຍ, ທ່ານສາມາດກໍານົດໄດ້ງ່າຍໆວິທີການເຮັດໃຫ້ຕົວອັກສອນທໍາອິດຂອງທ່ານ fancier.
ສ້າງຄວາມສາມາດໃນການເລີ່ມຕົ້ນແບບງ່າຍດາຍ
ທັງຫມົດທີ່ທ່ານຈໍາເປັນຕ້ອງເຮັດເພື່ອສ້າງເຄິ່ງທໍາອິດທີ່ຍົກຂຶ້ນມາແມ່ນເພື່ອເຮັດໃຫ້ຕົວອັກສອນທໍາອິດຂອງວັກຂອງທ່ານຂະຫນາດໃຫຍ່ມີຂະຫນາດທີ່ມີຕົວເລກ pseudo-element ຕົວທໍາອິດ:
p: first-letter {font-size: 3em; }ແຕ່ ຕົວທ່ອງເວັບ ຫຼາຍຄົນເຫັນວ່າຕົວອັກສອນທໍາອິດແມ່ນໃຫຍ່ກວ່າສ່ວນທີ່ເຫຼືອຂອງຂໍ້ຄວາມຢູ່ໃນເສັ້ນນັ້ນ, ດັ່ງນັ້ນພວກເຂົາເຮັດໃຫ້ການນໍາພາເທົ່າກັບສິ່ງທີ່ຈະເຮັດໃຫ້ມີຄວາມຫມາຍສໍາລັບຈົດຫມາຍທໍາອິດນັ້ນ, ບໍ່ແມ່ນສ່ວນທີ່ເຫຼືອຂອງເສັ້ນ. ໂຊກດີນີ້, ນີ້ແມ່ນງ່າຍທີ່ຈະແກ້ໄຂດ້ວຍອົງປະກອບ pseudo-element ທໍາອິດແລະຄຸນສົມບັດເສັ້ນ - ຄວາມສູງ:
p: first-letter {font-size: 3em; } p: first-line {line-height: 1em; }ຫຼິ້ນກັບຄວາມສູງເສັ້ນໃນເອກະສານຂອງທ່ານຈົນກວ່າທ່ານຈະຊອກຫາຂະຫນາດທີ່ຖືກຕ້ອງສໍາລັບຂໍ້ຄວາມຂອງທ່ານ.
ຫຼິ້ນກັບຫລວງທໍາອິດຂອງທ່ານ
ເມື່ອທ່ານເຂົ້າໃຈວິທີການສ້າງຝາເບື້ອງຕົ້ນ, ທ່ານສາມາດແຕ່ງຢູ່ໃນເຄື່ອງນຸ່ງຫົ່ມທີ່ສວຍງາມເພື່ອເຮັດໃຫ້ມັນໂດດເດັ່ນ. ຫຼິ້ນກັບສີ, ສີພື້ນຫລັງ, ຂອບ, ຫຼືໃດກໍ່ຕາມ strikes fancy ຂອງທ່ານ. ແບບງ່າຍດາຍທີ່ເປັນທໍາແມ່ນການປ່ຽນສີຂອງຕົວອັກສອນແລະສີພື້ນຫລັງສໍາລັບຈົດຫມາຍທໍາອິດ:
p: ຈົດຫມາຍທໍາອິດ {font-size: 300%; ພື້ນຫລັງສີ: # 000; color: #fff } p: first-line {line-height: 100%; }ອີກເທື່ອຫນຶ່ງ trick ແມ່ນການສູນກາງເສັ້ນທໍາອິດ. ນີ້ສາມາດ tricky ມີ CSS, ເປັນກາງຂອງເສັ້ນຂໍ້ຄວາມອາດຈະແຕກຕ່າງກັນຖ້າຫາກວ່າຮູບແບບຂອງທ່ານແມ່ນມີຄວາມຍືດຫຍຸ່ນ. ແຕ່ກັບບາງຄົນມັກຫຼີ້ນກັບຄ່າຕ່າງໆ, ທ່ານສາມາດດັດແປງເສັ້ນທໍາອິດຂອງທ່ານພຽງພໍເພື່ອໃຫ້ຕົວອັກສອນທໍາອິດປາກົດຢູ່ກາງ. ພຽງແຕ່ຫລິ້ນກັບອັດຕາສ່ວນໃນ text-indent ຂອງວັກຈົນກ່ວາມັນເບິ່ງຄືວ່າ:
p: ຈົດຫມາຍທໍາອິດ {font-size: 300%; ພື້ນຫລັງສີ: # 000; color: #fff } p: first-line {line-height: 100%; } p {text-indent: 45% }Caps ເບື້ອງຊ້າຍຢູ່ໃກ້ຄຽງຍາກກັບ CSS
ຫມວກເລີ່ມຕົ້ນໃກ້ຄຽງສາມາດມີຄວາມຫຍຸ້ງຍາກກັບ CSS ເນື່ອງຈາກວ່າຕົວທ່ອງເວັບທີ່ແຕກຕ່າງກັນສະແດງຕົວອັກສອນແຕກຕ່າງກັນ. ຄວາມຄິດທີ່ຢູ່ເບື້ອງຫລັງການສ້າງເຄິ່ງທີ່ຢູ່ໃກ້ກັນໃນ CSS ແມ່ນການນໍາໃຊ້ຄຸນສົມບັດທີ່ເຂົ້າເບິ່ງຂໍ້ຄວາມໃນເສັ້ນທໍາອິດເພື່ອຊຸກດັນໃຫ້ມັນອອກ (ເບື້ອງຊ້າຍ) ເປັນຄ່າລົບ. ທ່ານຍັງຈໍາເປັນຕ້ອງປ່ຽນຂອບຂອບດ້ານຊ້າຍຂອງວັກນັ້ນໂດຍຈໍານວນເງິນບາງ. ຫຼິ້ນກັບຕົວເລກເຫຼົ່ານີ້ຈົນກ່ວາວັກເບິ່ງຄືວ່າດີ.
p {text-indent: -2.5em margin-left: 3em; } p: first-letter {font-size: 3em; } p: first-line {line-height: 100%; }ໄດ້ຮັບ Caps ເບື້ອງຕົ້ນທີ່ສວຍງາມງາມ
ວິທີທີ່ດີທີ່ສຸດທີ່ຈະສ້າງເຄີ້ມຕົ້ນແບບທີ່ຫນ້າປະທັບໃຈແມ່ນການປ່ຽນແປງແບບອັກສອນໄປຫາຄອບຄົວຕົວແບບທີ່ຕົກແຕ່ງຫຼາຍກວ່າເກົ່າ. ຖ້າທ່ານໃຊ້ ຊຸດຂອງຕົວອັກສອນ ຕາມ ແບບອັກສອນ ທົ່ວໄປ , ມັນຈະຊ່ວຍຮັບປະກັນວ່າຫນ້າທໍາອິດຂອງທ່ານສະແດງໃຫ້ເຫັນໄດ້ດີເພື່ອໃຫ້ລູກຄ້າສາມາດເບິ່ງມັນ, ໂດຍບໍ່ມີບັນຫາເຂົ້າຫາແລະການນໍາໃຊ້.
p: first-letter {font-size: 3em; family-font: "Edwardian Script ITC", "Brush Script MT", cursive; } p: first-line {line-height: 100%; }ແລະ, ຕາມປົກກະຕິ, ທ່ານສາມາດເຮັດໃຫ້ຄໍາແນະນໍາທັງຫມົດເຫຼົ່ານີ້ຮ່ວມກັນເພື່ອສ້າງເຄິ່ງທໍາອິດທີ່ໂຄສະນາແບບໃຫ້ແກ່ວັກຂອງທ່ານ.
ການນໍາໃຊ້ກາຟິກໃນເບື້ອງຕົ້ນ
ຖ້າຫາກວ່າ, ຫຼັງຈາກທີ່ທັງຫມົດນັ້ນ, ທ່ານຍັງບໍ່ມັກວ່າຫມວກເລີ່ມຕົ້ນຂອງທ່ານເບິ່ງຢູ່ໃນຫນ້າ, ທ່ານສາມາດ resort ກັບຮູບພາບເພື່ອໃຫ້ໄດ້ຜົນທີ່ແນ່ນອນທີ່ທ່ານກໍາລັງຊອກຫາ. ແຕ່ກ່ອນທີ່ທ່ານຈະຕັດສິນໃຈທີ່ຈະຍ້າຍອອກໄປຫາຮູບພາບ, ທ່ານຄວນຈະຮູ້ເຖິງຂໍ້ບົກພ່ອງຂອງວິທີການນີ້:
- ລູກຄ້າທີ່ບໍ່ມີຮູບພາບຈະບໍ່ເຫັນຝາເບື້ອງຕົ້ນແລະອາດຈະບໍ່ເຫັນຂໍ້ຄວາມທີ່ເຊື່ອງໄວ້ທີ່ຮູບພາບຈະຖືກປ່ຽນແທນ. ນີ້ສາມາດເຮັດໃຫ້ຫຍໍ້ບໍ່ສາມາດເຂົ້າເຖິງໄດ້, ຫຼືຢູ່ທີ່ດີທີ່ສຸດທີ່ຍາກທີ່ຈະອ່ານ.
- ຮູບພາບສະເຫມີເພີ່ມເວລາດາວໂຫລດຂອງຫນ້າ. ຖ້າທ່ານມີຫຼາຍຫມວກເລີ່ມຕົ້ນ, ທ່ານສາມາດເພີ່ມເວລາດາວໂຫລດຢ່າງຫລວງຫລາຍສໍາລັບບາງສິ່ງບາງຢ່າງທີ່ຄົນເຮົາຈະຮູ້ສຶກບໍ່ສໍາຄັນ.
- ບາງຕົວທ່ອງເວັບຈະສະແດງທັງສອງຈົດຫມາຍທໍາອິດທີ່ເຊື່ອງໄວ້ແລະຮູບພາບ - ຊຶ່ງສາມາດເຮັດໃຫ້ຂໍ້ຄວາມຫຍໍ້ຫນ້າແປກ.
- ມັນຍາກຫຼາຍທີ່ຈະໃຊ້ຕົວເລືອກນີ້ໂດຍອັດຕະໂນມັດ, ຍ້ອນວ່າທ່ານຕ້ອງຮູ້ຢ່າງຊັດເຈນວ່າຈົດຫມາຍທໍາອິດແມ່ນເພື່ອໃຫ້ທ່ານໃຊ້ຮູບພາບທີ່ຖືກຕ້ອງ. ດັ່ງນັ້ນ, ທຸກຄັ້ງທີ່ຫຍໍ້ຫນ້າຖືກດັດແກ້, ທ່ານອາດຈະຕ້ອງສ້າງຮູບພາບໃຫມ່.
ຫນ້າທໍາອິດ, ທ່ານຈໍາເປັນຕ້ອງສ້າງຮູບພາບຂອງຈົດຫມາຍທໍາອິດ. ຂ້ອຍໃຊ້ Photoshop ເພື່ອສ້າງຈົດຫມາຍ L ທີ່ມີຕົວອັກສອນ "Edwardian Script ITC". ຂ້າພະເຈົ້າໄດ້ເຮັດໃຫ້ມັນຂະຫນາດໃຫຍ່ - 300 ຂະຫນາດ. ຫຼັງຈາກນັ້ນຂ້າພະເຈົ້າໄດ້ຕັດຮູບພາບລົງໄປຫາຕໍາ່ສຸດທີ່ເປົ່າປະມານຫນັງສືແລະສັງເກດເຫັນຄວາມກວ້າງແລະຄວາມສູງຂອງຮູບພາບ.
ຫຼັງຈາກນັ້ນ, ຂ້າພະເຈົ້າໄດ້ສ້າງຫ້ອງຮຽນ "capL" ສໍາລັບວັກຂອງຂ້າພະເຈົ້າ. ນີ້ແມ່ນບ່ອນທີ່ຂ້າພະເຈົ້າກໍານົດຮູບພາບທີ່ນໍາໃຊ້, ການນໍາ (ເສັ້ນ - ລະດັບຄວາມສູງ), ແລະອື່ນໆ.
ທ່ານຈໍາເປັນຕ້ອງໃຊ້ຄວາມກວ້າງແລະຄວາມສູງຂອງຮູບພາບເພື່ອກໍານົດຂໍ້ກໍານົດຂອງຕົວຫນັງສື, ແລະການປາດແຜ່ນເທິງ. ສໍາລັບຮູບພາບ L ຂອງຂ້າພະເຈົ້າ, ຂ້າພະເຈົ້າຈໍາເປັນຕ້ອງເຂົ້າໄປໃນ 95px ແລະ padding 72px.
pcapL {line-height: 1em background-image: url (capL.gif); ພື້ນຫລັງ - ເຮັດເລື້ມຄືນ: ບໍ່ມີການເຮັດເລື້ມຄືນ; text-indent: 95px padding-top: 72px }ແຕ່ວ່າບໍ່ແມ່ນທັງຫມົດ. ຖ້າທ່ານອອກຈາກມັນແລ້ວ, ຈົດຫມາຍທໍາອິດຈະຖືກຄັດລອກຢູ່ໃນວັກ - ທໍາອິດກັບຮູບພາບ, ຫຼັງຈາກນັ້ນຢູ່ໃນຂໍ້ຄວາມ. ດັ່ງນັ້ນ, ຂ້າພະເຈົ້າໄດ້ເພີ່ມປະມານອົງປະກອບທໍາອິດທີ່ມີຫ້ອງຮຽນ "ເບື້ອງຕົ້ນ" - ແລະບອກຕົວທ່ອງເວັບທີ່ຈະບໍ່ສະແດງຈົດຫມາຍດັ່ງກ່າວ:
spaninial {display: none }ແລະຮູບພາບຫຼັງຈາກນັ້ນສະແດງຢ່າງຖືກຕ້ອງ. ທ່ານສາມາດຫຼີ້ນກັບຂໍ້ຄວາມທີ່ເຂົ້າໃສ່ໃນວັກເພື່ອເອົາຂໍ້ຄວາມທີ່ຖືກຕ້ອງກັບຈົດຫມາຍ, ຢ່າງໃດກໍ່ຕາມທ່ານຢາກຈະສະແດງ.