CSS Neumorphic Login Form Design Tutorial

hello and welcome to red stapler channel in this tutorial we are going to show you how to create a neumorphic login form design using only CSS and HTML ready? let's check it out neumorphic design is another UI design that has become popular these days the main concept is to use the light source and shadow in a way to create a soft 3d effect that add focus to your element in our example you will see that the login form looks like it's protruding from the background creating 3d like impression to make neumorphic effect like this is actually pretty easy using only CSS box shadow let's work on recreating this example together here's the HTML page with some basic CSS setup like font setting flex display to center the element and default text setting and background color first let's start with adding div for the login from body then set the size and padding in CSS border-radius plays important role in neumorphic design to create a soft round corner effect since the login form is going to protrude from the body I'm going to use the same background color and here's the key part I'm going to use box shadow to create light effect first let's add dark shadow at the bottom right side then add bright color shadow at the top left side this will make the elements looks like it has the light source illuminating from the top-left corner of the screen looks good now we are going to start adding content to the form let's add a logo div followed by the title of the phone and subtitle if you need it okay let's work on the CSS first set the background image for the logo div then set the size and 50% bottle radius to create a circle and margin:0 auto to center it next let's work on a box shadow first I'm going to add a small logo shadow then add 5 pixels offset with the same color as locking for background then add a bottom-right shadow and top left shadow like we did previously with a login form body and I'm going to add some CSS to set the font styles for the text next I'm going to add the input fields username and password I will also add a placeholder text then add a sign-in button for the CSS I'm going to set 100% width and padding for the input fields div then for the input I'm going to remove the default input styles by setting border, outline and background to none then set the font size color and padding next I'm going to add sunken effect to the input fields first set the margin bottom and border-radius then add box-shadow like we did previously except that this time we will use inset instead and next we will add some small icons to the input fields I'm going to use free SVG icon you can find a link at the video description box below copy the SVG code for website and place it in front of the input fields I will also change the fill color from white to gray then set the height in CSS and add some margin next let's work on the button first remove the default button styles by setting outlined and border to none then set cursor to pointer set the width and height border-radius and font setting and finally set a green background color next add a neumorphic effect using box shadow then I'm going to add a mouse hover and mouse click color changing effect also add a half second transition time finally I'm going to add a forgot password and sign up link for the CSS I'm going to add some top padding and set text align to Center then for each link I will remove the underline by setting text decoration to none and set the color and font size and that's all for this tutorial if you love this video don't forget to like or subscribe our channel to stay tuned thanks watching see you next time bye

Channel: Red Stapler

Views: 58,385

Keywords: css, css neumorphic, css neumorphism, css design, web design, html, css tutorial, cool css design, neumorphism, neumorphic, neumorphic design, web design trend, login form, css login form, css login form design, tutorial

Id: _mR_dxyajp0

Length: 11min 6sec (666 seconds)

Published: Tue Mar 31 2020