CSS3 ve HTML Sayfa Arama Butonu Oluşturma

CSS3 ve HTML Sayfa Arama Butonu Oluşturma


 

HTML Kodu
 
 
Gezinme, içinde çeşitli öğeler içeren sırasız bir listeden ( .nav ) oluşur:
 
Normal bağ içeren liste öğeleri (LI'ler) herhangi bir kimlik ve sınıf içermiyor.
 
#settings , resim tabanlı bir bağlantı içeriyor.
#search , bir arama düğmesi ile birlikte arama alanını içerir.
#options bir bağlantı içerir ve ayrıca bir açılır liste görevi gören sırasız bir liste ( .subnav ) içerir.
 
 
Sonunda, yalnızca ön tanımlı CSS özelliklerini her yerde kullanmamızı sağlayan prefixfree'yi ekledik.
 
 
Kodlar:

 

CSS
 
 
1. Temel Stiller
 
Kodlar:

 

Basit bir CSS sıfırlaması ile başlayıp, Google Fontlar'dan 'Montserrat' adlı özel bir fontu içe aktarıyoruz.
 
 
2. Navigasyon ve Liste Öğeleri
 
 
Kodlar:
 
 
 
Ana gezinme öğesinin koyu gri bir arka planı ve sabit bir yüksekliği vardır. Liste öğeleri sola doğru kayar ve nispeten daha sonra konumlandırılan açılır menüyü içerecek şekilde konumlandırılır.
 
 
3. Bağlantılar
 
 
Kodlar:
 
 
 
Bağlantıların temel stilleri var. Google Fontlar'dan daha önce aktardığımız Montserrat fontunu kullanıyorlar. Metnin pürüzsüz ve kalın olmasını sağlamak için ince beyaz bir ışıltı eklenir. Bağlantıların .nav ile aynı olan 60px hat yüksekliği vardır. Bağlantıların arka planın gri arka planın daha açık bir versiyonuna değiştirildiği bir gezinme efekti var.
 
 
#settings bir resim bağlantısı içeriyor, dolayısıyla düzeni ayar simgesinin ortada görünmesini sağlayacak şekilde ayarlandı.
 
4. Arama Kutusu
 
 
 
 
Kodlar:
 
 
 
#search sabit genişlikte ve küçük bir kenar boşluğu veya 4px civarında sağlanır.
 
#search_text sola doğru kayar ve fareyle üzerine gelindiğinde daha açık bir gölge canlandıran yeşil bir arka plan elde edilir.
 
#search_button da #search_text ile yatay olarak hizalanacak şekilde soldan kayar. Ortasında konumlandırılmış arka planı olarak bir arama simgesi kullanır.
 
 
5. Açılır menü
 
 
 
 
Kodlar:
 
 
 
Bir açılır menü içeren # seçenekler, daha sezgisel hale getirmek için sağda arka plan üçgen simgesi olarak verilir.
 
.subnav varsayılan olarak CSS görünürlük ve opaklık özellikleri kombinasyonu kullanılarak gizlenir. Üstten %110 olarak konumlandırılmış. Üzerinde gezinirken, üst kısım, donukluk ve görünürlük özellikleri ile birlikte açılır. Menüye serin bir geçiş efekti vererek %100'e değişir.
 

 

 YUKARI