# 116: Header Kustom untuk Demo - Trik CSS

Anonim

Header terakhir telah masuk! Kami sekarang dapat menyelesaikannya dan menyelesaikan semua tajuk khusus kami. Dalam screencast ini kita akan mengerjakan tajuk khusus untuk bagian Demo yang dilakukan oleh John Neiner.

Menariknya, John adalah satu-satunya ilustrator yang menyediakan karya seni di Illustrator. Itu bagus bagi kami dalam hal ini karena kami dapat menskalakannya ke ukuran apa pun yang kami butuhkan dengan kualitas penuh. Dalam retrospeksi, kita mungkin harus membiarkannya vektor (sebagai SVG) dan mungkin menggunakan fallback raster. Tetapi dalam screencast ini kami menjelajahi berbagai opsi penyimpanan raster dan akhirnya menggunakan JPG.webp.

Ada beberapa kebingungan saat menyimpan karena saya tidak dapat menemukan file yang disimpan karena saya mencari nama yang salah. Situasi DUH dunia nyata.

Kami kemudian beralih ke WordPress dan mengulangi proses kami untuk menyiapkan template untuk bergaya. Kami memastikan bahwa halaman demo memuat file CSS khusus hanya untuk mereka. Itu berarti menambahkan logika ke file header.php kami ( is_page_template()). Kami menemukan templat yang tepat untuk area demo (menggunakan tes klasik di mana kami membuat perubahan nyata pada templat dan melihatnya tercermin di situs asli.

Kami menghapus semua sampah lama dari template itu dan membawanya ke gaya baru kami. Kami menulis sedikit markup yang diperlukan agar halaman berada dalam kisi dan memiliki area header hanya untuk header kustom baru ini dan sebagainya.

Kami akhirnya menerapkan grafik tajuk khusus kami sebagai gambar latar belakang ke elemen pembungkus dengan bantalan yang cukup di bagian atas (berbasis persentase) agar sesuai dengan grafik di bagian atas (ukuran agar pas). Kami bahkan meletakkan gradien di belakang gambar yang memudar dari hijau tua menjadi hitam, jadi sepertinya Anda semakin dalam di lautan saat Anda menggulir ke bawah.

Lebih banyak pekerjaan yang harus dilakukan di halaman ini, tetapi kami menyelesaikan tajuk dan templatnya dalam kondisi yang baik!