Dabar, kai „Photoshopp“ pasirinkome tai, ką tikimės pasiekti naudodami paieškos sritį, ėmėmės jos kurti naudodami HTML ir CSS. Mūsų piktogramos šriftas jau yra įkeltas, todėl įdėkite jį į puslapį. „Font Explorer X“ mums padeda parodyti tinkamą HTML simbolį, kurį reikia naudoti didinamajam stiklui.
Pridedame žymėjimą prie antraštės įtraukti failą ir pradedame visiškai naują „Sass“ failą (_search.scss), kad parašytumėte šios naujos srities CSS. Įsitikiname, kad „CodeKit“ žino apie šį naują failą. Deja, šiose ankstyvosiose ekrano kopijose „CodeKit“ atnaujinimas užtrunka šiek tiek laiko, kurį vėliau atrandu tik todėl, kad turiu vieną konkretų projektą, kuriame yra per daug failų. Tai galite išspręsti tiesiog susiaurindami katalogą, kuriame turite „CodeKit“ laikrodį.
Paieškos sritis absoliučiai išdėstome antraštėje taip, kad ji būtų pagrindinės turinio srities dešinėje ir viršuje. Mes pritaikome didinamojo stiklo dydį ir išdėstymą, tiksliai nukreipdami į piktogramą. Mes išdėstome daiktus procentais taip, kad jie gerai atitiktų mūsų reaguojantį dizainą. Mes taip pat pridedame :hoverir :focusnurodome, todėl akivaizdu, kad galite jį spustelėti.
Pabaigoje parašome „JavaScript“, kuri atidarys ir uždarys paieškos sritį. Animacijas galėjome turėti tiesiai „JavaScript“ (nes mes naudojame „jQuery“), bet viskas, ką mes darome, yra pakeisti klasių pavadinimus CSS. Tai man patinka galvoti apie „valstijos CSS“, kur „JavaScript“ valdo tik klasių pavadinimus, kurie deklaruoja, kurioje būsenoje yra puslapis (ar sritis), o CSS kontroliuoja, kaip puslapis atrodo toje būsenoje (ir kaip jis ten patenka). ). Tai reiškia, kad mes darome tokius dalykus, kaip perėjimai CSS, mano nuomone, kur jie priklauso ir kurie bus daug geresni ilgalaikėje perspektyvoje (ty CSS perėjimai yra pagreitinti aparatine įranga, o „JavaScript“ perėjimai nėra, tai tik greiti įterptinių stilių pakartojimai).