Reveal Secret Code Using CSS

Reveal Secret Code Using CSS
Code Snippet:Glide To Reveal with CSS :has()
Author: Jhey
Published: March 31, 2024
Last Updated: March 31, 2024
Downloads: 432
License: MIT
Edit Code online: View on CodePen
Read More

This code reveals a secret code using CSS. It creates a sliding effect to unveil the code. The major functionality involves adjusting the appearance of digits based on hover or focus. It helps add interactive features to reveal hidden content.

You can use this code on websites to add interactive elements. It enhances user engagement by revealing hidden content dynamically. This feature is eye-catching and can be applied to various types of content or puzzles.

How to Create Reveal Secret Code Using CSS

1. First of all, load the Normalize CSS into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

2. Set up the HTML structure. Create a section element to contain your secret code. Inside the section, add a paragraph to introduce the purpose of the code revealer. Then, use an unordered list with list items for each digit of your secret code. Each list item should contain a span element to represent the 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>

3. Next, apply CSS styles to achieve the sliding effect for revealing the secret code. Define styles for the section, paragraph, and list elements to enhance their appearance. Utilize CSS properties like background, color, font-size, and box-shadow to make the elements visually appealing.

* {
  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%) !important; 
  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);
}

Make the secret code revealer interactive by using CSS transitions and hover/focus effects. Define styles for the digits within the list items to change their appearance when hovered over or focused on. Utilize CSS variables and calculations to create a sliding effect that reveals the digits one by one as they are interacted with.

That’s all! hopefully, you have successfully created Reveal Secret Code Using CSS. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X