Reveal Secret Code Using Css

Here’s a tutorial on how to Reveal Secret Code Using CSS. This approach uses CSS to create an interactive effect where hovering or focusing on digits reveals a secret code through visual enhancements like scaling and blurring. Let’s dive into the steps to create this engaging effect.

<link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css">

Step 1: Setting up the HTML Structure

First, we’ll need to create the basic HTML structure for our secret code display. This will include a container for the code and individual elements for each digit.

<section>
  <p>Glide To Reveal Secret Code</p>
  <ul class="code">
    <li tabindex="0" class="digit">
      <span>0</span>
    </li>
    <li tabindex="0" class="digit">
      <span>3</span>
    </li>
    <li tabindex="0" class="digit">
      <span>4</span>
    </li>
    <li tabindex="0" class="digit">
      <span>8</span>
    </li>
    <li tabindex="0" class="digit">
      <span>7</span>
    </li>
    <li tabindex="0" class="digit">
      <span>2</span>
    </li>
  </ul>
</section>

Step 2: Adding CSS Styles

Now, let’s style the HTML elements to create the visual effect of revealing the secret code. This involves styling the container, digits, and applying transformations for the hover and focus states.

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
  background: hsl(0 0% 0%);
  gap: 2rem;
}

body::before {
	--line: hsl(0 0% 95% / 0.25);
	content: "";
	height: 100vh;
	width: 100vw;
	position: fixed;
	background:
		linear-gradient(90deg, var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin,
		linear-gradient(var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin;
	-webkit-mask: linear-gradient(-15deg, transparent 30%, white);
	        mask: linear-gradient(-15deg, transparent 30%, white);
	top: 0;
	z-index: -1;
}

section {
  display: grid;
  gap: 4rem;
  align-items: center;
  justify-content: center;
}

section p {
  margin: 0;
  font-size: 2.25rem;
  color: hsl(0 0% 40%);
  text-align: center;
  background: linear-gradient(hsl(0 0% 80%), hsl(0 0% 50%));
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}

.code {
  font-size: 3rem;
  display: flex;
  flex-wrap: nowrap;
  color: hsl(0 0% 100%);
  border-radius: 1rem;
  background: hsl(0 0% 6%);
  justify-content: center;
  box-shadow: 0 1px hsl(0 0% 100% / 0.25) inset;
}

.code:hover {
  cursor: -webkit-grab;
  cursor: grab;
}

.digit {
  display: flex;
  height: 100%;
  padding: 5.5rem 1rem;
}

.digit:focus-visible {
  outline-color: hsl(0 0% 50% / 0.25);
  outline-offset: 1rem;
}

.digit span {
  scale: calc(var(--active, 0) + 0.5);
  filter: blur(calc((1 - var(--active, 0)) * 1rem));
  transition: scale calc(((1 - var(--active, 0)) + 0.2) * 1s), filter calc(((1 - var(--active, 0)) + 0.2) * 1s);
}

ul {
  padding: 0;
  margin: 0;
}

.digit:first-of-type {
  padding-left: 5rem;
}
.digit:last-of-type {
  padding-right: 5rem;
}

:root {
  --lerp-0: 1; /* === sin(90deg) */
  --lerp-1: calc(sin(50deg));
  --lerp-2: calc(sin(45deg));
  --lerp-3: calc(sin(35deg));
  --lerp-4: calc(sin(25deg));
  --lerp-5: calc(sin(15deg));
}

.digit:is(:hover, :focus-visible) {
  --active: var(--lerp-0);
}
.digit:is(:hover, :focus-visible) + .digit,
.digit:has(+ .digit:is(:hover, :focus-visible)) {
  --active: var(--lerp-1);
}
.digit:is(:hover, :focus-visible) + .digit + .digit,
.digit:has(+ .digit + .digit:is(:hover, :focus-visible)) {
  --active: var(--lerp-2);
}
.digit:is(:hover, :focus-visible) + .digit + .digit + .digit,
.digit:has(+ .digit + .digit + .digit:is(:hover, :focus-visible)) {
  --active: var(--lerp-3);
}
.digit:is(:hover, :focus-visible) + .digit + .digit + .digit + .digit,
.digit:has(+ .digit + .digit + .digit + .digit:is(:hover, :focus-visible)) {
  --active: var(--lerp-4);
}
.digit:is(:hover, :focus-visible) + .digit + .digit + .digit + .digit + .digit,
.digit:has(+ .digit + .digit + .digit + .digit + .digit:is(:hover, :focus-visible)) {
  --active: var(--lerp-5);
}