Responsive login form with animated input placeholder using html css & javascript
How to create a Responsive login form with animated input placeholder using html css & javascript without using media queries!
Create a beautiful and responsive login form with an animated placeholder text or floating label animation using pure css. Without using media queries we can make our html form responsive.
The main purpose of this video to teach you about creating a responsive login form design without using the media queries and leveraging the power of the css variables. Also, you will see how we can move the floating input placeholder text using only CSS and some javascript.
We are going to use label as the placeholder text for the input elements and then we will associate the relevant label with its revelant input element. We are going to further animate these labels so that they work as the placeholder text for the input elements which can further be animated.
You will also learn how you can create a button with animated gradient brackground using css only. You will see the power of viewport units like vmin, vw and vh to make this login form responsive.
Timestamps:
00:00 - Intro - Responsive Login Form design
01:12 - Structure for Responsive Login Form with Animated Placeholder Text
03:01 - Creating Gradient Background using CSS for the page
04:02 - Centering the Form Vertically and Horizontally using CSS Flexbox
04:42 - Styling the form and its contents
06:55 - Styling the form input elements using CSS
08:15 - Centering the label placeholder text vertically inside input element
10:05 - Creating Custom Border to bottom of the input field with a Gradient Background
13:08 - Animating the gradient border on the input elements
15:56 - Styling html links and buttons
17:04 - Apply gradient background on the button
18:54 - Animate Gradient button background on hover
20:55 - Creating CSS Circular shapes for the form container background
24:11 - Floating animated placeholder text on focus state using javascript
28:32 - Adding Classes to HTML form container element using javascript dynamically for the focused and filled state
31:04 - Adding a custom border to the input element when input has been filled or it isn't empty.
============Awesome Videos on CSS3=============
How to Apply Gradient Animation on button background in CSS
• How to Apply Gradient Animation Effec...
Clip image to text using CSS background-clip | CSS Text Knockout Effect
• Clip image to text using CSS backgrou...
CSS Sticky Header - Fixed Navigation Menu Bar on Scroll using HTML5 and CSS3
• CSS Sticky Header - Fixed Navigation ...
Creating Automatic CSS Image slider with CSS3 animation & HTML5 | No Javascript or Jquery - Tutorial
• Creating Automatic CSS Image slider w...
Simple Responsive Navigation Menu Bar with Logo on Left Using HTML5 and CSS3 Flexbox - Tutorial
• Simple Responsive Navigation Menu Bar...
How to Create Masonry Layout CSS3 & HTML5 - Material Design Card Based Pinterest Like Column Layout
• How to Create Masonry Layout CSS3 & ...
How to Create Download Link in HTML5 | Making Direct Downloadable Button for Any File Type
• How to Create Download Link in HTML5 ...
How to Create Simple HTML5 / CSS3 Preloader Animation | Circular Spinner Preloader - Youtube
• How to Create Simple HTML5 / CSS3 Pre...
How to add a Preloader in Website using HTML, CSS and Javascript
• How to add a Preloader in Website usi...
Source Code:
https://codepen.io/smashtheshell/pen/...
Find all the source codes here:
https://codepen.io/smashtheshell
Follow on Twitter
/ amit4kp
Add on Facebook
/ kumaramit24chd
Like Page on Facebook
/ smashtheshell
Share this video and Subscribe to this channel for latest updates and web design tips and techniques.
Watch video Responsive login form with animated input placeholder using html css & javascript online without registration, duration hours minute second in high quality. This video was added by user smashtheshell 15 October 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2,660 once and liked it 31 people.