ປະເພດເວັບໄຊຕ໌ Texturise ກັບ CSS

ເນື້ອຫາ

• ຂັ້ນຕອນທີ 1: ການຕັ້ງຄ່າດ້ວຍ HTML ແລະ CSS
• ຂັ້ນຕອນທີ 2: ເພີ່ມໂຄງສ້າງຜ່ານ ໜ້າ ກາກ - ຮູບພາບ
• ຂັ້ນຕອນທີ 3: ເຮັດໃຫ້ມັນສະເທືອນກັບ CSS3
• ຂັ້ນຕອນທີ 4: ເຮັດໃຫ້ສາມາດປັບຂະ ໜາດ ໄດ້ຜ່ານ FitText

• ຄວາມຮູ້ທີ່ ຈຳ ເປັນ: CSS ພື້ນຖານແລະ HTML
• ຕ້ອງການ: ບັນນາທິການຕົວ ໜັງ ສືແລະ WebKit Browser (Chrome ຫລື Safari)
• ເວລາຂອງໂຄງການ: 30 ນາທີ
• ດາວໂຫລດໄຟລ໌ແຫຼ່ງ

ບົດຂຽນນີ້ປາກົດເປັນຄັ້ງ ທຳ ອິດໃນສະບັບທີ 221 ຂອງວາລະສານ .net - ວາລະສານທີ່ຂາຍດີທີ່ສຸດໃນໂລກ ສຳ ລັບນັກອອກແບບແລະນັກພັດທະນາເວັບ.

ຂໍຂອບໃຈກັບການຍອມຮັບທີ່ເພີ່ມຂື້ນຂອງ WOFF ແລະການບໍລິການຕ່າງໆເຊັ່ນ Typekit, Fontdeck, Font Squirrel, ແລະ Fontspring, ຕົວອັກສອນເວັບແມ່ນຢູ່ທົ່ວທຸກແຫ່ງ. ໃນປັດຈຸບັນຜູ້ອອກແບບເວັບສາມາດເຂົ້າເຖິງຕົວເລືອກຫລາຍປະເພດ, ພວກເຂົາຕ້ອງການຄວບຄຸມລະດັບແບບດຽວກັນກັບແບບອັກສອນທີ່ນັກອອກແບບພິມມີ. ໃນຂະນະທີ່ຫຼາຍສິ່ງທີ່ສາມາດບັນລຸໄດ້ດ້ວຍຕົວອັກສອນທີ່ປອດໄພຕໍ່ເວບໄຊທ໌ແລະຄຸນລັກສະນະ CSS ຫຼັກໆເຊັ່ນ: ນໍ້າ ໜັກ ຕົວອັກສອນຫຼືຕົວອັກສອນຕົວອັກສອນ, ປັດຈຸບັນຄຸນລັກສະນະ CSS3 ຫຼາຍສາມາດຖືກ ນຳ ໃຊ້ເພື່ອໃຫ້ມີການຄວບຄຸມຫຼາຍກວ່າເກົ່າ ຕົວທ່ອງເວັບຂອງ WebKit ມີຄຸນສົມບັດທີ່ຮູ້ຈັກ ໜ້ອຍ ແຕ່ເປັນສິ່ງທີ່ດີເລີດເຊິ່ງສາມາດ ນຳ ໃຊ້ກັບຕົວ ໜັງ ສືທີ່ເອີ້ນວ່າ mask-image.

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

ໃນບົດແນະ ນຳ ນີ້ພວກເຮົາຈະຍ່າງຜ່ານປະເພດການສ້າງໂຄງສ້າງຕັ້ງແຕ່ເລີ່ມຕົ້ນໂດຍເລີ່ມຕົ້ນດ້ວຍ HTML ແລະ CSS ຂັ້ນພື້ນຖານ, ຈາກນັ້ນສ້າງໂຄງສ້າງທີ່ມີຄວາມໂປ່ງໃສໃນ Photoshop ແລະປະຕິບັດມັນໃນບາງຫົວຂໍ້ຂ່າວພາຍໃນ ໜ້າ ເວັບ. ພວກເຮົາຈະຈົບລົງໂດຍການເພີ່ມບາງ CSS ພິເສດແລະຄວາມຮັກຂອງ JavaScript.

ການອອກແບບ ສຳ ລັບ ໜ້າ ນີ້ໄດ້ຮັບແຮງບັນດານໃຈຈາກສີແລະປະເພດທີ່ພົບໃນລົດກ້າມຊີ້ນຂອງອາເມລິກາປີ 1970, ໂດຍສະເພາະລົດ Boss 302 Mustang.

ຂັ້ນຕອນທີ 1: ການຕັ້ງຄ່າດ້ວຍ HTML ແລະ CSS

ເລີ່ມຕົ້ນໂດຍການຕັ້ງ ໜ້າ index.html ທີ່ງ່າຍດາຍທີ່ສຸດໂດຍມີເຄື່ອງ ໝາຍ ຕໍ່ໄປນີ້:

1. ! DOCTYPE html>
2. html lang = "en">
3. ຫົວ>
4. ສາຍຕາ meta = "utf-8" />
5. title> Netmag / Mask-Image / title>
6. link rel = "stylesheet" href = "style.css" ປະເພດ = "text / css" />
7. ! - [ຖ້າ IE]> script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> / script>! [endif] ->
8. / ຫົວ>
9. ຮ່າງກາຍ>
10. header>
11. h1> Netmag / h1>
12. / header>
13. / ຮ່າງກາຍ>
14. / html>

ຈາກບ່ອນນັ້ນ, ພວກເຮົາຈະເລີ່ມເພີ່ມຮູບແບບແລະຮູບແບບພື້ນຖານຜ່ານທາງ style.css ແບບແຜນທີ່ພວກເຮົາ ກຳ ລັງໂຫລດ:

1. ຮ່າງກາຍ {
2. ພື້ນຫລັງສີ: # d8411f;
3. ສີ: # 222;
4. font: 2em / 1 sans-serif;
5. text-align: ສູນກາງ;
6. }
7. header {
8. ຂອບ: ອັດຕະໂນມັດ 15%;
9. ຄວາມກວ້າງ: 700px;
10. }

ຕອນນີ້ພວກເຮົາ ກຳ ລັງນັ່ງສວຍກັບຂໍ້ຄວາມສີຂີ້ເຖົ່າ (# 222) ທີ່ມີພື້ນສີສົ້ມ. ໃນກໍລະນີນີ້, ພຽງແຕ່ຕົວອັກສອນໃດໆຂອງ sans-serif ຈະບໍ່ຖືກຕັດມັນ, ດັ່ງນັ້ນພວກເຮົາຈະໂຫລດຢູ່ໃນ League Gothic, ມາລະຍາດຂອງ theleagueofmoveabletype.com. ນີ້ແມ່ນການປັບປຸງ CSS ສຳ ລັບຮ່າງກາຍ, h1, ແລະ Font Squirrel ທີ່ຜະລິດ @ font-face:

1. / * ສ້າງຂື້ນໂດຍ Font Squirrel (http://www.fontsquirrel.com) ໃນວັນທີ 5 ເດືອນກໍລະກົດ, 2011 * /
2. @ font-face {
3. font-family: 'LeagueGothicRegular';
4. src: url ('/ fonts / league_gothic-webfont.eot');
5. src: url ('/ fonts / league_gothic-webfont.eot? #iefix') ຮູບແບບ ('ຝັງ-opentype'),
6. url ('/ fonts / league_gothic-webfont.woff') ຮູບແບບ ('woff'),
7. url ('/ fonts / league_gothic-webfont.ttf') ຮູບແບບ ('truetype'),
8. url ('/ fonts / league_gothic-webfont.svg # LeagueGothicRegular') ຮູບແບບ ('svg');
9. font-weight: ປົກກະຕິ;
10. font-style: ປົກກະຕິ;
11. }
12. ຮ່າງກາຍ {
13. ພື້ນຫລັງສີ: # d8411f;
14. ສີ: # 222;
15. ຕົວອັກສອນ: 2em / 1 'LeagueGothicRegular', sans-serif;
16. text-align: ສູນກາງ;
17. }
18. h1 {
19. ຊາຍແດນ: .12em ແຂງ # 222;
20. font-size: 8em;
21. ເສັ້ນ - ສູງ: 1;
22. ແຜ່ນຮອງ: .08em .08em 0;
23. ຕົວ ໜັງ ສືຕົວປ່ຽນ: uppercase;
24. }

ຂັ້ນຕອນທີ 2: ເພີ່ມໂຄງສ້າງຜ່ານ ໜ້າ ກາກ - ຮູບພາບ

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

ລອງເບິ່ງສາມຊັ້ນທີ່ພົບໃນ knockout.psd. ນີ້ແມ່ນແຕ່ລະບາດກ້າວ ສຳ ລັບສິ່ງທີ່ຂ້ອຍໄດ້ເຮັດຈາກຊັ້ນລຸ່ມ:

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

ຕໍ່ໄປ, ຂ້າພະເຈົ້າໄດ້ເຮັດຊ້ ຳ ໂຄງສ້າງ - knockout ກ່ອນ layer ແລະປ່ຽນຊື່ ໃໝ່ ໂຄງສ້າງ - ໃຊ້. ໃນ palette ຮູບແບບຊັ້ນຂອງ Photoshop, ຂ້ອຍໄດ້ຕັ້ງຄ່າຄວາມສາມາດຕື່ມຂໍ້ມູນໃສ່ 0% ແລະ Knockout ການ ເລິກ ເພື່ອໃຫ້ມີຄວາມໂປ່ງໃສ.

ເມື່ອສົ່ງອອກ / ປະຢັດ ສຳ ລັບເວັບ, ໃຫ້ແນ່ໃຈວ່າທ່ານຈະສົ່ງຮູບພາບຂອງທ່ານເປັນ PNG-24 ພ້ອມກັບກ່ອງກວດກາຄວາມໂປ່ງໃສ.

Whew! ກັບໄປທີ່ລະຫັດ. ສ່ວນນີ້ແມ່ນງ່າຍດາຍຢ່າງມະຫັດສະຈັນ - ພຽງແຕ່ຂະຫຍາຍລະຫັດ ສຳ ລັບ h1 ເພື່ອລວມເອົາລະຫັດຮູບ ໜ້າ ກາກ:

1. h1 {
2. ຊາຍແດນ: .12em ແຂງ # 222;
3. font-size: 8em;
4. ເສັ້ນ - ສູງ: 1;
5. ແຜ່ນຮອງ: .08em .08em 0;
6. ຕົວ ໜັງ ສືຕົວປ່ຽນ: uppercase;
7. -webkit-mask-image: url (/img/knockout.png);
8. -o-mask-image: url (/img/knockout.png);
9. -moz-mask-image: url (/img/knockout.png);
10. -ms-mask-image: url (/img/knockout.png);
11. mask-image: url (/img/knockout.png);
12. }

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

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

ຂັ້ນຕອນທີ 3: ເຮັດໃຫ້ມັນສະເທືອນກັບ CSS3

CSS Transforms ກຳ ລັງໄດ້ຮັບການສະ ໜັບ ສະ ໜູນ ຢ່າງໄວວາໃນບັນດາໂປຣແກຣມທ່ອງເວັບຕ່າງໆທີ່ປະກອບມີ IE9 +, Safari 5, Firefox 4, Opera 11.1 ແລະ Google Chrome, ສະນັ້ນໃຫ້ພວກເຂົາ ນຳ ໃຊ້ໃນທີ່ນີ້:

1. h1 {
2. ຊາຍແດນ: .12em ແຂງ # 222;
3. font-size: 8em;
4. ເສັ້ນ - ສູງ: 1;
5. ແຜ່ນຮອງ: .08em .08em 0;
6. ຕົວ ໜັງ ສືຕົວປ່ຽນ: uppercase;
7. -webkit-mask-image: url (/img/knockout.png);
8. -o-mask-image: url (/img/knockout.png);
9. -moz-mask-image: url (/img/knockout.png);
10. -ms-mask-image: url (/img/knockout.png);
11. mask-image: url (/img/knockout.png);
12. -webkit-transform: skewY (-7deg);
13. -o-transform: skewY (-7deg);
14. -moz-transform: skewY (-7deg);
15. -ms-transform: skewY (-7deg);
16. ການປ່ຽນແປງ: skewY (-7deg);
17. }

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

ຂັ້ນຕອນທີ 4: ເຮັດໃຫ້ສາມາດປັບຂະ ໜາດ ໄດ້ຜ່ານ FitText

ໃນຂະນະທີ່ອອກແບບ blog ໃໝ່ ໃນລະດູໃບໄມ້ປົ່ງເມື່ອປີກາຍນີ້, ຂ້າພະເຈົ້າໄດ້ປິດຖະ ໜົນ ຫົນທາງທີ່ ສຳ ຄັນເມື່ອຂ້າພະເຈົ້າຮູ້ວ່າມັນຍາກທີ່ຈະຂະຫຍາຍຫົວຂໍ້ທີ່ມີຮູບແບບຂະ ໜາດ ໃຫຍ່ທີ່ຂ້າພະເຈົ້າບໍ່ຕ້ອງການໃຫ້ຂໍ້ຄວາມຫໍ່. ຂ້ອຍຕ້ອງການວິທີການທີ່ຈະສາມາດບັນລຸຫົວຂໍ້ທີ່ສາມາດປັບຂະ ໜາດ ໄດ້ເຊິ່ງຕື່ມຄວາມກວ້າງຂອງສ່ວນປະກອບຂອງພໍ່ແມ່. ໂຊກດີ, ເພື່ອນຮ່ວມງານ Paravel ຂອງຂ້ອຍ, Dave Rupert, ໄດ້ຕອບສະ ໜອງ ຕໍ່ສິ່ງທ້າທາຍໂດຍການສ້າງ FitText.

ໃຫ້ທົດລອງໃຊ້ກັບການອອກແບບນີ້, ແລະເຮັດໃຫ້ມັນສາມາດປັບຂະ ໜາດ ໄດ້ຢ່າງສົມບູນຈາກມຸມມອງ ໜ້າ ຈໍເຕັມຮູບແບບລົງສູ່ອຸປະກອນມືຖື.

ເພື່ອເລີ່ມຕົ້ນ, ໃຫ້ປັບຄວາມກວ້າງຂອງສ່ວນຫົວຂອງພວກເຮົາໃນ CSS:

1. header {
2. ຂອບ: ອັດຕະໂນມັດ 20%;
3. ຄວາມກວ້າງ: 80%;
4. }

ດຽວນີ້ຄວາມກວ້າງຈະເປັນ 80 ເປີເຊັນຂອງ ໜ້າ ຈໍ browser, ໃຫ້ໂຫລດ jQuery ແລະ FitText ຕາມ ລຳ ດັບນັ້ນ index.html:

1. ຮ່າງກາຍ>
2. header>
3. h1> Netmag / h1>
4. / header>
5. script src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> / script>
6. script src = "js / jquery.fittext.js"> / ສະຄິບ>
7. / ຮ່າງກາຍ>

FitText ຕ້ອງການໃຫ້ພວກເຮົາ ກຳ ນົດການບີບອັດ. ຕົວເລກທີ່ໃຫຍ່ກວ່າ, ການບີບອັດທີ່ທ່ານໄດ້ຮັບກັບຂະ ໜາດ ຂອງຕົວອັກສອນ. ນີ້ແມ່ນ HTML ສຸດທ້າຍທີ່ມີທຸກໂປແກຼມ FitText JavaScript ມາຈາກສາຍ 14-18:

1. ! DOCTYPE html>
2. html lang = "en">
3. ຫົວ>
4. ສາຍຕາ meta = "utf-8" />
5. title> Netmag / Mask-Image / title>
6. link rel = "stylesheet" href = "style.css" ປະເພດ = "text / css" />
7. ! - [ຖ້າ IE]> script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> / script>! [endif] ->
8. / ຫົວ>
9. ຮ່າງກາຍ>
10. header>
11. h1> Netmag / h1>
12. / header>
13. script src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> / script>
14. script src = "js / jquery.fittext.js"> / ສະຄິບ>
15. ປະເພດ script = "text / javascript">
16. $ ("h1"). fitText (.24);
17. / script>
18. / ຮ່າງກາຍ>
19. / html>

ມັນ ໜ້າ ຕື່ນເຕັ້ນຫຼາຍທີ່ພວກເຮົາສາມາດເຮັດທຸກວິທີທາງທີ່ພວກເຮົາຕ້ອງການທີ່ຈະພິມແລະເຮັດໃຫ້ມັນສາມາດປັບຂະ ໜາດ ໄດ້, ຖືກສ້າງຂຶ້ນບົນພື້ນຖານທີ່ມີຄວາມຍືດຫຍຸ່ນ!