Halftone
How do I make an halftone?
Simulated halftone pattern created with radial gradients. What is a halftone? How do you make a halftone? This script and codes were developed by Joey Hoer on 14 September 2022, Wednesday.
Halftone - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Halftone</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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> <h1>Halftone</h1>
<!-- Halftone Image Wrapper -->
<!-- -- >
<div class="halftone-wrapper"> <img class="halftone" src="//i.jyhr.co/cdpn/richmond.jpg" />
</div>
<!-- -->
</body>
</html>
Halftone - Script Codes CSS Codes
h1 { position: relative; color: #e8d8d8; margin: 0; padding: 0.2em 0.7em; font-size: 1.65em; line-height: 1.5; text-transform: uppercase; background: #222; position: fixed !important; bottom: 1.5em; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: inline-block; z-index: 2;
}
h1::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; /* Inverse Dots */ /*
background-image: radial-gradient( circle at 25% 25%, rgba($color, 1) 24%, rgba($color, 0) 26%), radial-gradient( circle at 75% 75%, rgba($color, 1) 24%, rgba($color, 0) 26%);
/**/ background-image: -webkit-radial-gradient(25% 25% circle, rgba(34, 34, 34, 0) 24%, #222222 26%, #222222 37.5%, rgba(34, 34, 34, 0) 37.5%), -webkit-radial-gradient(0% 100% circle, #222222 37.5%, rgba(34, 34, 34, 0) 37.5%), -webkit-radial-gradient(75% 75% circle, rgba(34, 34, 34, 0) 24%, #222222 26%, #222222 37.5%, rgba(34, 34, 34, 0) 37.5%), -webkit-radial-gradient(100% 0% circle, #222222 37.5%, rgba(34, 34, 34, 0) 37.5%); background-image: radial-gradient(circle at 25% 25%, rgba(34, 34, 34, 0) 24%, #222222 26%, #222222 37.5%, rgba(34, 34, 34, 0) 37.5%), radial-gradient(circle at 0% 100%, #222222 37.5%, rgba(34, 34, 34, 0) 37.5%), radial-gradient(circle at 75% 75%, rgba(34, 34, 34, 0) 24%, #222222 26%, #222222 37.5%, rgba(34, 34, 34, 0) 37.5%), radial-gradient(circle at 100% 0%, #222222 37.5%, rgba(34, 34, 34, 0) 37.5%); background-size: 2px 2px; background-position: 50%;
}
body { background: #e8d8d8; /* Inverse Dots */ /*
background-image: radial-gradient( circle at 25% 25%, rgba($color, 1) 24%, rgba($color, 0) 26%), radial-gradient( circle at 75% 75%, rgba($color, 1) 24%, rgba($color, 0) 26%);
/**/ background-image: -webkit-radial-gradient(25% 25% circle, rgba(232, 216, 216, 0) 24%, #e8d8d8 26%, #e8d8d8 37.5%, rgba(232, 216, 216, 0) 37.5%), -webkit-radial-gradient(0% 100% circle, #e8d8d8 37.5%, rgba(232, 216, 216, 0) 37.5%), -webkit-radial-gradient(75% 75% circle, rgba(232, 216, 216, 0) 24%, #e8d8d8 26%, #e8d8d8 37.5%, rgba(232, 216, 216, 0) 37.5%), -webkit-radial-gradient(100% 0% circle, #e8d8d8 37.5%, rgba(232, 216, 216, 0) 37.5%), url(//i.jyhr.co/cdpn/richmond.jpg); background-image: radial-gradient(circle at 25% 25%, rgba(232, 216, 216, 0) 24%, #e8d8d8 26%, #e8d8d8 37.5%, rgba(232, 216, 216, 0) 37.5%), radial-gradient(circle at 0% 100%, #e8d8d8 37.5%, rgba(232, 216, 216, 0) 37.5%), radial-gradient(circle at 75% 75%, rgba(232, 216, 216, 0) 24%, #e8d8d8 26%, #e8d8d8 37.5%, rgba(232, 216, 216, 0) 37.5%), radial-gradient(circle at 100% 0%, #e8d8d8 37.5%, rgba(232, 216, 216, 0) 37.5%), url(//i.jyhr.co/cdpn/richmond.jpg); background-size: 0.5em 0.5em, 0.5em 0.5em, 0.5em 0.5em, 0.5em 0.5em, cover; background-position: 50%; /* Grayscale */ -webkit-filter: grayscale(1); filter: grayscale(1);
}
/* Halftone Image Wrapper */
/*/
.halftone-wrapper { position: relative; width: 100%; height: auto; &::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; @include halftone(#e8d8d8, 0.5em); }
}
.halftone-wrapper img { vertical-align: middle; width: 100%; height: auto;
}
// /*/
/* Center */
html, body { height: 100%;
}
Developer | Joey Hoer |
Username | joeyhoer |
Uploaded | September 14, 2022 |
Rating | 3.5 |
Size | 3,080 Kb |
Views | 24,288 |
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 |
Slide to Check | 3,362 Kb |
Mirrored Background | 3,114 Kb |
3D Text | 3,862 Kb |
CSS Preloader Animations | 10,383 Kb |
Flexagons | 5,023 Kb |
Halftone | 3,080 Kb |
Fighting the Space | 2,677 Kb |
HR Department | 7,589 Kb |
SCSS Star Badges | 6,810 Kb |
Shift | 5,797 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 |
Random Gradients - JS | Aldlevine | 2,026 Kb |
Wikipedia Viewer | Thomasvaeth | 2,549 Kb |
Nice textured background | Hans | 2,659 Kb |
Addthis_button | Esambino | 1,691 Kb |
Octopus Bar iPad App Interactions | Davidkpiano | 6,735 Kb |
A Pen by Tosh | Panev | 2,586 Kb |
A simple log in form made with css | Mayurelbhar | 2,160 Kb |
Svg sky | Omodev | 7,070 Kb |
Flat design iframe | Damienpm | 1,819 Kb |
Pattern lab logo | TimPietrusky | 3,666 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!