Subtle overlay

Developer
Robert
Size
2,579 Kb
Views
12,144
  1. Subtle overlay Previews
  2. Subtle overlay HTML Codes
  3. Subtle overlay CSS Codes
  4. Subtle overlay JS Codes

How do I make an subtle overlay?

Minimal approach to overlays. Simple, yet beautiful. What is a subtle overlay? How do you make a subtle overlay? This script and codes were developed by Robert on 08 November 2022, Tuesday.

Subtle overlay Previews
IQ Test

Subtle overlay - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Subtle overlay</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="shim"></div>
<div class="content"> <p class="hl">Subtle overlay</p> <p>Very minimal approach to overlays</p> <button class="toggle">open</button> <p class="meta">more on <a href="https://github.com/rendro">github</a></p>
</div>
<div class="overlay"> <p class="hl">Overlay</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium similique nisi placeat deserunt suscipit soluta, sapiente officiis temporibus dicta totam illo, quae ipsa consequatur dolor quo voluptate sequi magni nesciunt.</p>
</div> <script src="js/index.js"></script>
</body>
</html>

Subtle overlay - Script Codes CSS Codes

*{box-sizing: border-box;}
body,html{ min-height: 100%;
}
body{ padding: 50px;
}
.shim{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background: #000; opacity: 0; -webkit-transition: opacity .5s ease-out .5s; transition: opacity .5s ease-out .5s; z-index: 1;
}
.toggle{ text-align: center; padding: 12px 20px 10px; text-transform: uppercase; font-weight: bold; color: #2221be; border: 1px solid #2221be; border-radius: 3px; background: white; outline: none;
}
.toggle:active{ -webkit-transform: translate3d(0,1px,0); transform: translate3d(0,1px,0);
}
.content{ -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out;
}
.overlay{ position: fixed; top: 50%; left: 50%; width: 400px; min-height: 200px; margin: -100px 0 0 -200px; padding: 20px; background: #fff; z-index: 2; opacity: 0; pointer-events: none; -webkit-transform: scale(0.8,0.8); transform: scale(0.8,0.8); -webkit-transition: all .5s cubic-bezier(.14,1.42,.67,1); transition: all .5s cubic-bezier(.14,1.42,.67,1);
}
.overlay.open{ opacity: 1; pointer-events: auto; -webkit-transform: scale(1,1); transform: scale(1,1);
}
.hl{ text-transform: uppercase; font-weight: bold;
}
.meta{ margin-top: 100px; color: #999; font-size: 0.8em;
}
a{ color: inherit;
}

Subtle overlay - Script Codes JS Codes

var isOpen = false;
var shim = document.querySelector('.shim');
var overlay = document.querySelector('.overlay');
var openBtn = document.querySelector('.toggle');
var content = document.querySelector('.content');
function open() { isOpen = true; shim.style.opacity = 0.05; shim.style['pointer-events'] = 'auto'; overlay.classList.add('open'); content.style['-webkit-filter'] = 'blur(5px)';
};
function close() { isOpen = false; shim.style.opacity = 0; shim.style['pointer-events'] = 'none'; overlay.classList.remove('open'); content.style['-webkit-filter'] = 'blur(0)';
};
openBtn.addEventListener('click', function toggle() { if (isOpen) { close(); } else { open(); }
});
shim.addEventListener('click', close);
Subtle overlay - Script Codes
Subtle overlay - Script Codes
Home Page Home
Developer Robert
Username rendro
Uploaded November 08, 2022
Rating 3
Size 2,579 Kb
Views 12,144
Do you need developer help for Subtle overlay?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Robert (rendro) Script Codes
Name
WebGL cube test
Confirm appointment dialog
CSS vintage filter form images
A Pen by Robert
CSS Map pin
Responsive image grid
CSS3 Diamond
Flexbox slider
Flat UI buttons
3D canvas cube
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!