# 116: Pielāgota galvene demonstrācijām - CSS-triki

Anonim

Ir ienākuši pēdējie atlikušie galvenes! Tagad mēs varam tos pabeigt un veikt visas mūsu pielāgotās galvenes. Šajā ekrāna pārraidē mēs strādāsim pie Džona Neinera izveidotās sadaļas Demo pielāgotajām galvenēm.

Interesanti, ka Jānis bija vienīgais ilustrators, kurš nodrošināja mākslas darbu Illustrator. Tas mums šajā gadījumā ir patīkami, jo mēs to varam pilnīgā kvalitātē pielāgot jebkuram vajadzīgajam izmēram. Retrospektīvi mums, iespējams, vajadzēja atstāt to vektoru (kā SVG) un, iespējams, izmantot rastra atkāpšanos. Bet šajā ekrānuzņēmumā mēs izpētām dažādas rastra saglabāšanas iespējas un galu galā izmantojam JPG.webp.

Radās neliela neskaidrība, kad es nevarēju atrast saglabāto failu, jo meklēju nepareizu vārdu. Reālās pasaules DUH situācija.

Pēc tam mēs pārietam uz WordPress un atkārtojam procesu, kā sagataves sagatavot stilam. Mēs pārliecināmies, ka demonstrācijas lapas tieši tām ielādē īpašu CSS failu. Tas nozīmē loģikas pievienošanu mūsu header.php failam ( is_page_template()). Mēs atrodam pareizo veidni demonstrācijas apgabalam (izmantojot klasisko testu, kurā mēs acīmredzami mainām veidni un redzam, ka tā tiek atspoguļota reālajā vietnē.

Mēs noņemam no šīs veidnes visus vecos atkritumus un ieviešam tos mūsu jaunajā stilā. Mēs uzrakstām nelielu marķējumu, kas vajadzīgs, lai lapa būtu režģī un galvenes apgabals būtu paredzēts tikai šai jaunajai pielāgotajai galvenei un tam visam.

Mēs galu galā pieliekam savu pielāgoto galvenes grafiku kā fona attēlu iesaiņojuma elementam, kura augšpusē ir pietiekami daudz polsterējumu (pamatojoties uz procentiem), lai tas atbilstu grafikas augšdaļai (pēc izmēra piemērots). Mēs pat ievietojam gradientu aiz attēla, kas izbalē no dziļi zaļa līdz melnai, tāpēc šķiet, ka ritinot uz leju, jūs arvien dziļāk atrodaties okeānā.

Šajā lapā jāpaveic vairāk darba, taču mēs saņēmām galveni un veidni labā formā!