|
CSS3 ile Açılır Arama Kutusu Yapımı
|
|
Ciri
Root
12-07-2014, 09:54 AM,
#5,678
Gönderi
Root
0
Rep
Merhaba arkadaşlar.
Bu yazımızda “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. 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. Kod: <input id="arama" type="search">
<label for="arama">ARA</label>Sırada ise CSS Kodları var. Kod: 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;
}örnek koyamadım. deneyen olursa bildirsin, işlem yapmadan yedek alın.
#5,678
#Power
Erbaş
12-07-2014, 12:36 PM,
#13
Gönderi
Erbaş
0
Rep
Teşekkürler
Edward=Thread Opener Machine :haha:
0
#13
|
|
« Önceki Konu | Sonraki Konu »
|
Şu anda bu konuyu okuyanlar: 1 Ziyaretçi