Texturise tīmekļa tips ar CSS

Saturs

• 1. darbība: iestatīšana ar HTML un CSS
• 2. darbība: tekstūras pievienošana, izmantojot masku attēlu
• 3. darbība. Padariet to šķību ar CSS3
• 4. darbība: padariet to mērogojamu, izmantojot FitText

• Nepieciešamas zināšanas: Pamata CSS un HTML
• Nepieciešams: Teksta redaktors un WebKit pārlūks (Chrome vai Safari)
• Projekta laiks: 30 minūtes
• Lejupielādējiet avota failus

Šis raksts pirmo reizi parādījās žurnāla .net 221. numurā - pasaulē visvairāk pārdotajā tīmekļa dizaineru un izstrādātāju žurnālā.

Pateicoties arvien pieaugošajai WOFF un tādu pakalpojumu kā Typekit, Fontdeck, Font Squirrel un Fontspring pieņemšanai, tīmekļa fonti ir visur. Tagad, kad tīmekļa dizaineriem ir pieejama lielāka veida izvēle, viņi vēlas tādu pašu kontroli pār fontiem, kāds ir drukas dizaineriem. Kaut arī daudz var sasniegt ar tīmeklī drošiem fontiem un galvenajām CSS īpašībām, piemēram, fonta svaru vai atstarpēm starp burtiem, daudzas CSS3 īpašības tagad var izmantot, lai nodrošinātu vēl lielāku kontroli. WebKit pārlūkiem ir mazpazīstams, bet fantastisks īpašums, ko var piemērot tekstam, ko sauc maska-attēls.

Maska-attēls var izmantot, lai izspiestu nelielus virsraksta teksta tekstūras gabalus. Izmantojot šo paņēmienu ar rindkopu tekstu, tiktu nodarīts kaitējums lasāmībai, taču, lietojot to lielformāta displeja fontam, tas var radīt smalku interešu punktu. Lai gan tas pašlaik ir tikai WebKit seifa (Safari un Chrome) īpašums, tas tiek graciozi degradēts, vienkārši neatbalstošām pārlūkprogrammām nerādot nekādu faktūru.

Šajā apmācībā mēs iepazīsimies ar tekstu veidošanas veidu no sākuma - sākot ar pamata HTML un CSS, pēc tam izveidojot daļēji caurspīdīgu tekstūru Photoshop un ieviešot to kādā virsraksta tekstā tīmekļa lapā. Mēs to pabeigsim, pievienojot papildu CSS un JavaScript mīlestību.

Šīs lapas dizainu ir iedvesmojusi krāsa un tips, kas atrodams 20. gadsimta 70. gadu amerikāņu vieglajos automobiļos, it īpaši Boss 302 Mustang.

1. darbība: iestatīšana ar HTML un CSS

Sāksim ar ārkārtīgi vienkāršas index.html lapas izveidošanu ar šādu marķējumu:

1. ! DOCTYPE html>
2. html lang = "lv">
3. galva>
4. meta charset = "utf-8" />
5. nosaukums> Netmag / Mask-Image / title>
6. saite rel = "stilu lapa" href = "style.css" type = "text / css" />
7. ! - [ja IE]> skripts src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> / skripts>! [endif] ->
8. / galva>
9. ķermenis>
10. galvene>
11. h1> Netmag / h1>
12. / header>
13. / body>
14. / html>

Turpmāk mēs sāksim pievienot pamata stilu un izkārtojumu, izmantojot stils.css stila lapa, kuru mēs ielādējam:

1. ķermenis {
2. fona krāsa: # d8411f;
3. krāsa: # 222;
4. fonts: 2em / 1 sans-serif;
5. text-align: center;
6. }
7. header {
8. starpība: 15% automātiska;
9. platums: 700 pikseļi;
10. }

Tagad mēs sēžam diezgan ar tumši pelēku (# 222) tekstu uz oranža fona. Šajā gadījumā tikai jebkurš ol ’sans-serif fonts to negriezīs, tāpēc mēs ielādēsimies League Gothic, pateicoties vietnei theleagueofmoveabletype.com. Šeit ir atjauninātā CSS ķermenim h1 un Fontu vāveres ģenerētajam @ font-face:

1. / * Ģenerēja Font Squirrel (http://www.fontsquirrel.com) 2011. gada 5. jūlijā * /
2. @ font-face {
3. font-family: ’LeagueGothicRegular’;
4. src: url (’/ fonts / league_gothic-webfont.eot’);
5. src: url (’/ fonts / league_gothic-webfont.eot? #iefix’) formāts (’embedded-opentype’),
6. url (’/ fonts / league_gothic-webfont.woff’) formāts (’woff’),
7. url (’/ fonts / league_gothic-webfont.ttf’) formāts (’truetype’),
8. url (’/ fonts / league_gothic-webfont.svg # LeagueGothicRegular’) formāts (’svg’);
9. fonta svars: normāls;
10. fonta stils: normāls;
11. }
12. ķermenis {
13. fona krāsa: # d8411f;
14. krāsa: # 222;
15. fonts: 2em / 1 ’LeagueGothicRegular’, sans-serif;
16. text-align: center;
17. }
18. h1 {
19. apmale: .12em cieta # 222;
20. fonta lielums: 8em;
21. līnijas augstums: 1;
22. polsterējums: .08em .08em 0;
23. teksta pārveidošana: lielie burti;
24. }

2. darbība: tekstūras pievienošana, izmantojot masku attēlu

Sāksim ar Photoshop atvēršanu, lai izveidotu daļēji caurspīdīgu .png faktūru, lai maskētu tekstu. Ir svarīgi atcerēties, ka tad, kad attēls tiek maskēts, izmantojot CSS, teksts tiks izdzēsts vai izslēgts, ja vien tas ir caurspīdīgs. Tādā gadījumā mēs vēlamies, lai tekstūra būtu izsmalcināta, lai teksts būtu salasāms.

Apskatiet trīs atrastos slāņus nokauts.psd. Lūk, soli pa solim par to, ko es darīju no apakšas:

The Priekšvēsture slānis ir vienkārši oranžs pildījums. Es izmantoju Tekstūra - pirms nokautas slānis, lai pievienotu dažus grunge, dažus otas triecienus vienlaikus. Lai gan šis slānis eksportā netiek izmantots, tas ir iekļauts, lai palīdzētu izsekot progresēšanai.

Tālāk es dublēju Tekstūra - pirms nokautas slāni un pārdēvēja to Tekstūra - izmantota. Photoshop slāņa stilu paletē es iestatīju Fill Opacity 0% un Nokauts līdz Dziļi lai iegūtu pārredzamību.

Eksportējot / saglabājot tīmeklim, noteikti eksportējiet savu attēlu kā PNG-24, atzīmējot izvēles rūtiņu Pārredzamība.

Whee! Atpakaļ pie koda. Šī daļa ir maģiski vienkārša - vienkārši paplašiniet h1 kodu, lai iekļautu maskas attēla kodu:

1. h1 {
2. apmale: .12em cieta # 222;
3. fonta lielums: 8em;
4. līnijas augstums: 1;
5. polsterējums: .08em .08em 0;
6. teksta pārveidošana: lielie burti;
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. maska-attēls: url (/img/knockout.png);
12. }

Un presto! Šim plakanajam un garlaicīgajam tekstam lodziņā tagad ir tekstūra. Nekad nebaidieties, ja teksts aizņem vairāk vietas nekā eksportētais attēls, jo tas automātiski atkārtojas. Kā jau teicu iepriekš, tas darbojas tikai WebKit, bet es esmu pievienojis visus pārējos pārdevēja prefiksus ar lielām cerībām, ka īpašums ļoti drīz saņems piekrišanu.

Es teiktu, ka šodien ir lietderīgi izmantot šo īpašumu tādu, kāds tas ir klientu vietnēs, jo atkāpšanās ir pilnīgi pieņemama. Šajā konkrētajā gadījumā tas vienkārši tiktu atveidots kā melns teksts bez tekstūras. Nav kaitējuma, nav nediena. Lai arī cik tas ir saviļņojoši, es vēlētos lietas mainīt nevis vienu, bet gan divas
vairāk iecirtumi!

3. darbība. Padariet to šķību ar CSS3

CSS pārveidojumi ātri iegūst atbalstu pārlūkprogrammās, kurās ietilpst IE9 +, Safari 5, Firefox 4, Opera 11.1 un Google Chrome, tāpēc izmantosim tos šeit:

1. h1 {
2. apmale: .12em cieta # 222;
3. fonta lielums: 8em;
4. līnijas augstums: 1;
5. polsterējums: .08em .08em 0;
6. teksta pārveidošana: lielie burti;
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. maska-attēls: url (/img/knockout.png);
12. -webkit-pārveidot: šķībs (-7deg);
13. -o-transformācija: šķībs (-7deg);
14. -moz-pārveidot: šķībs (-7deg);
15. -ms-pārveidot: šķībs (-7deg);
16. pārveidot: šķībs (-7deg);
17. }

Voilà! Tas ir daudz stila, kas tiek izmantots bez jebkāda papildu HTML, un nav grūti iedomāties, kā vienu vai visas no šīm darbībām varētu izmantot, lai jūsu darbs šodien augtu. Tas ir, ja vien jums nav jāmaksā par adaptīva vai atsaucīga izkārtojuma izveidi. Kā visu šo pikseļu virzīto mīlestību var pārvērst plūstošā, elastīgā un / vai multivides pieprasītā izkārtojumā, nesadaloties?

4. darbība: padariet to mērogojamu, izmantojot FitText

Pārveidojot savu emuāru pagājušajā pavasarī, es nokļuvu pamatīgā šķērslī, kad sapratu, cik grūti būtu mērogot lielformāta virsrakstu nosaukumus tur, kur es negribēju, lai teksts ietītos. Man bija nepieciešams veids, kā sasniegt mērogojamus virsrakstus, kas aizpilda vecāku elementa platumu. Par laimi, mana Paravel grupa, Deivs Ruperts, atbildēja uz izaicinājumu, izveidojot FitText.

Pārbaudīsim ar šo dizainu un padarīsim to perfekti pielāgojamu no pilna platuma darbvirsmas skata līdz pat mobilajai ierīcei.

Lai sāktu, pielāgosim galvenes platumu CSS:

1. header {
2. starpība: 20% auto;
3. platums: 80%;
4. }

Tagad, kad mūsu pārlūkprogrammas loga platums būs 80 procenti, ielādēsim jQuery un FitText šādā secībā index.html:

1. ķermenis>
2. galvene>
3. h1> Netmag / h1>
4. / header>
5. skripts src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> / skripts>
6. skripts src = "js / jquery.fittext.js"> / skripts>
7. / body>

FitText mums ir nepieciešams iestatīt saspiešanu. Jo lielāks skaitlis, jo vairāk jūs saspiežat fonta lielumu. Šeit ir pēdējais HTML ar visu FitText JavaScript no 14. līdz 18. rindiņai:

1. ! DOCTYPE html>
2. html lang = "lv">
3. galva>
4. meta charset = "utf-8" />
5. nosaukums> Netmag / Mask-Image / title>
6. saite rel = "stilu lapa" href = "style.css" type = "text / css" />
7. ! - [ja IE]> skripts src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> / skripts>! [endif] ->
8. / galva>
9. ķermenis>
10. galvene>
11. h1> Netmag / h1>
12. / header>
13. skripts src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> / skripts>
14. skripts src = "js / jquery.fittext.js"> / skripts>
15. skripta tips = "text / javascript">
16. $ ("h1"). fitText (.24);
17. / skripts>
18. / body>
19. / html>

Cik aizraujoši, ka mēs spējam veikt visu precīzo regulēšanu, kuru vēlamies ierakstīt, un padarīt to pielāgojamu, balstoties uz elastīgu pamatu!