Konuyu Oyla:
  • Toplam: 1 Oy - Ortalama: 5
  • 1
  • 2
  • 3
  • 4
  • 5
CSS3 Genişleyen Input
#1
Kod:
.ara{ /* Input classımızın adı ara */
    transition: width 0.8s; /* Genişliğin artışı 0.8 saniyede gerçekleşecek */
    width: 120px; /* Normal genişliğimiz 120 pixel */
    }
    .ara:focus{ /* Odaklandığımızda... */
    width: 200px; /* Odaklanıldığında genişliği 200pixel olacak */
    }

    .ara2{ /* Bu yukarıdakinin biraz daha şekillisi */
    transition: width 0.8s;
    width: 120px;
    border-radius: 6px;
    background: url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/11_Search-24.png) no-repeat;
    height:30px;
    background-position:90px;
    }
    .ara2:focus{
    width: 200px;
    border: 2px solid #000;
    background-position:170px;
    }

Herkese selamlar,



Yukarıdaki css kodlarını eklediğiniz sitenizde input larınızın class larını ara veya ara2 yaptığınızda demodaki gibi inputlara odaklanınca genişliği artacaktır.Gerekli açıklamaları kod içerisinde yaptım.



DEMO
GÖREVİNİ BIRAKTI
Önce AHLAK ve MANEVİYAT

Hakk’ın tesisi için çalışmamakla Batıl’ın hakimiyeti için çalışmak arasında fark yoktur.



Prof. Dr. Necmettin ERBAKAN


TÜM KONULARIM

Başaɾının içeɾiğindeki en önemli, biɾicik malzeme, insanlaɾla nasıl geçineceğini iyi bilmektiɾ. / Theodore Roosevelt
Ara
Cevapla PGM
Teşekkür verenler:
#2
Çok teşekkürler paylaşım için :)
Ara
Cevapla PGM
Teşekkür verenler:
#3
çok iyi bir kod olmuş ellerine sağlık hocam :)
Cevapla PGM
Teşekkür verenler:
#4
Yeni Temamda Kullanacağım Şefim Teşekkürler :)
Ara
Cevapla PGM
Teşekkür verenler:
#5
çok güzel teşekkürler
Ara
Cevapla PGM
Teşekkür verenler:
#6
iyi güzelde aramıyor ki
Ara
Cevapla PGM
Teşekkür verenler:
#7
Yorumlarınız için teşekkürler.Fikir benim değil bir sitede gördüm kodunu yazdım.

(16-08-2013 Saat: 22:55)srdrylmz Nickli Kullanıcıdan Alıntı: iyi güzelde aramıyor ki

Aramaz zaten çünkü ben sadece css kodunu verdim.Araması için forumda bulunan arama input ına class değeri olarak ara2/ara (ya da ne olarak belirlediyseniz) girmeniz gerekir.

Yani bu sadece olayın görsel sunumu, bir demo...
GÖREVİNİ BIRAKTI
Önce AHLAK ve MANEVİYAT

Hakk’ın tesisi için çalışmamakla Batıl’ın hakimiyeti için çalışmak arasında fark yoktur.



Prof. Dr. Necmettin ERBAKAN


TÜM KONULARIM

Başaɾının içeɾiğindeki en önemli, biɾicik malzeme, insanlaɾla nasıl geçineceğini iyi bilmektiɾ. / Theodore Roosevelt
Ara
Cevapla PGM
Teşekkür verenler:
#8
özr dilerim o zmn
Ara
Cevapla PGM
Teşekkür verenler:
#9
(17-08-2013 Saat: 12:21)srdrylmz Nickli Kullanıcıdan Alıntı: özr dilerim o zmn

Özür dilemenin ne gereği vardı ki :)
GÖREVİNİ BIRAKTI
Önce AHLAK ve MANEVİYAT

Hakk’ın tesisi için çalışmamakla Batıl’ın hakimiyeti için çalışmak arasında fark yoktur.



Prof. Dr. Necmettin ERBAKAN


TÜM KONULARIM

Başaɾının içeɾiğindeki en önemli, biɾicik malzeme, insanlaɾla nasıl geçineceğini iyi bilmektiɾ. / Theodore Roosevelt
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 4 Ziyaretçi


Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping