Nüüd, kui oleme Photoshoppinud selle, mida loodame otsingupiirkonnaga saavutada, asusime selle HTML-i ja CSS-iga üles ehitama. Ikooni font on meil juba laaditud, nii et paneme selle lehele. Font Explorer X aitab meil välja näidata õige luubi jaoks kasutatava HTML-tähemärgi.
Lisame märgistuse oma päisekomplekti faili ja käivitame selle uue ala CSS-i kirjutamiseks uhiuue Sassi faili (_search.scss). Veendume, et CodeKit teab selle uue faili kohta. Kahjuks võtab CodeKiti värskendamine nendes varajastes ekraaniekraanides mõnikord mõnda aega, mis hiljem avastan lihtsalt seetõttu, et mul on seal üks konkreetne projekt, milles on liiga palju faile. Selle saate parandada, kitsendades lihtsalt kataloogi, milles teil on CodeKit kell.
Me paigutame otsingu ala päises absoluutselt nii, et see asetatakse peamise sisupiirkonna paremale ja ülaossa. Reguleerime suurendusklaasi suurust ja paigutust, suunates spetsiaalselt ikooni. Asetseme asjad protsentidega nii, et see sobiks hästi meie tundliku kujundusega. Lisame :hoverja :focusväidame ka, nii et on ilmne, et saate sellel klõpsata.
Lõpetuseks kirjutame JavaScripti, mis avab ja sulgeb otsingupiirkonna. Meil oleks võinud olla animatsioonid otse JavaScriptis (kuna kasutame jQuery-d), kuid selle asemel muudame vaid CSS-is klasside nimesid. See on see, mida mulle meeldib mõelda kui „olekupõhist CSS-i”, kus JavaScript kontrollib lihtsalt klasside nimesid, mis deklareerivad lehe (või ala) olekut ja CSS kontrollib, kuidas leht selles olekus välja näeb (ja kuidas see sinna jõuab) ). See tähendab, et me teeme selliseid asju nagu üleminekud CSS-is, mis minu arvates on nende koht ja kuhu minek on pikas perspektiivis palju parem (st CSS-i üleminekuid kiirendatakse riistvaraliselt, samas kui JavaScripti üleminekuid pole, need on lihtsalt siseste stiilide kiire kordamine).