# 92: Bireysel Galeri Sayfalarını Oluşturma - CSS Hileleri

Anonim

Tek tek galeri sayfası için şablon oluşturmaya devam ederken buradan çalışacak biraz Photoshop modelimiz var.

İlk olarak, Sonraki ve Önceki bağlantılarını şekillendirdik. Galeri çubuğunda kesinlikle konumlandırılmış kutu içindedirler, böylece diğer düğmelere ve zaten çubukta bulunan öğelere rağmen bunları sayfada ortalayabiliriz. Birini Gönder düğmesiyle aynı sınıfa girerler, böylece orada sabitlik olur.

Sırada, metni alabileceğimiz bu çok ince sol sütuna sahibiz. 1/8 7/8 ızgara ile başlıyoruz, ancak 1/8 sadece biraz fazla zayıf. 1/4 3/4 olarak değiştiriyoruz ama bu çok fazla. Efsanevi bebek ayı gibi, 1/6 5/6 tam da doğruydu.

Bu dar sütunda bazı tipografi çalışmaları yapıyoruz, başlığı ekliyoruz (bir

Tabii ki etiket, sayfadaki en önemli başlık olduğu için), açıklama ve diğer bölümler. Tipografinin çoğu, basit ve sağlam tipografi kurulumumuza dayanarak yerine oturuyor.

5/6 ızgarası tamamen görüntü içindir. Güzel ve büyük, ki bu harika. Blog gönderilerinde olduğu gibi açık gri bir arka plana sahiptir (ör.

).

Etiketleri nasıl şekillendirdiğimiz konusunda biraz süslenmeyi düşünüyoruz. CodePen'de etrafa bakıyoruz (burada “etiketler” etiketine bir bağlantı, META ALERT). Bunun aşırı olduğunu düşünür ve onları normal bağlantılar olarak bırakırız.

"Tam boyutlu" düğmenin, yapabileceğimiz en basit yollardan biriyle çalışmasını sağlıyoruz, tam boyutlu görüntünün boyutları olan ve içindeki görüntüyü gösteren yeni bir pencere açıyoruz. 2000'lerin başından kalma modal bir kutu gibi! Ama hoşuma gidiyor. Basittir, bir sürü koda ihtiyaç duymaz (bir ışık kutusunun yapacağı gibi) ve etkileşime girmesi açıktır. Bana sorarsan daha da iyi.