Perforated foil
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 - 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.
*/
Developer | Oliver Kühn |
Username | 0x04 |
Uploaded | November 15, 2022 |
Rating | 3.5 |
Size | 2,617 Kb |
Views | 14,168 |
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!
Name | Size |
Max Headroom | 3,784 Kb |
7 Segment Display Characters | 2,717 Kb |
Random Paint | 2,444 Kb |
X4.css Theme System | 10,530 Kb |
FourPerfectlyRoundCircles | 5,772 Kb |
Hover rotating cube | 3,166 Kb |
Background-blend-mode Test | 4,744 Kb |
Border loading indicators | 3,025 Kb |
Unicode glitching | 1,632 Kb |
Scanline effect | 2,245 Kb |
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!
Name | Username | Size |
Hard-Stop Gradients | Mackdoyle | 2,288 Kb |
Swiftype Lower Third | Zumwalt | 4,796 Kb |
CSS Dynamic Width Square Div | Elleestcrimi | 2,861 Kb |
Text Blocks Over Image, Updated | KatieK2 | 3,122 Kb |
Rain Landing in a Pond | Edball | 3,009 Kb |
Flat buttons for Eliassen.com | Kdooley89 | 1,737 Kb |
Birthday Party Starter | Aussieyang | 1,629 Kb |
Product item | Mymahesh11 | 2,256 Kb |
Social buttons | Flacu | 2,022 Kb |
Importable Clearfix | Corysimmons | 1,411 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!