# 92: Membangun Halaman Galeri Individual - Trik CSS

Anonim

Kami memiliki sedikit mockup Photoshop untuk bekerja dari sini saat kami terus membuat template untuk halaman galeri individual.

Pertama, kami memberi gaya pada tautan Berikutnya dan Sebelumnya. Mereka benar-benar diposisikan di kotak di bilah galeri, sehingga kami dapat memusatkannya di halaman meskipun tombol dan barang lain sudah ada di bilah. Mereka mengambil kelas yang sama dengan tombol Kirim Satu sehingga ada keteguhan di sana.

Selanjutnya kita memiliki kolom kiri yang sangat tipis untuk mendapatkan teks. Kita mulai dengan kisi 1/8 7/8, tetapi 1/8 agak terlalu tipis. Kami mengubahnya menjadi 1/4 3/4 tetapi itu terlalu banyak. Jadi seperti bayi beruang dalam dongeng, 1/6 5/6 tepat.

Kami melakukan beberapa pekerjaan tipografi di kolom sempit itu, menambahkan judul (dalam file

tag tentu saja, karena ini adalah judul terpenting pada halaman), deskripsi, dan bagian lain. Sebagian besar tipografi tepat pada tempatnya berdasarkan pengaturan tipografi kami yang sederhana dan kokoh.

Grid 5/6 untuk gambar. Bagus dan besar, itu bagus. Ini memiliki latar belakang abu-abu terang, seperti halnya gambar di posting blog (mis

).

Kami berpikir tentang menjadi sedikit mewah dengan cara kami memberi gaya pada tag. Kami melihat-lihat di CodePen (ini adalah link ke tag "tag", META ALERT). Kami akhirnya berpikir itu berlebihan dan membiarkannya sebagai tautan biasa.

Kami membuat tombol "ukuran penuh" bekerja dengan salah satu cara paling sederhana yang kami bisa, membuka jendela baru yang merupakan dimensi dari gambar ukuran penuh dan menampilkan gambar di dalamnya. Ini seperti kotak modal dari awal tahun 2000-an! Tapi aku suka itu. Sederhana, tidak memerlukan banyak kode (seperti lightbox), dan jelas untuk berinteraksi dengannya. Bahkan lebih baik, jika Anda bertanya kepada saya.