halftone.css
1
2.halftone {
3 /* Halftone configuration variables */
4 --halftone-dot-size: 4px;
5 --halftone-dot-spacing: 4px;
6 --halftone-brightness: 0.8;
7 --halftone-blur: 2px;
8 --halftone-rotation: 25deg;
9
10 /* Color separation offsets */
11 --halftone-cyan-offset-x: 0px;
12 --halftone-cyan-offset-y: -4px;
13 --halftone-magenta-offset-x: -1px;
14 --halftone-magenta-offset-y: -1px;
15 --halftone-yellow-offset-x: 1px;
16 --halftone-yellow-offset-y: 1px;
17
18 /* Dot colors */
19 --halftone-cyan: cyan;
20 --halftone-magenta: magenta;
21 --halftone-yellow: yellow;
22 --halftone-background: #fff;
23
24 filter: url(#halftone-transparent);
25 overflow: visible;
26 transform: translateZ(0); /* force a HW accelerated layer */
27}
28
29.halftone > * {
30 pointer-events: none;
31 filter: brightness(var(--halftone-brightness)) blur(var(--halftone-blur));
32}
33
34.halftone::after {
35 content: "";
36 position: absolute;
37 top: -100%;
38 left: -100%;
39 right: -100%;
40 bottom: -100%;
41 background-blend-mode: multiply;
42 background:
43 radial-gradient(
44 var(--halftone-dot-size) var(--halftone-dot-size),
45 var(--halftone-cyan),
46 var(--halftone-background)
47 ),
48 radial-gradient(
49 var(--halftone-dot-size) var(--halftone-dot-size),
50 var(--halftone-magenta),
51 var(--halftone-background)
52 ),
53 radial-gradient(
54 var(--halftone-dot-size) var(--halftone-dot-size),
55 var(--halftone-yellow),
56 var(--halftone-background)
57 );
58 background-size: var(--halftone-dot-spacing) var(--halftone-dot-spacing);
59 background-position:
60 var(--halftone-cyan-offset-x) var(--halftone-cyan-offset-y),
61 var(--halftone-magenta-offset-x) var(--halftone-magenta-offset-y),
62 var(--halftone-yellow-offset-x) var(--halftone-yellow-offset-y);
63 mix-blend-mode: screen;
64 pointer-events: none;
65 transform: rotate(var(--halftone-rotation));
66 z-index: 1;
67}
68
69/* will need to put this somewhere in your html file
70
71 <svg style="position: absolute; width: 0; height: 0;">
72 <defs>
73 <filter
74 id="halftone-transparent"
75 color-interpolation-filters="sRGB"
76 >
77 <!-- Apply extreme contrast -->
78 <feComponentTransfer>
79 <feFuncR
80 type="linear"
81 slope="2500.875"
82 intercept="-1249.9375"></feFuncR>
83 <feFuncG
84 type="linear"
85 slope="2500.875"
86 intercept="-1249.9375"></feFuncG>
87 <feFuncB
88 type="linear"
89 slope="2500.875"
90 intercept="-1249.9375"></feFuncB>
91 </feComponentTransfer>
92
93 <!-- Convert black to transparent, white to opaque -->
94 <feColorMatrix
95 type="matrix"
96 values="
97 1 0 0 0 0
98 0 1 0 0 0
99 0 0 1 0 0
100 1 1 1 -0.8 0"
101 ></feColorMatrix>
102 </filter>
103 </defs>
104 </svg>
105
106*/