CSS Ile Güzel Görünümlü Arama Çubuğu Ekleme

• Kategoriler
• İletişim
• Ücretsizler
• Hizmetlerimiz
• Koyu Renk Normal Renk
• Profil
• WhatsApp Abone
• Site Haritası - Hakkımızda - Gizlilik

  Hak İhlali

  Copyright ©

Anasayfa › Kodlama › WebMaster CSS ile Güzel Görünümlü Arama Çubuğu Ekleme in Kodlama WebMaster Web sitesi tasarımında en önemli kısımlardan biride sitenizin görsel açıdan hoş ve güzel görünüme sahip olmasıdır. Bu görünüme sahip olabilmek için genellikle slidebar önemli olarak değer verilerek kodlama veya eklentiler kullanılır. Diğer bir husus ise arama çubuklarının daha şık görünüme sahip olmasıdır. Diyelim ki var olan bir tema üzerinde arama çubuğu hoşunuza gitmedi değiştirmek istiyorsunuz. Benim hoşuma giden bir aram çubuğu yapalım.Bu arama kutusunu CSS kodlaması kullanarak yapacağız. İlk önce hazırlamak istediğimiz arama çubuğu görselini göstereyim. Aşağıdaki görselden bakabilirsiniz.Daha sonra sırası ile HTML olarak bir form bölümü oluşturalım. Yada var olan temanın arama bölümüne ilgili kodu ekleyelim veya değiştirelim.<form class="form-wrapper cf"> <input type="text" placeholder="Aranacak Metin..." required> <button type="submit">ARA</button></form>Yukarıdaki form kodunda bulunan Placeholder; Arama kutusundaki yazıdır. Arama kutusuna bir yazı yazmaya başladığında yazı kaybolacak, eğer yazı silinir veya olmaz ise tekrar görünür olacaktır. Required, arama kutusunun boş olamayacağını, metin olması gerektiğini hatırlatan bir uyarı sistemidir.

Arama Çubuğu CSS kodları

Daha sonra ise CSS kodlarımızı ilgili yere ekleyelim veya değiştirelim..cf:before, .cf:after {content:"";display:table;}.cf:after{clear:both;}.cf{zoom:1;}.form-wrapper {background: #444;background: rgba(0,0,0,.2);border-radius: 10px;margin: 150px auto 50px auto;padding: 15px;width: 450px;}.form-wrapper input {background: #eee;border-radius: 3px 0 0 3px;border: 0;float: left;font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';height: 20px;padding: 10px 5px;width: 330px;}.form-wrapper input:focus {background: #fff;box-shadow: 0 0 2px rgba(0,0,0,.8) inset;outline: 0;}.form-wrapper input::-webkit-input-placeholder {color: #999;font-style: italic;font-weight: normal;}.form-wrapper input:-moz-placeholder {color: #999;font-style: italic;font-weight: normal;}.form-wrapper input:-ms-input-placeholder {color: #999;font-style: italic;font-weight: normal;}.form-wrapper button {background: #d83c3c;border-radius: 0 3px 3px 0;border: 0;color: #fff;cursor: pointer;float: right;font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';height: 40px;overflow: visible;padding: 0;position: relative;text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);text-transform: uppercase;width: 110px;}.form-wrapper button:hover{background: #e54040;}.form-wrapper button:active,.form-wrapper button:focus{background: #c42f2f;outline: 0;}.form-wrapper button:before {content: '';border-color: transparent #d83c3c transparent;border-style: solid solid solid none; border-width: 8px 8px 8px 0;left: -6px;position: absolute;top: 12px;}.form-wrapper button:hover:before{border-right-color: #e54040;}.form-wrapper button:focus:before,.form-wrapper button:active:before{border-right-color: #c42f2f;}.form-wrapper button::-moz-focus-inner {border: 0;padding: 0;}Gördüğünüz gibi şık ve görsel açıdan oldukça güzel bir Arama çubuğumuz oldu. Umarım faydalı olmuştur. Görüş ve önerilerinizi bekliyoruz. Önceki Sonraki

yazılan gönderi: Uzman Öğretici

En çok Okunanlar

• Microsoft Office Programsız Aktivasyon Yapma Bu yazımızda sizlere Microsoft Office Programsız Aktivasyon Yapma basit ve pratik nasıl yapıldığını anlatmaya çalışacağım. Microsoft Office...
• Responsive Tasarım için Örnek CSS Kod Responsive web (internet) sistesi yapmak isteyenlerin oldukça işine yarayacağı düşüncesiyle sizlere responsive css dosyasında kullanacağınız...
• Wordpress Eklentileri Site Açılış Hızını Kaç Saniye Etkiler Bu yazımızda sizlere Wordpress Eklentileri Site Açılış Hızını Kaç Saniye Etkiler  görmemizi sağlayacak bir eklentiden bahsedeceğiz. Bu eklen...
• Hangi SEO Aracı Ne İşe Yarar? Web tasarım işleri yapanların en önem verdiği işlerden biri SEO' dur. Çünkü SEO ne kadar iyi yapılırsa o kadar fazla Google ve kullanıcı...
• Tasarımda kullanılan tebeşir yazı fontları Merhaba arkadaşlar; Tebeşir yazı fontları bir çok tasarım ile uğraşanların arayıpta bulmakta zorlandı bir fonttur. Eğitim kurumlarında ...

Etiketler

3D Ağ Android AntiVirüs App Inventor Bilisim Blogger Boostrap Cep Telefonu Chrome Dersler Digital Baskı E-Ticaret Egitim Egitim-Yazilari Eglence Eklentiler Ekran Koruyucu Facebook Faydalı Bilgiler Faydalı Siteler Film Flash Front-End GameLooper GameMaker Grafik Güvenlik Hack Her Telden InDesign Iphone İlginç İnternet İOS İpuçları Java jQuery Kitap Kod Kodlama Linux Makale Maneviyat Muzik Nasıl Office Opencart Oyun Oyun Tasarımı Paint Photoshop Plugİn Poster Prezi React Resim Scratch SEO SketchUp Sosyal Medya Style Sunum SVG Tavsiye Filmler Twitter Unity 3D USB Video Videolu Anlatım VideoScribe virtin Virüs vitrin Web WebMaster Windows Windows İpuçları WordPress Yazılım Youtube

Kategoriler

3D Ağ Android AntiVirüs App Inventor Bilisim Blogger Boostrap Cep Telefonu Chrome Dersler Digital Baskı E-Ticaret Egitim Egitim-Yazilari Eglence Eklentiler Ekran Koruyucu Facebook Faydalı Bilgiler Faydalı Siteler Film Flash Front-End GameLooper GameMaker Grafik Güvenlik Hack Her Telden InDesign Iphone İlginç İnternet İOS İpuçları Java jQuery Kitap Kod Kodlama Linux Makale Maneviyat Muzik Nasıl Office Opencart Oyun Oyun Tasarımı Paint Photoshop Plugİn Poster Prezi React Resim Scratch SEO SketchUp Sosyal Medya Style Sunum SVG Tavsiye Filmler Twitter Unity 3D USB Video Videolu Anlatım VideoScribe virtin Virüs vitrin Web WebMaster Windows Windows İpuçları WordPress Yazılım Youtube

mail aboneliği için geç kalmış değilsiniz.

Bize abone olduğunuzda sizlere anında mail olarak bildirim gelecektir. Böylece her türlü yeni paylaşımlarımızı takip edebileceksiniz.

SPAM mail almayacağınızı garanti edebiliriz.

Zekademi Bilişim Teknolojileri Hizmetlerimiz

1999 yılından itibaren aktif olarak yapmış olduğumuz birçok Dijial Platformlarda sizlere birikimlerimizle hizmet etmekteyiz.

Daha fazla bilgi için lütfen bizimle telefon ile aramak için tıklayınız.WhatsaApp ile yazılı olarak sorularınız için tıklayınız.