Neumorphism Design – CodingNepal

Neumorphism Profile Card UI Design using only HTML & CSS

CodingNepal — Mon, 09 Nov 2020 10:29:00 +0000

Hello readers, Today in this blog you’ll learn how to create Neumorphism Profile Card UI Design using only HTML & CSS. Earlier I have shared many blogs on Neumorphism or Neomorphic Effects and now I’m going to create a Profile Card with Neumorphism Effect.

A profile card is a card that carries saved profile content. Profile Cards let you select profile values consistently over all items on your website. Neumorphism, or soft UI, is a visible style that mixes background colors, shapes, gradients, highlights, and shadows.

In this program [Neumorphism Profile Card UI Design], there is a profile card with a neomorphic effect. This card contains a profile image, social media buttons, and some social media info. When you hover on particular social media buttons, there is shown a neomorphic effect.

This card is fully based on HTML & CSS. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Neumorphism Profile Card UI Design].

Video Tutorial of Neumorphism Profile Card UI Design

In the video, you have seen the Neumorphism Profile Card UI Design with Neomorphic Effect on Hover. I hope you have understood the codes behind creating this card. This is a pure CSS program that means only HTML & CSS are used to create this card and the neomorphic effect. So if you are a beginner then you can also create this type of profile card.

If you like this card and want to get source codes of this program then you easily copy the codes of this program as well as download them from the below link. You can freely use this card on your websites, projects, and HTML pages.

Neumorphism Profile Card UI Design [Source Codes]

To create this program (Neumorphism Profile Card). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.





    
    Neumorphism Profile Card | CodingNepal
    
    


  
    
      
        
      
    
    
    
    CodingNepal
    Designer & Developer
    
      
      
      
      
    
    
      
      
    
    
      
        
        
        20.4k
      
      
        
        
        14.3k
      
      
        
        12.8k

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #ecf0f3;
}
.wrapper,
.wrapper .img-area,
.social-icons a,
.buttons button{
  background: #ecf0f3;
  box-shadow: -3px -3px 7px #ffffff,
               3px 3px 5px #ceced1;
}
.wrapper{
  position: relative;
  width: 350px;
  padding: 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.wrapper .icon{
  font-size: 17px;
  color: #31344b;
  position: absolute;
  cursor: pointer;
  opacity: 0.7;
  top: 15px;
  height: 35px;
  width: 35px;
  text-align: center;
  line-height: 35px;
  border-radius: 50%;
  font-size: 16px;
}
.wrapper .icon i{
  position: relative;
  z-index: 9;
}
.wrapper .icon.arrow{
  left: 15px;
}
.wrapper .icon.dots{
  right: 15px;
}
.wrapper .img-area{
  height: 150px;
  width: 150px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-area .inner-area{
  height: calc(100% - 25px);
  width: calc(100% - 25px);
  border-radius: 50%;
}
.inner-area img{
  height: 100%;
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.wrapper .name{
  font-size: 23px;
  font-weight: 500;
  color: #31344b;
  margin: 10px 0 5px 0;
}
.wrapper .about{
  color: #44476a;
  font-weight: 400;
  font-size: 16px;
}
.wrapper .social-icons{
  margin: 15px 0 25px 0;
}
.social-icons a{
  position: relative;
  height: 40px;
  width: 40px;
  margin: 0 5px;
  display: inline-flex;
  text-decoration: none;
  border-radius: 50%;
}
.social-icons a:hover::before,
.wrapper .icon:hover::before,
.buttons button:hover:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 50%;
  background: #ecf0f3;
  box-shadow: inset -3px -3px 7px #ffffff,
              inset 3px 3px 5px #ceced1;
}
.buttons button:hover:before{
  z-index: -1;
  border-radius: 5px;
}
.social-icons a i{
  position: relative;
  z-index: 3;
  text-align: center;
  width: 100%;
  height: 100%;
  line-height: 40px;
}
.social-icons a.fb i{
  color: #4267B2;
}
.social-icons a.twitter i{
  color: #1DA1F2;
}
.social-icons a.insta i{
  color: #E1306C;
}
.social-icons a.yt i{
  color: #ff0000;
}
.wrapper .buttons{
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.buttons button{
  position: relative;
  width: 100%;
  border: none;
  outline: none;
  padding: 12px 0;
  color: #31344b;
  font-size: 17px;
  font-weight: 400;
  border-radius: 5px;
  cursor: pointer;
  z-index: 4;
}
.buttons button:first-child{
  margin-right: 10px;
}
.buttons button:last-child{
  margin-left: 10px;
}
.wrapper .social-share{
  display: flex;
  width: 100%;
  margin-top: 30px;
  padding: 0 5px;
  justify-content: space-between;
}
.social-share .row{
  color: #31344b;
  font-size: 17px;
  cursor: pointer;
  position: relative;
}
.social-share .row::before{
  position: absolute;
  content: "";
  height: 100%;
  width: 2px;
  background: #e0e6eb;
  margin-left: -25px;
}
.row:first-child::before{
  background: none;
}
.social-share .row i.icon-2{
  position: absolute;
  left: 0;
  top: 50%;
  color: #31344b;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}
.row:nth-child(1):hover i.fa-heart,
.row:nth-child(2):hover i.fa-comment{
  opacity: 1;
  pointer-events: auto;
}

That’s all, now you’ve successfully created a Neumorphism Profile Card UI Design using only HTML & CSS. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

Neumorphism Effect on Social Media Icons CSS

CodingNepal — Thu, 15 Oct 2020 21:08:48 +0000

Hello readers, today in this blog we are going to design a Neumorphism Effect on Social Media Icons by using only HTML & CSS. In the earlier blog, I have shared a program of How to Create an Animated Share Button and now I’m going to create a social media button with a neumorphism style.

In simple language, neumorphism means a UI design style mainly of white color and it looks very soft and plastic. This neumorphism design look vacuum and really catchy for the eyes. Neumorphism design can be used in any program like login form, share button, profile card, and others.

As you can see on the given image of this program [Neumorphism Effect on Social Media Icons], on the webpage. There are famous social media (Facebook, Twitter, Instagram, and youtube) with the neumorphism effect, as you can clearly look on these media button some icon looks like they are popped and some are looks like they have pressed. Literally, I have made an effect by using CSS box-shadow. All social media color is original, which are given by their creator. Let’s talk about this program. In the first, all of them are pop-up ed and when we hover them they got pressed in the neumorphism style.

If you are feeling difficulty to understand this program. Don’t worry my friend, I have provided a full video tutorial about this program [Neumorphism Effect on Social Media Icons]. Please watch this full video. I hope after watching this video, all your confusion will clear.

Video Tutorial Neumorphism Effect on Social Media Icons CSS

As you saw in the full video of Neumorphism Effect on Social Media Icons. All backgrounds designed in neumorphism style. When those icons hover, the button got pressed which looks really very awesome. I have made this program[Neumorphism Effect on Social Media Icons ] with the help of HTML & CSS only.

If you are familiar with HTML & CSS you can make this video easily and also if you have knowledge about JavaScript you can add more functionality as you like. Those my friends who are feeling difficult to create this program [ Neumorphism Effect on Social Media Icons], don’t worry I have provided all source codes of this program. This is free and all of you can use this program for your purposes.

Hover Effect o Social Media Icons [Source Codes]

To paste the given codes of this program [Neumorphism Effect on Social Media Icons] into your computer, first of all, you need to create two files, one is an HTML file and another is the CSS file. After creating these two files you can copy-paste the given codes of this program easily. If you want to download all source code files directly from the “Download Button”.





    
    
    Counter up Animation on Scroll | CodingNepal

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #ecf0f3;
}
.icons a{
  background: #ecf0f3;
  position: relative;
  height: 60px;
  width: 60px;
  margin: 0 10px;
  display: inline-flex;
  text-decoration: none;
  border-radius: 50%;
  transition: all 0.3s;
  box-shadow: -3px -3px 7px #ffffff,
              3px 3px 5px #ceced1;
}
.icons a:hover:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 50%;
  background: #ecf0f3;
  box-shadow: inset -3px -3px 7px #ffffff,
              inset 3px 3px 5px #ceced1;
}
.icons a i{
  position: relative;
  z-index: 3;
  text-align: center;
  width: 100%;
  height: 100%;
  font-size: 25px;
  line-height: 60px;
}
.icons a:hover i{
  transform: scale(0.9);
}
.icons a.fb i{
  color: #4267B2;
}
.icons a.twitter i{
  color: #1DA1F2;
}
.icons a.insta i{
  color: #E1306C;
}
.icons a.git i{
  color: #333;
}
.icons a.yt i{
  color: #ff0000;
}

Responsive Neumorphism Navigation Bar in HTML & CSS

CodingNepal — Fri, 25 Sep 2020 21:08:34 +0000

Hello friend, today in this blog I’m going to create a Responsive Neumorphism Navigation Bar using HTML & CSS only. In a previous blog, I have Shared How to Create a Transparent Sidebar Menu using HTML & CSS and now I’m going to create a navigation menu in neumorphism style using pure CSS.

What is a Neumorphism?

Generally, neumorphism means a minimal way to design with a soft, extruded plastic look. A navigation bar is a section where one logo and various hyperlinks exist. It allows users to quickly visit any particular section within the website.

In this program Responsive Neumorphism Navigation Bar, on the webpage, there is a logo at the top left side and some navigation links at the top right side of the navigation bar. On pc, you will see the navigation menu align in horizontal form, and on mobile devices, you will see this navigation align in vertical form. I have used only HTML & CSS.

What is the CSS code for Neumorphism UI?

Important code for Neumorphism Ui are listed below. By adding following CSS code on the elements, we can create Neumorphism UI:

background: #ecf0f3;
box-shadow: -3px -3px 7px #ffffff,
3px 3px 5px #ceced1,
inset -3px -3px 7px #ffffff,
inset 3px 3px 5px #ceced1;

To make this navigation menu responsive I have used the @media property in the CSS file. With the help of @media property, I have made the webpage responsive for all devices like tablets, mobile, and other various size devices. If you are feeling difficulty understanding this responsive navigation bar then you can watch the full video tutorial.

Neumorphism Navigation Bar | Video Tutorial

In this video [ Responsive Navigation in Neumorphism UI], you have seen a fully responsive navbar, hope you have understood the basic codes to create this type of navigation menu. You have seen in the mobile devices the navigation links appear to align vertically. There is also a button that controls the navigation bar to show or hide. To make this button I have used HTML checkbox control with a label tag.

If you have basic knowledge about Html & CSS then you can easily make this neumorphism navbar also if you have knowledge about JavaScript you can add more functionality as your choice, this is free for all of you you can use this navbar as your purpose. Those friends who are feeling difficult to make this don’t worry if you like this program [Responsive Neumorphism Navigation Bar] and want full source code files I provide them below. You can use this navigation for your HTML, webpages, or other uses.

Responsive Neumorphism Navigation Bar | Source Codes

To paste the given codes [Neumorphism Navbar], first of all, you need to create two HTML & CSS files you can copy-paste these codes in your files. If you are feeling confused you can also download the source code files from the given “download button”.




  
    
     Neumorphism Sidebar Menu | CodingLab 
    
    
   

  
  
  
    
      CodingLab
      
    
    
          Dashboard
          Shortcuts
          Overview
          Events
          About
          Services
          Contact
          Feedback

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
body{
  background: #ecf0f3;
}
nav{
  width: 100%;
  padding: 12px 0;
  background: #ecf0f3;
  box-shadow: -3px -3px 7px #ffffff,
             3px 3px 5px #ceced1,
             inset -3px -3px 7px #ffffff,
             inset 3px 3px 5px #ceced1;
}
nav .menu{
  max-width: 1270px;
  margin: auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu .logo a{
  font-size: 28px;
  font-weight: 600;
  text-decoration: none;
  color: #31344b;
}
.menu ul{
  list-style: none;
  display: flex;
}
.menu ul a{
  margin:0 8px;
  text-decoration: none;
  font-size: 18px;
  color: #31344b;
  font-weight: 400;
  display: inline-flex;
  padding: 10px 12px;
 box-shadow: -3px -3px 7px #ffffff,
            3px 3px 5px #ceced1;
  position: relative;
  transition: all 0.3s ease;
}
.menu ul a:hover:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset -3px -3px 7px #ffffff,
              inset 3px 3px 5px #ceced1;
}
.center{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.upper{
  font-size: 40px;
  font-weight: 600;
  color: #31344b;
}
.lower{
  font-size: 40px;
  font-weight: 600;
  color: #31344b;
}
.menu ul a:hover{
  color: #3498db;
}
nav label.btn{
  color: #31344b;
  font-size: 18px;
  cursor: pointer;
  display: none;
}
nav label.cancel{
  position: absolute;
  top: 25px;
  right: 30px;
}
#check{
  display: none;
}
@media (max-width:940px) {
  .menu ul{
    display: block;
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    max-width: 400px;
    padding-top: 45px;
    height: 100%;
    background: #ecf0f3;
    box-shadow: 0 5px 10px #b0b0b5;
    z-index: 12;
    transition: all 0.3s ease;
  }
  .menu ul a{
   display: block;
   font-size: 23px;
   width: 100%;
   margin-top: 30px;
   box-shadow: none;
   text-align: center;
  }
  .menu ul a:hover:before{
    box-shadow: none;
  }
  nav label.bars{
    display: block;
  }
  #check:checked ~ label.bars{
    display: none;
  }
  #check:checked ~ ul label.cancel{
    display: block;
  }
  #check:checked ~ ul{
    left: 0;
  }
}

If you face any difficulties while creating your Responsive Neumorphism Navigation Bar or your code is not working as expected, you can download the source code files for this Neumorphism Navbar for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

Neumorphism Side Bar Menu using HTML & CSS

CodingNepal — Tue, 22 Sep 2020 21:08:32 +0000

Hello guys, Today in this blog I’m going to create a sidebar menu in neumorphism style I sure you will love this, in an earlier blog I have to share Drop-down Sidebar Menu in HTML CSS and now I’m going to create a neomorphic sidebar using only HTML & CSS.

Generally, we can say a sidebar is a bar that is placed on the right or left top side of the webpage and it works from one button. The sidebar has various hyperlinks that help the user to quickly move within the page as they want. Mostly sidebar is used in small screen devices like tablets, mobile. In this context, the sidebar has become the most essential part of the website. The sidebar can be placed on the right side or left side of the page.

As you can see in the given image of the neumorphism sidebar, on the top left side there is a logo named “CodingLab” and one cancel button right side of this sidebar. At the bottom of this logo there are some hyperlinks with icons for making users convenient and also you can see at the bottom of the sidebar the are some social media icons.

Actually, at first, there is only one button placed on the top left side of the corner and when we clicked on that button sidebar appears from the left side to the right side his sliding animation also when you can hover the hyperlinks button looks like the have pressed.

If you guys are feeling difficulties understanding this program [Neumorphism Side Bar Menu], I have to provide a full video tutorial about this program, I sure your confusion will be clear after watching this video.

Video of Neumorphism Side Bar Menu using HTML & CSS only

As you have seen in the video, In first there is one button in the top left corner of the webpage. when we clicked on this button side appears with sliding animation from the left side to the right side which looks really amazing and also did you notice? the first button disappears and the cancel button appears. Basically, the First button on the webpage is used to enable the sidebar and the cancel button is used for closing the sidebar. Also then we hover the hyperlinks button looks like they have pressed actually I have done it by box-shadow property.

Guys if you are familiar with HTML & CSS you can easily create this sidebar and also if you have knowledge about JavaScript then you can add more functionality as you like. Those who are feeling difficulties creating this sidebar don’t worry I have provided source code files of this program [Side Bar Menu]. You can use this sidebar as your purpose.

Neumorphism Sidebar Menu | Source Codes

Firstly, to copy the given codes of this program [Neumorphism Side Bar Menu ], you need to create two files one is an HTML file and another is the CSS file. After creating these two files you can copy-paste the given codes. You can also download all source code files of this program [ Side Bar Menu in Neumorphism Design ] directly from the given “Download Button”.




  
    
      Neumorphism Sidebar Menu | CodingLab 
    
    
   

  
  
  
    
      CodingLab
      
    
    
          Dashboard
          Shortcuts
          Overview
          Events
          About
          Services
          Contact
          Feedback

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
body{
  background: #ecf0f3;
}
.side_bar{
  position: relative;
  top: 0;
  left: -100%;
  width: 300px;
  height: 100vh;
  background: #ecf0f3;
  padding: 12px;
  box-shadow: -3px -3px 7px #ffffff,
             3px 3px 5px #ceced1,
             inset -3px -3px 7px #ffffff,
             inset 3px 3px 5px #ceced1;
 transition: all 0.3s ease;
}
.side_bar .title{
  display: flex;
  justify-content: space-evenly;
}
.side_bar .title .logo{
  font-size: 27px;
  font-weight: 600;
  color: #31344b;
}
.side_bar ul{
  margin-top: 35px;
  list-style: none;
}
.side_bar ul a{
  color: #31344b;
  text-decoration: none;
  display: block;
  margin-top: 12px;
  font-size: 18px;
  font-weight: 400;
  padding : 10px 25px;
  border-radius: 6px;
  box-shadow: -3px -3px 7px #ffffff,
             3px 3px 5px #ceced1;
  position: relative;
  transition: all 0.2s ease;
}
.side_bar ul i{
  margin-right: 10px;
}
.media_icons{
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
.media_icons a{
  position: relative;
  margin: 0 4px;
  font-size: 17px;
  cursor: pointer;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  text-decoration: none;
  box-shadow: -3px -3px 7px #ffffff,
             3px 3px 5px #ceced1;
   transition: all 0.3s ease;
}
.side_bar ul a:hover:before,
.media_icons a:hover:before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset -3px -3px 7px #ffffff,
              inset 3px 3px 5px #ceced1;
}
.side_bar ul a:hover:before{
  border-radius: 6px;
}
.media_icons a:hover:before{
  border-radius: 50%;
}
.side_bar ul a:hover{
  color: #3498db;
}

.media_icons a:nth-child(1){
  color: #4267b2;
}
.media_icons a:nth-child(2){
  color: #1da1f2;
}
.media_icons a:nth-child(3){
  color: #e1306c;
}
.media_icons a:nth-child(4){
  color: #ff0000;
}
label{
  font-size: 17px;
  color: #31344b;
  box-shadow: -3px -3px 7px #ffffff,
             3px 3px 5px #ceced1;
  height: 37px;
  width: 37px;
  border-radius: 50%;
  text-align: center;
  line-height: 37px;
  cursor: pointer;
  transition: all 0.3s ease;
}
label:hover{
  box-shadow: inset -3px -3px 7px #ffffff,
              inset 3px 3px 5px #ceced1;
  color: #3498db;
}
#check{
  display: none;
}
.bars{
  position: absolute;
  left: 15px;
  top: 15px;
}
#check:checked ~ .side_bar{
  left: 0;
}

If you face any difficulties while creating your Neumorphism Sidebar Menu or your code is not working as expected, you can download the source code files for this Neumorphism Side Navigation Menu Bar for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

CSS3 – Neumorphism Pagination Design

CodingNepal — Tue, 07 Jul 2020 09:15:00 +0000

Hello readers, Today in this blog you’ll learn how to create a CSS3 Neumorphism Pagination using only HTML & CSS. Earlier I have also shared a blog on Simple Pagination Design using HTML & CSS. But now I’m going to create Neumorphism Pagination Design.

Pagination is the process of splitting the contents of a website, or a part of contents from a website, into discrete pages. Pagination is helpful when the website includes lots of content on a single page, that a single page will not look good with all those topics together. Nowadays, Neumorphism design is a trend and most websites are based on this neomorphic effect.

In this program (CSS3 – Neumorphism Pagination Design), at first, there is pagination on the webpage and when you click on each button there is shown a neomorphic shadow effect which indicates to the user that this tab is currently active. This pagination design is simple and there are no advanced features because this is a pure CSS program and I didn’t use JavaScript but I used jQuery to make pagination buttons clickable.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (CSS3 – Neumorphism Pagination Design).

Video Tutorial of CSS3 – Neumorphism Pagination

As you have seen in the video, this is a pure CSS program. This is simple and easy to create and I hope you’ve also understood the basic codes behind creating the Neumorphism Pagination. If you’re a beginner and you know only HTML & CSS then you can also create this type of pagination but if you know JavaScript then you can take this program to the next level by adding more and advanced features.

If you like this program (Neumorphism Pagination Design) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this program on your projects and HTML pages.

Neumorphism Pagination Design [Source Codes]

To create this program (Neumorphism Pagination Design). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.




   
      
      Neumorphism Pagination | CodingNepal
      
      
   
   
      
         
            Previous
            1
            2
            3
            4
            5
            6
            7
            8
            Next

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
  background: #dde1e7;
}
.container{
  background: #dde1e7;
  padding: 25px;
  border-radius: 3px;
  box-shadow: -3px -3px 7px #ffffff73,
              3px 3px 5px rgba(94,104,121,0.288);
}
.pagination{
  display: flex;
  list-style: none;
}
.pagination li{
  flex: 1;
  margin: 0px 5px;
  background: #dde1e7;
  border-radius: 3px;
  box-shadow: -3px -3px 7px #ffffff73,
               3px 3px 5px rgba(94,104,121,0.288);
}
.pagination li a{
  font-size: 18px;
  text-decoration: none;
  color: #4D3252;
  height: 45px;
  width: 55px;
  display: block;
  line-height: 45px;
}
.pagination li:first-child a{
  width: 120px;
}
.pagination li:last-child a{
  width: 100px;
}
.pagination li.active{
  box-shadow: inset -3px -3px 7px #ffffff73,
              inset 3px 3px 5px rgba(94,104,121,0.288);
}
.pagination li.active a{
  font-size: 17px;
  color: #6f6cde;
}
.pagination li:first-child{
  margin: 0 15px 0 0;
}
.pagination li:last-child{
  margin: 0 0 0 15px;
}

That’s all, now you’ve successfully created a CSS3 – Neumorphism Pagination Design. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

CSS3 Neomorphic Social Media Buttons

CodingNepal — Sat, 30 May 2020 13:50:00 +0000

Hello readers, Today in this blog you’ll learn how to create Neumorphic Social Media Buttons using HTML & CSS only. Earlier I have shared a CSS3 Neumorphism Login Form Design. Now it’s time to create Neumorphic Social Media Buttons.

The Social links and buttons enable your website visitors and content viewers to easily share your content with their social media connections and networks.

Today in this blog, I’ll share with you a Neomorphic Social Media Buttons. These Social Media Buttons are created only for design purposes. There is no action and it won’t redirect you to any other sites when you triggered on those buttons.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (CSS3 Neumorphic Social Media Buttons).

Video Tutorial of Neumorphic Social Media Buttons

I hope you have understood the basic codes of this Neumorphic effect. There are no vast codes, there are creative role box-shadows only. If you’re a beginner and you have little knowledge of HTML & CSS only then you can also create this type of Neumorphic Effect on Buttons, Social Media Icons, Cards, etc. You can add the link of your social site inside the href attribute of anchor tag if you want to redirect users or viewers when they click on the specific button.

If you like this Neumorphsim UI Design and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Neomorphic Social Media Icons [Source Codes]

To create this program (Neumorphism Social Media Buttons). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




   
      
      CSS3 - Neumorphic Social Icons

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  background: #dde1e7;
  width: 100%;
}
.icons{
  display: flex;
  margin: 40px 0;
}
li{
  position: relative;
  list-style: none;
  height: 70px;
  width: 70px;
  margin: 0 10px;
  border-radius: 50%;
  background: #dde1e7;
  cursor: pointer;
  box-shadow: -3px -3px 7px #ffffff73,
              3px 3px 5px rgba(94,104,121,0.288);
}
li a{
  line-height: 70px;
  font-size: 27px;
  color: #b6bbc5;
}
.first li.shadow-1{
  box-shadow: inset -3px -3px 7px #ffffff73,
              inset 3px 3px 5px rgba(94,104,121,0.288);
}
.first li.shadow-1 a{
  font-size: 25px;
}
.second li.shadow-2 a{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 55px;
  width: 55px;
  line-height: 55px;
  border-radius: 50%;
  background: #dde1e7;
  font-size: 24px;
  box-shadow: inset -3px -3px 7px #ffffff73,
              inset 3px 3px 5px rgba(94,104,121,0.288);
}
li:nth-child(1).fill-color a{
  color: #4267B2;
}
li:nth-child(2).fill-color a{
  color: #1DA1F2;
}
li:nth-child(3).fill-color a{
  color: #E1306C;
}
li:nth-child(4).fill-color a{
  color: #2867B2;
}
li:nth-child(5).fill-color a{
  color: #333;
}

That’s all, now you’ve successfully created CSS3 Neomorphic Social Media Buttons. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Neumorphism Login Form UI Design using HTML & CSS

CodingNepal — Mon, 11 May 2020 15:43:00 +0000

Hello readers, Today in this blog you’ll learn how to create a Neumorphism Login Form Design in HTML & CSS. Earlier I have shared an Animated Glowing Inputs Border Login Form Design using only HTML & CSS, now it’s time to create a Neumorphism Login Form UI Design in HTML & CSS.

The Neomorphism effect is a mixture of the current famous flat UI and the old skeuomorphic principles! The parts have a dark box-shadow on the bottom and a light box-shadow on top; the combination of both creates the effect of the elements pushing themselves through your display.

As you can see in the image, this is a Light Neumorphism Login Form created using only HTML & CSS. Basically, In our Light Neumorphism Login, there are some icons like user and password. This Login Form is created only for design purposes.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Neumorphism Login Form UI Design).

Video Tutorial of Neumorphism Login Form Design

If you like this program (Neumorphism Login Form UI Design) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

If you’re a beginner and have some basic knowledge about HTML & CSS only, then you can also create this type of login form where there is no function and action.

You Might Like This:

Neumorphism Login Form in HTML & CSS [Source Codes]

To create this Neumorphism Login Form Design. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




   
      
      
      
      
   
   
      
         
            Login Form
         
         
            
               
               
               Email or Phone
            
            
               
               
               Password
            
            
               Forgot Password?
            
            
            
               Not a member?
               signup now

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  /* user-select: none; */
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  height: 100%;
}
body{
  display: grid;
  place-items: center;
  background: #dde1e7;
  text-align: center;
}
.content{
  width: 330px;
  padding: 40px 30px;
  background: #dde1e7;
  border-radius: 10px;
  box-shadow: -3px -3px 7px #ffffff73,
               2px 2px 5px rgba(94,104,121,0.288);
}
.content .text{
  font-size: 33px;
  font-weight: 600;
  margin-bottom: 35px;
  color: #595959;
}
.field{
  height: 50px;
  width: 100%;
  display: flex;
  position: relative;
}
.field:nth-child(2){
  margin-top: 20px;
}
.field input{
  height: 100%;
  width: 100%;
  padding-left: 45px;
  outline: none;
  border: none;
  font-size: 18px;
  background: #dde1e7;
  color: #595959;
  border-radius: 25px;
  box-shadow: inset 2px 2px 5px #BABECC,
              inset -5px -5px 10px #ffffff73;
}
.field input:focus{
  box-shadow: inset 1px 1px 2px #BABECC,
              inset -1px -1px 2px #ffffff73;
}
.field span{
  position: absolute;
  color: #595959;
  width: 50px;
  line-height: 50px;
}
.field label{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 45px;
  pointer-events: none;
  color: #666666;
}
.field input:valid ~ label{
  opacity: 0;
}
.forgot-pass{
  text-align: left;
  margin: 10px 0 10px 5px;
}
.forgot-pass a{
  font-size: 16px;
  color: #3498db;
  text-decoration: none;
}
.forgot-pass:hover a{
  text-decoration: underline;
}
button{
  margin: 15px 0;
  width: 100%;
  height: 50px;
  font-size: 18px;
  line-height: 50px;
  font-weight: 600;
  background: #dde1e7;
  border-radius: 25px;
  border: none;
  outline: none;
  cursor: pointer;
  color: #595959;
  box-shadow: 2px 2px 5px #BABECC,
             -5px -5px 10px #ffffff73;
}
button:focus{
  color: #3498db;
  box-shadow: inset 2px 2px 5px #BABECC,
             inset -5px -5px 10px #ffffff73;
}
.sign-up{
  margin: 10px 0;
  color: #595959;
  font-size: 16px;
}
.sign-up a{
  color: #3498db;
  text-decoration: none;
}
.sign-up a:hover{
  text-decoration: underline;
}

That’s all, now you’ve successfully created a Neumorphism Login Form UI Design using HTML & CSS. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Working Analog Clock using HTML CSS & JavaScript

CodingNepal — Tue, 05 May 2020 15:24:00 +0000

Hello readers, Today in this blog you’ll learn how to build a Working Analog Clock using HTML CSS & Javascript. Earlier I have shared a Working Digital Clock using HTML CSS & Javascript, now it’s time to create a Working Analog Clock using Javascript.

A clock or watch is called “analog” when it has moving hands and (normally) hours marked from 1 to 12 to show you the time. Some have Roman Numerals (I, II, III, etc) instead, or no numbers at all.

As you can see in the image, this is an Analog Clock that is based on HTML CSS & Javascript. There are 12 marks for showing times 1 to 12 and 3 handles for showing minutes, hours, and second. As usual, the hour handle is small, and the minute handle is bigger than that, and the second handle larger overall.

If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Working Analog Clock).

Video Tutorial of Working Analog Clock using JavaScript

As you see in the video this is a real-time working clock. This time takes from your PC, not from the server. I am sharing this live clock program, which functions is work in javascript. I had already shared many Javascript projects, click here to watch them all.

If you like this program (Working Analog Clock) and want to get the source codes of this program. You can easily get it from the download link which is given below.

Working Analog Clock in HTML CSS & JavaScript [Source Codes]

To create this program (Working Analog Clock). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




   
      
      Neumorphism Analog Clock | CodingNepal

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body{
  height: 100%;
}
body{
  display: grid;
  place-items: center;
  background: #dde1e7;
  text-align: center;
}
.clock{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dde1e7;
  height: 250px;
  width: 250px;
  border-radius: 50%;
  box-shadow: -3px -3px 7px #ffffff73,
              3px 3px 5px rgba(94,104,121,0.288);
}
.clock:before{
  position: absolute;
  content: '';
  height: 220px;
  width: 220px;
  background: #dde1e7;
  border-radius: 50%;
  box-shadow: inset -3px -3px 7px #ffffff73,
              inset 3px 3px 5px rgba(94,104,121,0.288);
}
.clock:after{
  position: absolute;
  content: '';
  height: 120px;
  width: 120px;
  background: #dde1e7;
  border-radius: 50%;
  box-shadow: -1px -1px 5px #ffffff73,
              1px 1px 3px rgba(94,104,121,0.288);
}
.clock .center-nut{
  height: 15px;
  width: 15px;
  background: #404040;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
}
.clock .center-nut2{
  height: 9px;
  width: 9px;
  background: #3498db;
  border-radius: 50%;
  z-index: 15;
  position: absolute;
}
.indicators div{
  position: absolute;
  width: 2px;
  height: 5px;
  background: #404040;
}
.indicators div:nth-child(1){
  transform: rotate(30deg) translateY(-100px);
}
.indicators div:nth-child(2){
  transform: rotate(60deg) translateY(-100px);
}
.indicators div:nth-child(3){
  background: #3498db;
  transform: rotate(90deg) translateY(-100px);
}
.indicators div:nth-child(4){
  transform: rotate(120deg) translateY(-100px);
}
.indicators div:nth-child(5){
  transform: rotate(150deg) translateY(-100px);
}
.indicators div:nth-child(6){
  background: #3498db;
  transform: rotate(180deg) translateY(-100px);
}
.indicators div:nth-child(7){
  transform: rotate(210deg) translateY(-100px);
}
.indicators div:nth-child(8){
  transform: rotate(240deg) translateY(-100px);
}
.indicators div:nth-child(9){
  background: #3498db;
  transform: rotate(270deg) translateY(-100px);
}
.indicators div:nth-child(10){
  transform: rotate(300deg) translateY(-100px);
}
.indicators div:nth-child(11){
  transform: rotate(330deg) translateY(-100px);
}
.indicators div:nth-child(12){
  background: #3498db;
  transform: rotate(360deg) translateY(-100px);
}
.sec-hand,.min-hand,.hr-hand{
  position: absolute;
}
.sec-hand, .sec{
  height: 180px;
  width: 180px;
  z-index: 6;
}
.min-hand, .min{
  height: 140px;
  width: 140px;
  z-index: 5;
}
.hr-hand, .hr{
  height: 110px;
  width: 110px;
  z-index: 4;
}
.sec,.min,.hr{
  display: flex;
  justify-content: center;
  position: absolute;
}
.sec:before{
  position: absolute;
  content: '';
  height: 110px;
  width: 3px;
  background: #3498db;
}
.sec:after{
  position: absolute;
  content: '';
  height: 35px;
  width: 7px;
  background: #3498db;
  top: 105px;
  border-radius: 5px;
}
.min:before{
  position: absolute;
  content: '';
  width: 1px;
  top: -15px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 60px solid #e95949;
}
.min:after{
  position: absolute;
  content: '';
  width: 3px;
  top: 40px;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: 30px solid #e95949;
}
.hr:before{
  position: absolute;
  content: '';
  width: 1px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 35px solid #303030;
}
.hr:after{
  position: absolute;
  content: '';
  width: 3px;
  top: 34px;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: 25px solid #303030;
}

That’s all, now you’ve successfully created a Working Analog Clock using HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Digital Clock using HTML CSS & Javascript

CodingNepal — Sun, 26 Apr 2020 15:47:00 +0000

Hello readers, Today in this blog you’ll learn how to create a Digital Working Clock using Javascript. Earlier I have shared a Working Analog Clock using HTML CSS & Javascript, now it’s time to create a Digital Clock using Javascript.

JavaScript gets real-time from your device and displays it on the webpage. And this post is about how JavaScript gets the time and displays with some basics ways. As you can see in the image, there is a real-time digital clock, which means you can see time in number with hour, minutes, and seconds.

And the clock run normally you don’t have to refresh the webpage to see the updated time. There is just a time in numbers format and am pm indicator. If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Digital Clock).

Video Tutorial of Digital Clock using Javascript

As you can see in the video this is a real-time working digital clock with ‘Am’ and ‘PM’ indicators. I hope this video help beginner to understand the code behind the working digital clock.

You can use it in your sites and projects after a few changes of codes according to your requirements. And I believe you can take this digital clock at the next level with your creativity. If you like this program (Digital Clock) and want to get the source codes of this program. You can easily get it from the download link which is given below.

Working Digital Clock using Javascript [Source Codes]

To create this program (Digital Clock). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body{
  height: 100%;
}
body{
  display: grid;
  place-items: center;
  background: #131419;
}
.clock{
  background: #131419;
  height: 120px;
  
  line-height: 120px;
  text-align: center;
  padding: 0 30px;
  box-shadow: -3px -3px 7px rgba(255,255,255,0.05),
               3px 3px 5px rgba(0,0,0,0.5);
}
.clock .display{
  font-size: 60px;
  color: cyan;
  letter-spacing: 5px;
  font-family: 'Orbitron', sans-serif;
}

That’s all, now you’ve successfully created a Digital Clock using HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Neumorphism Design – CodingNepal

Neumorphism Profile Card UI Design using only HTML & CSS

Video Tutorial of Neumorphism Profile Card UI Design

You might like this:

Neumorphism Profile Card UI Design [Source Codes]

Neumorphism Effect on Social Media Icons CSS

Video Tutorial Neumorphism Effect on Social Media Icons CSS

You Might Like This:

Hover Effect o Social Media Icons [Source Codes]

Responsive Neumorphism Navigation Bar in HTML & CSS

What is a Neumorphism?

What is the CSS code for Neumorphism UI?

Neumorphism Navigation Bar | Video Tutorial

You Might Like This:

Responsive Neumorphism Navigation Bar | Source Codes

Neumorphism Side Bar Menu using HTML & CSS

Video of Neumorphism Side Bar Menu using HTML & CSS only

You Might Like This:

Neumorphism Sidebar Menu | Source Codes

CSS3 – Neumorphism Pagination Design

Video Tutorial of CSS3 – Neumorphism Pagination

You might like this:

Neumorphism Pagination Design [Source Codes]

CSS3 Neomorphic Social Media Buttons

Video Tutorial of Neumorphic Social Media Buttons

Neomorphic Social Media Icons [Source Codes]

Neumorphism Login Form UI Design using HTML & CSS

Video Tutorial of Neumorphism Login Form Design

Neumorphism Login Form in HTML & CSS [Source Codes]

Working Analog Clock using HTML CSS & JavaScript

Video Tutorial of Working Analog Clock using JavaScript

Working Analog Clock in HTML CSS & JavaScript [Source Codes]

Digital Clock using HTML CSS & Javascript

Video Tutorial of Digital Clock using Javascript

Working Digital Clock using Javascript [Source Codes]