# 116: Pasirinktinė antraštė demonstracinėms versijoms - CSS-gudrybės

Turinys

Įėjo paskutinės likusios antraštės! Dabar mes galime užbaigti šiuos veiksmus ir atlikti visas įprastas antraštes. Šioje ekrano eteryje dirbsime su Johno Neinerio pritaikytomis skilties „Demo“ antraštėmis.

Įdomu tai, kad Jonas buvo vienintelis iliustratorius, kuris pateikė iliustratoriaus iliustraciją. Šiuo atveju mums tai malonu, nes galime jį visiškai kokybiškai pritaikyti bet kokiam mums reikalingam dydžiui. Žvelgiant atgal, tikriausiai turėjome palikti jį vektorių (kaip SVG) ir galbūt naudoti rastrinį atsarginį variantą. Tačiau šioje ekrano juostoje mes tyrinėjame įvairias rastro taupymo galimybes ir galų gale naudojamės JPG.webp.

Buvo kažkokia tausojanti painiava, kai nepavyko rasti išsaugoto failo, nes ieškojau netinkamo pavadinimo. Reali DUH situacija.

Tada mes pereiname į „WordPress“ ir pakartojame savo šablonų paruošimo stilių procesą. Mes įsitikiname, kad demonstraciniai puslapiai įkelia specialų CSS failą tik jiems. Tai reiškia logikos pridėjimą prie mūsų header.php failo ( is_page_template()). Mes randame tinkamą demonstracinių elementų srities šabloną (naudojant klasikinį testą, kuriame akivaizdžiai pakeičiame šabloną ir matome, kad jis atsispindi tikroje svetainėje.

Mes pašaliname visas senas šiukšles iš to šablono ir pritaikome savo naujam stiliui. Mes parašome šiek tiek žymėjimo, reikalingo, kad puslapis būtų tinklelyje ir antraštės sritis būtų skirta tik šiai naujai pritaikytai antraštei ir visa tai.

Galiausiai pritaikome antraštės grafiką kaip fono paveikslėlį ant apvalkalo elemento, kurio viršuje yra pakankamai užpildų (procentais), kad grafika atitiktų viršuje (dydžio, kad tiktų). Mes netgi dedame gradientą už vaizdo, kuris išblunka nuo giliai žalios iki juodos, todėl panašu, kad slinkdami žemyn, vis giliau vandenyje.

Daugiau darbo šiame puslapyje, bet mes padarėme antraštę ir šabloną!

Įdomios straipsniai...