CSS3 Ile Açılır Arama Kutusu - Adobewordpress
Có thể bạn quan tâm
Merhaba arkadaşlar.
Bu yazımda “CSS3‘ün çoklu hover desteği ve transition özelliğiyle nasıl ilgi çekici arama kutucukları hazırlanır?” sorusunu cevaplandıracağız. Bu pratik teknik sayesinde hem göze hoş gelen bir sunum hazırlayacaksınız hem de web arayüzünüzdeki alandan kar edeceksiniz.
ÖRNEĞİ GÖRÜNTÜLE
Nasıl hazırlanır?
Az önce belirttiğim gibi transition ve çoklu hover desteğini kullanacağız, jQuery ve türevi platformlara ihtiyacımız olmayacak. Dolayısıyla birkaç satır HTML ve CSS koduyla bütün işlemimiz tamamlanmış olacak.
İlk olarak HTML Kodları ile başlayalım.
<input id="arama" type="search"> <label for="arama">ARA</label>Sırada ise CSS Kodları var.
label { background-image: linear-gradient(#8b9da9, #fff6e4); box-shadow: inset 0 0 100px hsla(0,0%,0%,.3); border: 1px; cursor: pointer; display: inline-block; font:bold 1.2em Helvetica; margin-left: -.125em; padding: 11px 20px 11px 20px; transition: .25s; color:#fff; text-shadow:2px 2px 2px #666; border-radius:5px; } input:hover +label{border-radius:0 5px 5px 0;} input:hover + label { background-color: #fa3; } input { background-color: #e0e0e0#; border: 1px solid #666; color: #222; display: inline-block; font:1.2em Helvetica; margin-right: -.25em; outline: 0; opacity: 0; padding: 10px; transition: .55s; -webkit-transition: .55s; -moz-transition: .55s; -ms-transition: .55s; -o-transition: .55s; width: 0; } input:hover { opacity: 1; padding-left: .75em; padding-right: .75em; width: 11em; border-radius:5px 0 0 5px; }Kapanış
Arama kutucuğumuz an itibariyle hazır. Yukarıdaki örneği test edebilirsiniz.
Transition üzerine çok konuştuk. Daha da konuşmaya devam edeceğiz. CSS3’ün en yeni tekniklerini sürekli incelemekteyiz. Bizi takip etmeye devam edin.
Sorularınızı yorum bölümünde belirtebilirsiniz.
İyi çalışmalar.
Từ khóa » Html Css Arama Butonu
-
Html Ve Css Ile Animasyonlu Arama Kutusu Yapımı | Mehsatek
-
HTML/CSS De Arama Butonu Nasıl Yapılır?? - PROTOTURK
-
(Html-Css Ders 40) HTML Arama Kutusu Yapımı - YouTube
-
HTML Arama Kutusu Yapımı | Arama Motoru Nasıl Yapılır? - YouTube
-
CSS Ile Arama Kutusu Nasıl Yapılır? | Sanagrafi
-
Telefonla Arama Butonu - CodePen
-
ARAMA BUTONU YAPMAK - Bilim Ve Bilişim Bloğu
-
HTML Sayfalarına Arama Butonu Ekleme | Technopat Sosyal
-
Html Siteye Arama Butonu?
-
How To Create A Search Button - W3Schools
-
HTML Arama Kutusu (Resimli Anlatım) | Site İçi Arama Motoru
-
HTML Siteye WhasApp Ve Arama Butonu Eklemek - Ali Akay
-
12 Bootstrap Navbar Arama Çubuğu Kutusu
-
CSS İLE BUTTON TASARIMI - WebCebir