CSS ile Arama Kutusu Nasıl Yapılır?

Arama kutuları web tasarımlarında çok dikkat çekerler ve web tasarımcıların çok şık tasarımlar üretebileceği bir bölümdür. Konu web tasarım olunca da kullanıcı dostu ve göz hoş gelen arama kutuları tasarlamak gerekir.

Aşağıdaki gibi bir arama kutusunu hiçbir görsel kullanmadan, tamamen CSS3 altyapısını kullanarak hazırlayalım.

Css Ile Arama Kutusu

HTML Bölümü

Basitçe bir form alanı oluşturalım.

Placeholder; arama kutusundaki metindir, arama kutusuna bir metin girildiği takdirde buradaki metin kaybolacak, yazılan metin silindiğinde de buradaki metin tekrar görünür olackatır.

Required, arama kutusunun boş olamayacağını, metin olması gerektiğini vurgulayan bir uyarı çıkması içindir.

Arama Kutusunun CSS Kodları

Aşağıdaki kodları da sayfanızın CSS kodlarını düzenlediğiniz alana ekleyin.

.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;}

Bu şablonu kullanarak siz de kendi sayfanızın tasarımına uygun arama kutuları oluşturabilirsiniz.

Popular Eğitimler

CSS ile Resim Nasıl Kırpılır?

Resimleri tasarımlarınıza uyarlamak için bazen kırpmanız gerekebiliyor. CSS ile resimleri kırpmadan, kırpılmış…

CSS ile Üçgen Ok Yapmak

CSS ile ok yapmak için imaj kullanmanız gerekmiyor. CSS kodları ile de…

Kod Yazarken Uzmanlaşın! VS Code’u Hızlı Kullanmak İçin Kısayollar

Hangi dilde kod yazıyor olursanız olun, aklınızdakileri hızlıca ekrana dökmek ve kod…

Bootstrap Izgara (Grid) Sistemi (Container, Col, Row Kullanımı)

Bootstrap’de ızgara sistemleri container, container-fluid, row ve sütun anlamına gelen col elemanlarından…

VS Code Live Server ve Live Server Web Extension

VS Code Live Server ile HTML ve CSS gibi statik sayfalarınızı, ister…

Google Analytics.js ve Leverage Browser Caching Sorunu

Sitenizi GTMetrix veya Google PageSpeed gibi site hızı ölçen web sitelerinde test…