Canlı incele Formlar
OTP Code Boxes
Six single-character cells that light up and lift as each digit is entered.
Formlar
Expanding Search Field
A circular icon that stretches into a full search field when it gains focus.
- Stok kodu
- form-search-widen
- Lisans
- Ücretsiz
Canlı önizleme herkese açıktır. Kod sekmeleri, kopyalama, kaynak API'si ve izole önizleme belgesi üyelik gerektirir.
Üyelik gerekli
Kaynak kodu görmek için ücretsiz üye ol
HTML, CSS, React çıktısı, kopyalama ve tarayıcı editörü giriş yaptıktan sonra açılır.
Bu efektte bir sorun mu var, yoksa daha iyisini mi yazdın? Düzeltme gönder — onaylanırsa puan kazanırsın.
Sorun bildir veya düzeltKullanılan teknikler
Bu efektte kullanılan CSS teknikleri — her biri canlı örnekli bir rehbere ya da özelliğin referans sayfasına bağlanır.
Rehberler
CSS referansı
Expanding Search Field nasıl kullanılır?
- 1. HTML parçasını sayfanda kullanmak istediğin yere yapıştır.
- 2. CSS bloğunu stil dosyana veya bir
<style>etiketine ekle. - 3. Renkleri ve süreleri kendi tasarımına göre değiştir — bağımlılık yok, saf CSS.
Formlar kategorisindeki tüm efektler gibi bu efekt de tamamen ücretsizdir; ticari projelerde de kullanabilirsin. Kütüphanenin tamamı için Formlar koleksiyonuna göz at.
Benzer form efektleri
TümüCanlı incele Formlar
Custom Select Arrow
A native select stripped of its default arrow, with a chevron that flips on focus.
Canlı incele Formlar
Underline Focus Field
A minimal field where only the baseline exists, and it fills in from the centre.
Canlı incele Formlar
Floating Label Field
The placeholder lifts into a small label above the field once anything is typed.
Canlı incele Formlar
Canlı incele Formlar
Canlı incele Formlar
Floating Label Search
Search bar with a floating label that animates on focus.
Canlı incele Formlar
Error State Input
Input showing error state with red border, glow and message.