Arama alanını bitirmek için biraz daha işimiz var.
Henüz sayfa sarmaya üç boyutlu istifleme etkisini eklemediğimizi fark ettiğimde, sadece bir saniyeliğine dikkatimizi çekiyor, bu yüzden bunu yapıyor ve rengini değiştiriyoruz.
Ardından, aramayı sitenin hangi alanına göre daraltmak için tıklayabileceğiniz küçük bağlantılar olan "Şurada ara:" alanı üzerinde çalışıyoruz. Daha sonra bunun gerçekten çalışmasını sağlayacağız, ancak burada ayarlanmış olan kullanıcı arayüzünü alacağız. Bağlantılar açık mavidir, ancak "seçilen" bağlantı beyaza döner ve altı çizilir, bu da seçilenler hakkında pek çok geri bildirimdir.
Ayrıca, arama alanını kapatmak için tıklayabileceğiniz (veya dokunabileceğiniz) küçük bir bağlantı olarak bir ✕ karakter (CopyPasteCharacter'den aldığımız) ekliyoruz.
Tasarımı tamamladıktan sonra, arama alanını açıp kapatmanın biraz garip olduğunu görüyoruz. Açık arama alanı geçici olarak dar olduğunda işler geçici olarak kendi kendilerine sarılır. Düzeltmek için hiçbir şeyin sarılmadığından white-space: nowrap;
ve hiçbir şeyin tuhaf çıkmadığından emin oluruz oveflow: hidden;
.
Bunu, bir sonraki arama motorlarını yapacağımızı söyleyerek bitiriyorum, ama aslında bir sonraki aşamaya geçemiyoruz, bu Video # 094 civarında gelecek.