Perforated foil

Developer
Oliver Kühn
Size
2,617 Kb
Views
14,161
  1. Perforated foil Previews
  2. Perforated foil HTML Codes
  3. Perforated foil CSS Codes
  4. Perforated foil JS Codes

How do I make an perforated foil?

Inspired by an bus ride. That bus was full with advertising, including the windows with these perforated foil. If you try to look trough the foreground gets blurry, if you try to focus the foil the background gets blurred.. What is a perforated foil? How do you make a perforated foil? This script and codes were developed by Oliver Kühn on 15 November 2022, Tuesday.

Perforated foil Previews
IQ Test

Perforated foil - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Perforated foil</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="#" class="container"> <div class="image"></div> <div class="grid"></div>
</a>
<script type="text/javascript">
function border_onClick(event) { var el = document.getElementsByClassName('container')[0]; el.className = (el.className.indexOf('focus') > 0) ? 'container' : 'container focus';
}
</script>
<!-- Hide blurring borders -->
<div class="border" onclick="border_onClick(event)">Click to change focus</div> <script src="js/index.js"></script>
</body>
</html>

Perforated foil - Script Codes CSS Codes

html, body
{ width: 100%; height: 100%; padding: 0; margin: 0; background-color: #000; font-family: monospace;
}
.grid, .image, .border
{ position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.border
{ border: 40px solid #000; padding: 20px; color: #000; font-size: 24px; text-shadow: 1px 0 0 #FFF, -1px 0 #FFF, 0 1px 0 #FFF, 0 -1px 0 #FFF, 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF;
}
.image
{ background: #000 url(http://upload.wikimedia.org/wikipedia/commons/2/2f/G%C3%BCnz6.jpg) center no-repeat;
}
.grid
{ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAZBAMAAAAYgrnCAAAAA3NCSVQICAjb4U/gAAAAGFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAABcYkG9AAAACHRSTlMA/0TdEXeZZn00UBIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAGHRFWHRDcmVhdGlvbiBUaW1lADI4LjAzLjIwMTMBvZfUAAAAXElEQVQImWMQBAMBBnVDICWmwMDAJigoDKQYGAwFRUAUQ6FgAJhWFFRAoWHiUHVQfTBzYOYiaFOlYBAt5sDAkgikTYB6nIE0yBBWIA0ylAmJhonD1MH0wcxBNR8AMXgNrx3BetEAAAAASUVORK5CYII=); -webkit-transition
}
.container .image
{ -webkit-filter: blur(5px); -webkit-transition: -webkit-filter linear 1s;
}
.container .grid
{ -webkit-filter: blur(0px); -webkit-transition: -webkit-filter linear 1s;
}
.container.focus .image
{ -webkit-filter: blur(0px);
}
.container.focus .grid
{ -webkit-filter: blur(5px);
}

Perforated foil - Script Codes JS Codes

/*
I don't know why, but if you are in the editor the images flashes white on the beginning and ending of the animation. Fullscreen or leaving editor works.
*/
Perforated foil - Script Codes
Perforated foil - Script Codes
Home Page Home
Developer Oliver Kühn
Username 0x04
Uploaded November 15, 2022
Rating 3.5
Size 2,617 Kb
Views 14,161
Do you need developer help for Perforated foil?

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!

Oliver Kühn (0x04) Script Codes
Name
Scanline effect
7 Segment Display Characters
Unicode glitching
Random Paint
Background-blend-mode Test
FourPerfectlyRoundCircles
Border loading indicators
Pure CSS Jalousien
X4.css Theme System
ASCIICanvas
Create amazing blog posts 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!