hello and welcome to red stapler channel in this tutorial I'm going to show you
how to create a login form with 3d shadow effect using only HTML and CSS in
just a few minutes ready let's check it out
first let's pick up the font I usually browse google font for interesting font
for the design for this tutorial we are going to use Lato
make sure you select both light and normal font before you use it
here's the design structure we will have to logo on top followed by a title and a
subtitle if needed then the two input fields and login button and forgot
password link so let's start with HTML according to design I will create a
wrapper to wrap all the divs together then create a logo and title divs
I will also create a container div for the input fields in case we need to add padding
now you will notice that I create another div to wrap each input field this
because we will add the icon in front of the field later and the div will keep
them on the same line
finally create a button and a forgot password link
HTML is almost complete next is CSS works
first set a default font color font family and weight
then set the wrapper width and height padding and border radius
as for background we will use a radial gradient you imitate the light effect
you might wonder how I got his easy just use any online gradient
generator that you like
use 50% by the radius to create a circle and margin:0 auto for center alignment
also add a minor box shadow to create depth
next I will adjust the font styles of the text
I will also add a little bit of letter spacing as for subtitle I will make it
smaller and use all bold uppercases
also said the padding for input fields wrapper for a spacing
now I'm going to remove our default input border outline and background
also set the font styles again as the input does not inherit the setting from the body
then I'm going to create an underline for the input fields
I will set a bottom bother and a small margin bottom for spacing
now here's the problem the font CSS we applied on the input are not being used
for the placeholder text if I open this in Chrome you will see the difference
the only way to apply the CSS to placeholder is to use the pseudo class
unfortunately the solution is different between browsers you can use
placeholders to the class for Chrome Firefox and Safari while the opacity one
is the extra setting you will need for Firefox as for ie and edge you need to
use ms-input-placeholder class instead
next let's work on a button first remove the default button styles and set a cursor to pointer
then set the size and border radius
next adjust the font setting same as input field the button doesn't inherit
the setting from the body
use radial-gradient background and box shadow to imitate the light effect
then change the background to lighter color on mouse hover
and to darker when clicked
next let's work on a forgot password link
I was at a top padding for spacing and text-aligned center
then remove the link underline and set the font color and size
next I'm going to add icons in front of the input fields for this tutorial I'm
going to use a free SVG image that can be added directly into the HTML
place the SVG code before each input field
then adjust the size in the CSS
and now to create a 3d effect we will use multiple layers of box shadow first
we will create a bottom shadow
then create a long and soft button shadow by using high blur amount
then right and left-side shadow
I will also create a side inset shadow to create depth effect
and finally apply linear gradient background to the body
I will also add a small blur filter to the form to increase the smoothness
and that's all for this tutorial hope you guys enjoy don't forget to subscribe our
channel to stay tuned for dev tips and tutorials thanks for watching see you
next time bye