HTML AND CSS, YouTube

How to create Magic Card using html and CSS

How-to-create-Magic-Card-using-html-and-CSS

Coding BD given How to create Magic Card using html and CSS. You can Build a CSS User Card. It is the most important part Of Magic Card using html and CSS. Here we use html and css, We have given more importance to Creative CSS Effects. You can Learn How to create Magic Card using html and CSS. They were an important part of our team page html template,  because they needed to be Html5 Css3 Tips and Tricks. I hope You enjoy this video. If you enjoy our video please like, share & subscribe to our channel. Thank you so much.

😍😍 If You like this video Please like, share and subscribe This video.😍😍

😍😍 Check Others Programming Video👇

➡️ css image hover animation effects | pure css hover animation: https://www.youtube.com/watch?v=AUQQ5WBXtPw 

➡️ how to create css gradient box shadow: https://www.youtube.com/watch?v=8oaLBBhLNi0 

➡️ Sticky Navigation Bar On Scroll Using Vanilla Javascript: https://www.youtube.com/watch?v=XQJSc–XgO8  

➡️ How to Download Source code in Coding BD: https://www.youtube.com/watch?v=WXAZ-BScKBE&t=3s  

➡️Responsive website html css javascript | part( 1 ): https://www.youtube.com/watch?v=g0ART2Jc3yw&t=3s 

➡️ Responsive Services Section:  https://www.youtube.com/watch?v=wvLkyrkoS_w&t=69s 

Plane animation only html css: https://www.youtube.com/watch?v=XcYlfp8sFX0 

➡️ CSS Responsive CARD Hover Effects & Adding Stroke to Text | Html5 CSS3 2021: https://www.youtube.com/watch?v=QVMJ5PdX7Ag&t=14s 

➡️  Neon Light Button Animation Effects on Hover | CSS Snake Border: https://www.youtube.com/watch?v=GtVSF-efdJQ&t=102s 

➡️ Responsive Box Model Web Design Using CSS Flexbox: https://www.youtube.com/watch?v=03RuVB6B5KQ&t=0s 

➡️ Digital Clock with Animated Progress-bar | HTML CSS & Vanilla Javascript:  https://www.youtube.com/watch?v=6A6HpxMmfX4&t=0s 

➡️ How to create a light to dark mode for HTML CSS & Vanilla Javascript 2021: https://www.youtube.com/watch?v=43FbR6ailIk&t=28s  

➡️ Scroll top button : https://www.youtube.com/watch?v=9fDEJkXQIIs&t=77s

Here is all Source code ( Social media icon with popup ). You can follow this steps:

  1. Create 1 folder
  2. create 1 HTML file: index.html
  3. create 1 CSS file: style.css
  4. See Full video and write HTML code and copy CSS code and past CSS file
  5. Now give a smile and jump out loud. 😍😍
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to create Magic Card using html and CSS</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="card">
        Coding BD
    </div>
</body>

</html>
:root {
  --card-height: 450px;
  --card-width: calc(var(--card-height) / 1.5);
}

@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

body {
  min-height: 100vh;
  background: #212534;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
  box-sizing: border-box;
}

.card {
  background: #191c29;
  width: var(--card-width);
  height: var(--card-height);
  padding: 3px;
  position: relative;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  color: rgb(88 199 250 / 0%);
  cursor: pointer;
  font-family: cursive;
  transition: color 0.5s;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  -webkit-transition: color 0.5s;
  -moz-transition: color 0.5s;
  -ms-transition: color 0.5s;
  -o-transition: color 0.5s;
}

.card:hover {
  color: rgb(88 199 250 / 100%);
}

.card::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotate),
    #5ddcff,
    #3c67e3 43%,
    #4e00c2
  );
  position: absolute;
  z-index: -1;
  top: -1%;
  left: -2%;
  animation: spin 2.5s linear infinite;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  -webkit-animation: spin 2.5s linear infinite;
}

.card::after {
  position: absolute;
  content: "";
  top: calc(--card-height) / 6;
  left: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(var(--card-height) / 6);
  background-image: linear-gradient(
    var(--rotate),
    #5ddcff,
    #3c67e3 43%,
    #4e00c2
  );
  opacity: 1;
  -transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-filter: blur(var(--card-height) / 6);
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
}

.card:hover::before,
.card:hover::after {
  animation: none;
  opacity: 0;
  -webkit-animation: none;
}

@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}

Don’t Forget to Follow me on all Social Network

YouTube: https://www.youtube.com/c/CodingBD

Facebook Page: https://www.facebook.com/codingbd2021

LinkedIn: https://www.linkedin.com/in/sajjat8383

GitHub: https://github.com/cgsaleh8383

You can see css image hover overlay effects

Leave a Reply

Your email address will not be published. Required fields are marked *