Glassmorphism ui – CodingNepal

Flipping Card UI Design in HTML & CSS

CodingNepal — Mon, 24 Oct 2022 21:11:20 +0000

Hey buddy, I hope you are doing are creating an exciting project. Today I have brought a beautiful project for you. Bascially today you will learn to create a Card with Flipping Animation in HTML CSS and JavaScript. There are lots of other Card designs I have already created before.

A card is a section that can be square or rectangular and contains some vital information about a particular. Cards can be in various types like profile cards, product cards,s and the least goes on.

Take a look at the given image of our project [Flipping Card UI Design]. As you can see there are two beautiful gradients two balls and between them, there is a card with grassmorphism UI. In the card, there is a master card logo, chip, and some card owner details like card number, name, and the valid date of the card. The interesting part of this project is when you hover over the card it will flid and the back side of the card visible. On the back side of that card, I have added some other information as well.

To see the real demo of this card and how it flips and the back part of this card, you can watch the given video tutorial of this project [Flipping Card UI Design], that I have given below. After watching the given video tutorial, you also get the idea, of how all the HTML and CSS code is working behind it.

Flipping Card UI Design in HTML & CSS | Video Tutorial

I have provided all the HTML and CSS code that I have used to create this project [Flipping Card UI Design], before jumping into the source code file. I would like to briefly explain the given video.

As you have seen in the video tutorial of this project [Flipping Card UI Design]. At first on the screen we saw, there were two gradient balls. Between those two balls, there was our card with some basic information that debit cards need to have like name, card number, expiry date, and others. When I hover over the card, it flipped and the back part of the card visibled. On the back part, there is some other information that typical has.

As you have seen, how I created those two balls. the card and its UI design and the code that is used to flip it by using only HTML and CSS. I hope you also can create this type of card with flipping animation on hove by using HTML and CSS. If you are feeling difficulty to create this project [Flipping Card UI Design], I have provided all the HTML and CSS code and all the images that I have used to create this Card, which you can find below.

Flipping Card UI Design [Source Codes]

To create a Flipping Card UI Design using HTML and CSS, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source codes of this Border Loading Animation by clicking on the given download button.

First, paste the following codes into your index.html file




  
    
    
    
    Flipping Card UI Design
    
  
  
    
      
        
          
            
              
              Master Card
            
           
          

          
            
              Card Number
              8050 2030 3020 5040
              Prem Kumar Shahi
            

            
              Valid Thru
              05/28
            
          
        

        
          
            For customer service call +977 4343 3433 or email at
            mastercard@gmail.com
          
          
          005
          
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia
            maiores sed doloremque nesciunt neque beatae voluptatibus doloribus.
            Libero et quis magni magnam nihil temporibus? Facere consectetur
            dolore reiciendis et veniam.

/* Import Google Font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background: #121321;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  perspective: 1000px;
}
section::before {
  content: "";
  position: absolute;
  height: 240px;
  width: 240px;
  border-radius: 50%;
  transform: translate(-150px, -100px);
  background: linear-gradient(90deg, #9c27b0, #f3f5f5);
}
section::after {
  content: "";
  position: absolute;
  height: 240px;
  width: 240px;
  border-radius: 50%;
  transform: translate(150px, 100px);
  background: linear-gradient(90deg, #9c27b0, #f3f5f5);
}
.container {
  position: relative;
  height: 225px;
  width: 375px;
  z-index: 100;
  transition: 0.6s;
  transform-style: preserve-3d;
}
.container:hover {
  transform: rotateY(180deg);
}
.container .card {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 25px;
  border-radius: 25px;
  backdrop-filter: blur(25px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backface-visibility: hidden;
}
.front-face header,
.front-face .logo {
  display: flex;
  align-items: center;
}
.front-face header {
  justify-content: space-between;
}
.front-face .logo img {
  width: 48px;
  margin-right: 10px;
}
h5 {
  font-size: 16px;
  font-weight: 400;
}
.front-face .chip {
  width: 50px;
}
.front-face .card-details {
  display: flex;
  margin-top: 40px;
  align-items: flex-end;
  justify-content: space-between;
}
h6 {
  font-size: 10px;
  font-weight: 400;
}
h5.number {
  font-size: 18px;
  letter-spacing: 1px;
}
h5.name {
  margin-top: 20px;
}
.card.back-face {
  border: none;
  padding: 15px 25px 25px 25px;
  transform: rotateY(180deg);
}
.card.back-face h6 {
  font-size: 8px;
}
.card.back-face .magnetic-strip {
  position: absolute;
  top: 40px;
  left: 0;
  height: 45px;
  width: 100%;
  background: #000;
}
.card.back-face .signature {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 80px;
  height: 40px;
  width: 85%;
  border-radius: 6px;
  background: repeating-linear-gradient(
    #fff,
    #fff 3px,
    #efefef 0px,
    #efefef 9px
  );
}
.signature i {
  color: #000;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 4px;
  background-color: #fff;
  margin-right: -30px;
  z-index: -1;
}
.card.back-face h5 {
  font-size: 8px;
  margin-top: 15px;
}

If you face any difficulties while creating your Credit Card or your code is not working as expected, you can download the source code files for this Card 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.

View Live Demo

Glassmorphism Website Design in HTML and CSS

CodingNepal — Mon, 31 Jan 2022 21:09:36 +0000

Q: How can I create a Glassmorphism website using HTML and CSS?

A: After reading and watching the following article and video tutorial, you will definitely able to create glassmorphism website by using HTML and CSS.

Hello Readers, today in this blog I will create a responsive website with the help of HTML & CSS and this website looks will be in glass morphism UI. Earlier I have shared How to Create a Simple Website using HTML & CSS now it’s time to create glassmorphism website.

What is Glassmorphism?

Glassmorphism is the latest trend on UI designs in where UI Designs’ background is a blur and we can see what is in the background. Basically, Glassmorphism is the combination of two words “Glass” and “Morphism”. That why glassmorphism design looks neither transparent nor solid. Codes for the glassmorphism design.

background: rgba(255, 255, 255, 0.1);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
border-top: 1px solid rgba(255, 255, 255, 0.5);
border-left: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(5px);

As you can see on the given image of this program [Glassmorphism Website Design], on the web page. On the top side, there is on navbar with some logos, hyperlinks, and two-button. Under the navigation menu, there is some text and at the bottom right side, there is one play button and some text. You can see in the outer top left corner and right bottom corner, there are two circles which give more attraction.

You want to know all this design on this program [Responsive Website Design], I have provided a full video tutorial of this program below. You will get all ideas and code behind this program [Responsive Gassmorphism Website],

Glassmorphism Website Design in HTML and CSS | Video Tutorial

As you have seen on the given video of this program [Responsive Website in HTML CSS], When i hovered on the hyperlink its color change smoothly and this is fully responsive, (Responsive means this website can fit in all sizes screen).

If You are familiar with HTML CSS then you can easily build this program [Website Design ]. Those friends who are feeling difficulty make this program, don’t worry I have provided all source code file below.

Glassmorphism Website Design | Source Code

To copy-paste all the code of this program [Glass Morphism Website Design], first of all, you need to create two files, one is an HTML file and another is a CSS file. After creating these two files you can easily copy-paste the given codes. You can also download all source code directly click on the given “Download Button”.

How To Create Gassmorphism Website in HTML?

Create an HTML file on your computer with the name index.html and copy-paste the given codes in your HTML document.




  
    
     Glassmorphism Website | CodingLab 
    
    
     
   

  
    
      LOGO>
      
        Home
        Latest
        Offers
        Services
        Contact
      
      
        
        
      
    
    
      Learn To Enjoy,
Every Moment Of Your Life
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum facere in nam, officiis aspernatur consectetur aliquid sequi possimus et. Sint.
    
    
      Play Video

Create a CSS file with the name of index.html on your computer and copy-paste the given codes in your CSS file.

@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;
  transition: all 0.3s ease;
}
body{
  height: 100vh;;
  width: 100%;
  display: flex;
  background-image: linear-gradient( 135deg, #ff9a9e  10%, #F6416C 100%);
}
::selection{
  color: #f2f2f2;
  background: #f86d8d;
}
body::before,
body::after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
body::before{
  clip-path: circle(30% at left 20%);
  opacity: 0.4;
  background-image: linear-gradient( 135deg, #F6416C 10%, #ff9a9e 100%);
}
body::after{
  opacity: 0.4;
  clip-path: circle(25% at right 80%);
  background-image: linear-gradient( 135deg, #F6416C 10%, #ff9a9e 100%);
}
header{
  height: 85vh;
  width: 90%;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  z-index: 12;
  border-radius: 25px;
  margin: auto;
  position: relative;
}
header .navbar{
  margin: auto;
  width: 100%;
  padding: 35px 50px;
  border-radius: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navbar .menu{
  display: flex;
  flex-wrap: wrap;
}
.navbar .logo a{
  text-decoration: none;
  font-size: 22px;
  color: #000;
  font-weight: 500;
}
.navbar .menu li{
  list-style: none;
  margin: 0 6px;
}
.navbar .menu a{
  color: #000;
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
  transition: all 0.3s ease;
}
.navbar .menu a:hover{
  color: #f2f2f2;
}
.navbar .buttons input{
  outline: none;
  color: #f2f2f2;
  font-size: 18px;
  font-weight: 500;
  border-radius: 12px;
  padding: 6px 15px;
  border: none;
  margin: 0 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-image: linear-gradient( 135deg, #ff9a9e  10%, #F6416C 100%);
}
.navbar .buttons input:hover{
  transform: scale(0.97);
}
 header .text-content{
   width: 40%;
   margin: 100px 0 0 50px ;
 }
.text-content h2{
  font-size: 27px;
  font-weight: 600;
}
.text-content p{
  font-size: 15px;
  margin-top: 10px;
}
header .play-button{
  position: absolute;
  right: 50px;
  bottom: 40px;
}
.play-button .play{
  font-size: 18px;
  font-weight: 500;
}
 .play-button .play::before{
   content: '';
   position: absolute;
   height: 3px;
   width: 50px;
   top: 50%;
   transform: translateY(-50%);
   left: -58px;
   background: #000;
 }
.play-button i{
  height: 40px;
  width: 40px;
  border: 2px solid #000;
  line-height: 38px;
  text-align: center;
  margin-left: 10px;
  border-radius: 6px;
  cursor: pointer;
}
@media (max-width:850px) {
  header .navbar{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
  }
  .navbar .menu {
    margin: 10px 0 20px 0;
  }
  header .text-content{
    margin: 30px 0 0 20px ;
    width: 70%;
  }
  header .text-content h2{
    font-size: 20px;
  }
}
@media (max-width:410px) {
  header{
    height: 100vh;
    width: 100%;
    border-radius: 0px;
  }
  header .navbar{
    padding: 15px 10px;
}
}

Click on the following download button then glassmorphism source code file automatically starts to download. After it downloads, just you need to unzip all the files.

How To Make Calculator using HTML CSS & JavaScript | Glass Morphism

CodingNepal — Thu, 04 Feb 2021 21:09:38 +0000

Hello Readers, welcome to my new blog, today in this blog I’m going to make a calculator using HTML CSS & JavaScript. Earlier I have shared, How To Make a Responsive Website With HTML & CSS, that website was in glassmorphism UI, and now this calculator design is also in glass morphism UI.

As we know, a Calculator is a mechanical device that is used to calculate numerical numbers. There are various types and designs of calculators that we can found but the main motive of the calculator is calculation.

As you can see on the given image of this program [Glasss Morphism Calculator], on the webpage. There is one calculator design in glassmorphism UI. All essential buttons are available there like addition, subtraction, multiplication, divide, and so on. These all buttons worked perfectly. Those different sizes of small boxes around that calculator make this glassmorphism design of the calculator really awesome. These all small boxes move upward direction continuously.

If you want the real animation of these small boxes and the code behind making this calculator, you can watch the full video tutorial of this program [Animated Glass Morphism Calculator].

Tutorial of Calculator using HTML CSS & JavaScript

As you have seen in the video tutorial of this program, This calculator works perfectly. To make this I have used simple javascript code to make it easier for everybody. Those small boxes around this calculator animated very nicely which helps to make this glass morphism calculator more attractive. I have also added a hover effect on every button in glassmorphism effect.

Those friend whos are familiar with HTML CSS & JavaScript, they build this program [ Working Calculator ], If you are feeling difficulties to create this program, don’t worry I have provided full source code below.

Glassmorphism Calculator [ Source Code ]

To copy-paste the given codes of this program [JavaScript Calculator], first of all, you need to create two files, one is an HTML file and another is a CSS file, after creating these two files you can copy-paste the all given codes easily. You can also download all source code files from the given “Download Button ” directly.




  
    
      Glassmorphism Calculator| CodingLab

@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{
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(#2196f3 , #e91e63);
}
.bubbles{
  position: absolute;
  bottom: -120px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 70px;
  width: 100%;
  justify-content: space-around;
}
.bubbles span{
  height: 60px;
  width: 60px;
  background: rgba(255, 255, 255, 0.1);
  animation: move 10s linear infinite;
  position: relative;
  overflow: hidden;
}
@keyframes move {
  100%{
    transform: translateY(-100vh);
  }
}
.bubbles span.one{
  animation-delay: 2.2s;
  transform: scale(2.15)
}
.bubbles span.two{
  animation-delay: 3.5s;
  transform: scale(1.55)
}
.bubbles span.three{
  animation-delay: 0.2s;
  transform: scale(0.35)
}
.bubbles span.four{
  animation-delay: 6s;
  transform: scale(2.15)
}
.bubbles span.five{
  animation-delay: 7s;
  transform: scale(0.5)
}
.bubbles span.six{
  animation-delay: 4s;
  transform: scale(2.5)
}
.bubbles span.seven{
  animation-delay: 3
  transform: scale(1.5)
}
.bubbles span:before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 60px;
  width: 40%;
  transform: skew(45deg) translateX(150px);
  background: rgba(255, 255, 255, 0.15);
  animation: mirror 3s linear infinite;
}
@keyframes mirror {
  100%{
    transform: translateX(-450px);
  }
}
.bubbles span.one:before{
  animation-delay: 1.5s;
}
.bubbles span.two:before{
  animation-delay: 3.5s;
}
.bubbles span.three:before{
  animation-delay: 2.5s;
}
.bubbles span.four:before{
  animation-delay: 7.5s;
}
.bubbles span.five:before{
  animation-delay: 4.5s;
}
.bubbles span.six:before{
  animation-delay: 0.5s;
}
.bubbles span.seven:before{
  animation-delay: 6s;
}
.container{
  z-index: 12;
  width: 360px;
  padding: 15px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
}
.container input[type="text"]{
  width: 100%;
  height: 100px;
  margin: 0 3px;
  outline: none;
  border: none;
  color: #fff;
  font-size: 20px;
  text-align: right;
  padding-right: 10px;
  pointer-events: none;
  background: transparent;
}
.container input[type="button"]{
  height: 65px;
  color: #fff;
  width: calc(100% / 4 - 5px);
  background: transparent;
  border-radius: 12px;
  margin-top: 15px;
  outline: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.container input[type="button"]:hover{
  background: rgba(255, 255, 255, 0.1);
}

If you face any difficulties while creating your Calculator or your code is not working as expected, you can download the source code files for this Glassmorphism Calculator 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.

Glassmorphism ui – CodingNepal

Flipping Card UI Design in HTML & CSS

Flipping Card UI Design in HTML & CSS | Video Tutorial

You May Like This:

Flipping Card UI Design [Source Codes]

Master Card

Card Number

8050 2030 3020 5040

Prem Kumar Shahi

Valid Thru

05/28

For customer service call +977 4343 3433 or email at mastercard@gmail.com

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia maiores sed doloremque nesciunt neque beatae voluptatibus doloribus. Libero et quis magni magnam nihil temporibus? Facere consectetur dolore reiciendis et veniam.