Ngày hôm nay chúng ta sẽ đi vào tìm hiểu những thiết kế đẹp và sáng tạo cho ô input bằng HTML, CSS và Javascript nhé!
Những Thiết Kế Đẹp Cho Ô Input
Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu file là Pug thì bạn có thể chuyển sang HTML ở đây nhé : Pug to HTML. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.
Tổng Hợp Các Hiệu Ứng Input CSS
Kết quả bạn xem bên dưới nhé!
See the Pen Awesome input focus effects by Takuma.I (@Takumari85) on CodePen.
Input Effects HTML5 CSS3
Kết quả bạn xem bên dưới nhé!
See the Pen Text input love by Michael Arestad (@MichaelArestad) on CodePen.
Cách Tạo Input Focus Effect CSS
Kết quả bạn xem bên dưới nhé!
See the Pen Nice, compliant input boxes by Andrew Tunnecliffe (@atunnecliffe) on CodePen.
Cách Tạo Email Input HTML
Kết quả bạn xem bên dưới nhé!
See the Pen Email Input Field by Dean Hidri (@visualcookie) on CodePen.
Thiết Kế Input Suggestions Javascript
Kết quả bạn xem bên dưới nhé!
See the Pen Typing Suggestions by Sikriti Dakua (@dev_loop) on CodePen.
Thiết Kế Input Border Bottom Animation CSS
Kết quả bạn xem bên dưới nhé!
See the Pen Input Text Material with Gradient by Lucas Oliveira (@lucasyem) on CodePen.
Thiết Kế Input Với Border Gradient
Kết quả bạn xem bên dưới nhé!
See the Pen Input Field Gradient Border Focus Fun by Rik Schennink (@rikschennink) on CodePen.
Cách Tạo Input Label Animation CSS3
Kết quả bạn xem bên dưới nhé!
See the Pen Field Animations with CSS Custom Properties by Stas Melnikov (@melnik909) on CodePen.
>Cách Tạo Input Google Material Design
Kết quả bạn xem bên dưới nhé!
See the Pen Google Material Design Input Boxes by Chris on Code (@chrisoncode) on CodePen.
Thiết Kế Input Style CSS
Kết quả bạn xem bên dưới nhé!
See the Pen Input Live Style Changer by Benjamin Koehler (@codesuey) on CodePen.
Thiết Kế Input Border Animation CSS3
Kết quả bạn xem bên dưới nhé!
See the Pen Webflow-style email input by Phil Rose (@PRtheRose) on CodePen.
Thiết Kế Email Input HTML CSS
Kết quả bạn xem bên dưới nhé!
See the Pen input field with states by Fabian Pecher (@fpecher) on CodePen.
Thiết Kế Input Validation Javascript
Kết quả bạn xem bên dưới nhé!
See the Pen Email Input Validation behavior - JS and SCSS by Elior Tabeka (@eliortabeka) on CodePen.
Cách Tạo Animated Input Field
Kết quả bạn xem bên dưới nhé!
See the Pen Fancy Animated Input Field by Andy Pagès (@andyNroses) on CodePen.
Cách Tạo CSS Floated Label Input
Kết quả bạn xem bên dưới nhé!
See the Pen CSS Only Floated Labels by Nick Salloum (@callmenick) on CodePen.
Thiết Kế Input Label Animation Khi Focus
Kết quả bạn xem bên dưới nhé!
See the Pen Bump name by Mikael Ainalem (@ainalem) on CodePen.
Thiết Kế Tag Input Javascript
Kết quả bạn xem bên dưới nhé!
See the Pen Tags Input by Julien Dargelos (@juliendargelos) on CodePen.
Cách Tạo SVG Input Field
Kết quả bạn xem bên dưới nhé!
See the Pen Input with snap.svg & validation by Shehab Eltawel (@shehab-eltawel) on CodePen.
Thiết Kế Input Effect HTML5
Kết quả bạn xem bên dưới nhé!
See the Pen Pixie Dust Input by Rik Schennink (@rikschennink) on CodePen.
Cách Tạo Hiệu Ứng Move Label Khi input:focus
Kết quả bạn xem bên dưới nhé!
See the Pen Textbox /Text Input field Inspiration (Pure CSS) by Aditya Bhandari (@takeradi) on CodePen.
Thiết Kế Code Input Field Jquery
Kết quả bạn xem bên dưới nhé!
See the Pen Code Input Field by Aaron Iker (@aaroniker) on CodePen.
Cách Tạo Lock Input Field HTML
Kết quả bạn xem bên dưới nhé!
See the Pen Locked input field - CSS only by Niels Voogt (@NielsVoogt) on CodePen.
Thiết Kế Input Placeholder Animation CSS
Kết quả bạn xem bên dưới nhé!
See the Pen Input text interaction animation by Aaron Iker (@aaroniker) on CodePen.
Cách Tạo Email Input Validation
Kết quả bạn xem bên dưới nhé!
See the Pen Email validation animation by Aaron Iker (@aaroniker) on CodePen.
Cách Tạo Expand Input Khi Focus
Kết quả bạn xem bên dưới nhé!
See the Pen Animated UI text input by Shehab Eltawel (@shehab-eltawel) on CodePen.
Các Hiệu Ứng Input Field Effects CSS
Kết quả bạn xem bên dưới nhé!
See the Pen Text Input Effects by Kabir Shah (@KingKabir) on CodePen.
Cách Tạo Focus Input Animation Jquery
Kết quả bạn xem bên dưới nhé!
See the Pen Simple focus in/out input animation by Mirko Zorić (@fluxus) on CodePen.
Thiết Kế Fancy Password Input Animation
Kết quả bạn xem bên dưới nhé!
See the Pen Fancy Password input animation by Maurice Melchers (@mephysto) on CodePen.
Cách Tạo Input Animation Border CSS
Kết quả bạn xem bên dưới nhé!
See the Pen Input Animation CSS by webcrafters (@webcrafterscz) on CodePen.
Thiết Kế Input Form Animation Jquery
Kết quả bạn xem bên dưới nhé!
See the Pen Input animation by Lukmo (@lukmo) on CodePen.
Cách Tạo Material Input Label Animation
Kết quả bạn xem bên dưới nhé!
See the Pen Animated Input Placeholder by Momcilo Popov (@Momciloo) on CodePen.
Cách Tạo Animated Input Label
Kết quả bạn xem bên dưới nhé!
See the Pen Animated Input Labels by Jarrod Thibodeau (@jarrodthibodeau) on CodePen.
Cách Tạo CSS3 Animated Input Box
Kết quả bạn xem bên dưới nhé!
See the Pen CSS Animated Input by Ben Gallagher (@sqdge) on CodePen.
Thiết Kế CSS Input Label
Kết quả bạn xem bên dưới nhé!
See the Pen CSS input label by Harm Putman (@harmputman) on CodePen.
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những thiết kế input hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!
