cool magic card using css
cool magic card using css

Hy Guys, Today we are going to create a card. It will have an animated glow behind the card. The information on the card will be shown after hovering. We will create it using HTML & CSS, Let’s Start!

Table of Contents

Cool Magic Card Using CSS

What is Animation in CSS?

CSS allows us to animate HTML elements without using JavaScript or Flash. An animation shall be an element gradually exchanged from one style to some other. You may alternate as many CSS homes you want, as usually as you want. To apply CSS animation, you must first specify a few keyframes for the animation. Keyframes keep what patterns the element could have at sure times.

What is the @keyframe rule?

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.

To get an animation to work, you must bind the animation to an element.

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

Here spin is the name of the animation.

what is ::before selector?

The ::before selector inserts something before the content of each selected element(s).

.card::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
}

What is ::after selector?

The ::after selector inserts something after the content of each selected element(s).

.card::after {
  position: absolute;
  transform: scale(0.8);
}

What is @property ?

The browser then knows this specific custom property is an angle rather than a string. It can be other useful stuff like <integer> and <color>. Now that we have a way to communicate this sort of information to the browser, we get some new abilities, like being able to transition between two values.

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

Cool Magic Card Code:

For creating a magic card effect we need to create two files called index.html and style.css then paste this code to the files.

index.html

<!DOCTYPE html>
<head>
  <title>Cool Magic Card</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="card">
    <h3>CodeDesignerWorld</h3>
    <span>Learn HTML, CSS & JAVASCRIPT</span>
  </div>
</body>
</html>

Here we had created a div as a class name ‘card’ and two child elements h3 and span.

style.css

@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}
:root {
  --card-height: 60vh;
  --card-width: calc(var(--card-height) / 1.6);
}
body {
  min-height: 100vh;
  background: #212534;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 2rem;
  padding-bottom: 2rem;
  box-sizing: border-box;
}
.card {
  background: #191c29;
  width: var(--card-width);
  height: var(--card-height);
  padding: 3px;
  margin-top: 50px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.3em;
  color: rgb(88 199 250 / 0%);
  cursor: pointer;
  text-align: center;
  display: block;
}
.card:hover {
  color: rgb(88 199 250 / 100%);
  transition: color 1s;
}
.card:hover:before, .card:hover:after {
  animation: none;
  opacity: 0;
}
.card h3{
  letter-spacing: 0.5px;
}
.card span{
  font-size: 13px;
}
.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;
}

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

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

a {
  color: #212534;
  text-decoration: none;
  font-family: sans-serif;
  font-weight: bold;
  margin-top: 2rem;
}

Code is also available on GitHub Click here!

Read Our Previous Post on Walking Animation Using Javascript.

Hope Post was helpful, If you like it please comment and share it with your friends.

Thank You 🙂

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply