Halftone

Developer
Joey Hoer
Size
3,080 Kb
Views
24,288
  1. Halftone Previews
  2. Halftone HTML Codes
  3. Halftone CSS Codes

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 Previews
IQ Test

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%;
}
Halftone - Script Codes
Halftone - Script Codes
Home Page Home
Developer Joey Hoer
Username joeyhoer
Uploaded September 14, 2022
Rating 3.5
Size 3,080 Kb
Views 24,288
Do you need developer help for Halftone?

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!

Joey Hoer (joeyhoer) Script Codes
Name
Example SVGZ Data URI
Dizzy Disks
SMPTE Color Bars
Fighting the Space
Mirrored Background
3D Text
Flexagons
Perforated Leather Background
Slide to Check
Object-fit and object-position
Create amazing art & images 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!