How To Create Glow Shadow Effect Step-By-Step

C++ Mastery
Author - C++ Mastery
September 04, 2023
0

                         How To Create Glow Shadow



Introduction:

Welcome to C++ Mastery! In this tutorial, we're diving deep into the world of coding to show you a step-by-step guide on how to create a stunning Glow Shadow Effect. Whether you're a seasoned developer or just starting out, this tutorial is designed to help you master this eye-catching effect effortlessly. In this video, we'll take you through the entire process without any voiceovers – just clear, concise on-screen instructions to keep things simple and efficient. We've also included the code snippets and project files in the description below for your convenience.



🌟 Here's what you'll learn in this tutorial: Introduction to Glow Shadow Effect Understand what the glow shadow effect is and when to use it. Setting Up Your Coding Environment A quick overview of the tools and IDE (Integrated Development Environment) we'll be using. Writing HTML and CSS Step-by-step coding instructions to create the foundation of the glow shadow effect. Implementing the Glow Shadow Effect Detailed instructions on adding the glow shadow effect to your elements. Fine-tuning and Customization Tips and tricks to customize and enhance your glow shadow effect to match your project's style. Final Result and Project Files A sneak peek at the final outcome and a link to download the project files. Don't forget to hit the like button if you find this tutorial helpful and subscribe to [Your Channel Name] for more coding tutorials, tips, and tricks. Feel free to leave any questions or comments down below, and we'll do our best to assist you. 🔗 Connect with us: Website: prosepond.blogspot.com Facebook:https://business.facebook.com/latest/home?asset_id=101556849707400&business_id=260720552107577&nav_ref=media_manager_redirect_home Instagram: https://www.instagram.com/programmingmastery/ Thank you for joining us on this coding journey! Make sure to share this video with your fellow coders, and let's bring your projects to life with that captivating Glow Shadow Effect. Stay tuned for more exciting coding tutorials! 💻✨

Html Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Glow Shadow</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div role="button">
    <span class="glow"></span>
    <div>
      <span>cool</span>Glowing shadows
    </div>
  </div>
</body>
<script src="script.js"></script>
</html>

Css Code:

@charset "UTF-8";
@font-face {
  font-family: "Mona Sans";
  src: url("https://assets.codepen.io/64/Mona-Sans.woff2")
format("woff2 supports variations"), url("https://assets.codepen.io/64/Mona-Sans.woff2")
format("woff2-variations");
  font-weight: 100 1000;
}
@property --hue {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --rotate {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --bg-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --bg-x {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --glow-translate-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --bg-size {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --glow-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --glow-blur {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --glow-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 2;
}
@property --glow-radius {
  syntax: "<number>";
  inherits: true;
  initial-value: 2;
}
@property --white-shadow {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
:root {
  --debug: 0;
  --supported: 0;
  --not-supported: 0;
  --card-color: hsl(260deg 100% 3%);
  --text-color: hsl(260deg 10% 55%);
  --card-radius: 3.6vw;
  --card-width: 35vw;
  --border-width: 3px;
  --bg-size: 1;
  --hue: 0;
  --hue-speed: 1;
  --rotate: 0;
  --animation-speed: 4s;
  --interaction-speed: 0.55s;
  --glow-scale: 1.5;
  --scale-factor: 1;
  --glow-blur: 6;
  --glow-opacity: 1;
  --glow-radius: 100;
  --glow-rotate-unit: 1deg;
}

body::before,
body::after {
  content: "CSS.registerProperty is supported ✅";
  position: absolute;
  display: block;
  top: 8px;
  left: 0;
  right: 0;
  margin: auto;
  width: calc(100% - 160px);
  max-width: 380px;
  height: auto;
  padding: 8px;
  border-radius: 8px;
  background: #48b93c;
  color: white;
  text-align: center;
  font-family: sans-serif;
  z-index: var(--supported, 0);
  opacity: var(--supported, 0);
}

body::after {
  content: "CSS.registerProperty is NOT supported ❌";
  background: #b93c3c;
  z-index: var(--not-supported, 0);
  opacity: var(--not-supported, 0);
}

body::before,
body::after {
  display: none !important;
}

html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

*,
*:before,
*:after {
  outline: calc(var(--debug) * 1px) red dashed;
}

body {
  background-color: var(--card-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Mona Sans", sans-serif;
}

body > div {
  width: var(--card-width);
  width: min(480px, var(--card-width));
  aspect-ratio: 1.5/1;
  color: white;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  border-radius: var(--card-radius);
  cursor: pointer;
}
body > div:hover > div {
  mix-blend-mode: darken;
  --text-color: white;
  box-shadow: 0 0 calc(var(--white-shadow) * 1vw) calc(var(--white-shadow) * 0.15vw)
rgba(255, 255, 255, 0.2);
  animation: shadow-pulse calc(var(--animation-speed) * 2) linear infinite;
}
body > div:hover > div:before {
  --bg-size: 15;
  animation-play-state: paused;
  transition: --bg-size var(--interaction-speed) ease;
}
body > div:hover .glow {
  --glow-blur: 1.5;
  --glow-opacity: 0.6;
  --glow-scale: 2.5;
  --glow-radius: 0;
  --rotate: 900;
  --glow-rotate-unit: 0;
  --scale-factor: 1.25;
  animation-play-state: paused;
}
body > div:hover .glow:after {
  --glow-translate-y: 0;
  animation-play-state: paused;
  transition: --glow-translate-y 0s ease, --glow-blur 0.05s ease, --glow-opacity 0.05s ease,
--glow-scale 0.05s ease, --glow-radius 0.05s ease;
}
body > div:before, body > div:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: var(--card-radius);
}
body > div > div {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--card-color);
  border-radius: calc(calc(var(--card-radius) * 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  text-transform: uppercase;
  font-stretch: 150%;
  font-size: 18px;
  font-size: clamp(1.5vw, 1.5vmin, 32px);
  color: var(--text-color);
  padding: calc(var(--card-width) / 8);
}
body > div > div span {
  display: inline-block;
  padding: 0.25em;
  border-radius: 4px;
  background: var(--text-color);
  color: black;
  margin-right: 8px;
  font-weight: 900;
}
body > div > div:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: calc(calc(var(--card-radius) * 0.9));
  box-shadow: 0 0 20px black;
  mix-blend-mode: color-burn;
  z-index: -1;
  background: #292929 radial-gradient(30% 30% at calc(var(--bg-x) * 1%)
calc(var(--bg-y) * 1%), hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg),
100%, 90%) calc(0% * var(--bg-size)), hsl(calc(calc(var(--hue) *
var(--hue-speed)) * 1deg), 100%, 80%) calc(20% * var(--bg-size)),
hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg), 100%, 60%) calc(40% * var(--bg-size)),
transparent 100%);
  width: calc(100% + var(--border-width));
  height: calc(100% + var(--border-width));
  animation: hue-animation var(--animation-speed) linear infinite,
rotate-bg var(--animation-speed) linear infinite;
  transition: --bg-size var(--interaction-speed) ease;
}
body > div .glow {
  --glow-translate-y: 0;
  display: block;
  position: absolute;
  width: calc(var(--card-width) / 5);
  height: calc(var(--card-width) / 5);
  animation: rotate var(--animation-speed) linear infinite;
  transform: rotateZ(calc(var(--rotate) * var(--glow-rotate-unit)));
  transform-origin: center;
  border-radius: calc(var(--glow-radius) * 10vw);
}
body > div .glow:after {
  content: "";
  display: block;
  z-index: -2;
  filter: blur(calc(var(--glow-blur) * 10px));
  width: 130%;
  height: 130%;
  left: -15%;
  top: -15%;
  background: hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg), 100%, 60%);
  position: relative;
  border-radius: calc(var(--glow-radius) * 10vw);
  animation: hue-animation var(--animation-speed) linear infinite;
  transform: scaleY(calc(var(--glow-scale) * var(--scale-factor) / 1.1))
scaleX(calc(var(--glow-scale) * var(--scale-factor) * 1.2))
translateY(calc(var(--glow-translate-y) * 1%));
  opacity: var(--glow-opacity);
}

@keyframes shadow-pulse {
  0%, 24%, 46%, 73%, 96% {
    --white-shadow: 0.5;
  }
  12%, 28%, 41%, 63%, 75%, 82%, 98% {
    --white-shadow: 2.5;
  }
  6%, 32%, 57% {
    --white-shadow: 1.3;
  }
  18%, 52%, 88% {
    --white-shadow: 3.5;
  }
}
@keyframes rotate-bg {
  0% {
    --bg-x: 0;
    --bg-y: 0;
  }
  25% {
    --bg-x: 100;
    --bg-y: 0;
  }
  50% {
    --bg-x: 100;
    --bg-y: 100;
  }
  75% {
    --bg-x: 0;
    --bg-y: 100;
  }
  100% {
    --bg-x: 0;
    --bg-y: 0;
  }
}
@keyframes rotate {
  from {
    --rotate: -70;
    --glow-translate-y: -65;
  }
  25% {
    --glow-translate-y: -65;
  }
  50% {
    --glow-translate-y: -65;
  }
  60%, 75% {
    --glow-translate-y: -65;
  }
  85% {
    --glow-translate-y: -65;
  }
  to {
    --rotate: calc(360 - 70);
    --glow-translate-y: -65;
  }
}
@keyframes hue-animation {
  0% {
    --hue: 0;
  }
  100% {
    --hue: 360;
  }
}
Tags

You may like these posts

Show more

Post a Comment

0Comments
Post a Comment (0)
Share to other apps
Copy Post Link