how to create a neomorphic footer

June 13, 2021
Read

Creating a UI designed Neomorphic Footer using html css 


Neomorphic footer


Hello guys.I have been here today with another dynamic article about creating  UI designed NEOMORPHIC FOOTER using Html and Css. It's really simple by following this tutorial.


Here these are the steps to get the correct result .plz follow the steps one by one




step 1 : Wrting the basic html code


<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

</body>
</html>
step 2 : writing the html code for creating Social media Icons 

For creating social media icons we have to use the BOOTSTRAP CDN links to show the icons in web page. For that you can go to officail bootstrap cdn site and copy the link or else you can also copy the link from below. <link rel="stylesheet" 

href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"


Note that alla the meta data and links will have to be embed in the head tags. now we are going to create a division with name sociallinks in which all the social links are embed using <a> tags. 


Next we have to create social icons by giving the names of the icons in the "a" tag.Remember that the <a> tag sholud contains the icon name which was embed with <i> tag. If you not understand then follow the code below. here im giving the four social icons namely twitter , whatsapp , linkedin , and youtube by the common name "fa fa-social icon name". note: If you have intrest then you can also give social links in the HREF tag . 

<body>
    <h1>lets be friends</h1>
    <div class="socialicons">
        <a href="www.facebook.com"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-twitter"></i></a>
        <a href="#"><i class="fa fa-whatsapp"></i></a>
        <a href="#"><i class="fa fa-linkedin"></i></a>
        <a href="#"><i class="fa fa-youtube"></i></a>
    </div>
</body>




step 3 : writing basic needs of the web page. 


Here im going to write the basic needs like padding and margin to the body and also giving background color to the body etc.... Here you can also write heading tags or some paragraphs ,but i have only written heading in the page and even i also edit the style of the heading. 

 * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #e3edf7;
        }
 h1 {
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            color: #555;
            padding: 200px 0 100px;
            font-variant: small-caps;
        }


step 4 : Designing the social icons with Neomorphic effect 

For designing the neomorphic effect im going to write the codes for <a> and <i> tags .Note that for neomorphic effect you have to definetely cnsider the background color as #e3edf7 beacause it is the best color to make the web page neomorphic. so i've used the background color as #e3edf7 (light gray color). 

Now consider the division sociallinks and goto css and here we have to make the content to be positioned at center and display of the items should be flex andthe text should be aligned at center. 

 .socialicons {
            display: flex;
            justify-content: center;
            text-align: center;
        }
And now consider the <a> tag and goto css and here you have to give the proper size to icon using height and width properties. Then set the background color as #e3edf7 ,beacause ut gives the exact neomorphic effect to icon. 


Now its time to give box shadow and margins to the icons.For that go to css and here give the shadow as "6px 6px 10px -1px rgba(0, 0, 0, 0.15), -6px -6px 10px -1px rgba(255, 255, 255, 0.7)". set the border to 1px solid light black using the color code " rgba(0, 0, 0, 0, )" and also give the transition property with value transform 0.3sec. 


a {
            height: 75px;
            width: 75px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #e3edf7;
            margin: 0 15px;
            box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15), -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
            border: 1px solid rgba(0, 0, 0, 0, );
            transition: transform 0.3s;
        }
Now we are going to set deafult color to icons which looks dull with out hover. But whenever we hover it looks beautiful. so for that consider both <a> & <i> tags in css and set fontsize as 35 or 30 px and color as #777(gray) and dont forget to give the transition as 0.3s transform. 


 a i {
            font-size: 35px;
            color: #777;
            transition: transform 0.3s;
        }


step 5 : Creating hover effect .

Now we are going to create a hover effect on the icons using the hover property. 


For that first consider the <a> tag and then apply hover efect by giving the important box shadow property as "inset" of 4px 4px 6px -1px rgba(0, 0, 0, 0.2), and inset 4px 4px 6px -1px rgba(255, 255, 255, 0.7), -0.5px -0.5px 0px rgba(255, 255, 255, 1), 0.5px 0.5px 0px rgba(255, 255, 255, 0.15), 0px 12px 10px -10px rgba(255, 255, 255, 0.5); 


.Now set te border to light black and give the transform property as translateY(2px) this makes the icon moves down slightly when hovered. And also give the transition 0.3sec transformation.

 

a:hover {
            box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2), inset 4px 4px 6px -1px rgba(255, 255, 255, 0.7), -0.5px -0.5px 0px rgba(255, 255, 255, 1), 0.5px 0.5px 0px rgba(255, 255, 255, 0.15), 0px 12px 10px -10px rgba(255, 255, 255, 0.5);
            border: 1px solid rgba(0, 0, 0, 0, 0.01);
            transform: translateY(2px);
            transition: transform 0.3s;
        }
also give the trasform for <i> tag using below code 

 a:hover i {
            transform: scale(0.90);
        }
Now its time to give hover colors to the icons ,so for that just give the color to the icons using the base name fa fa-****. If not understand just folllow the code below. 

 a:hover .fa-facebook {
            color: rgb(18, 72, 233);
        }
        
        a:hover .fa-twitter {
            color: #00acee;
        }
        
        a:hover .fa-whatsapp {
            color: #18a829;
        }
        
        a:hover .fa-linkedin {
            color: #368cdd;
        }
        
        a:hover .fa-youtube {
            color: rgb(226, 8, 8);
        }
Thats it . Its all done. check ur output.

The output will be looks like this:




Download the source Code here: 



If you are interested in learning more about technology and coding and ethical hacking tips and tricks ,join in our official whatsapp group with this link provided below.


click here to join in our whatsapp group.


Thats it for today .Meet you all in the next article, Until than plz be tuned.. 
                                                    yours dinesh.


Tags :

No comments:

Subscribe to: Post Comments ( Atom )
Powered by Blogger.