Check out this Amazing Halftone Text Shadow Effects using css. Designed by Mark.
Halftone Text Shadow Effects
HTML /PUG
[code language=”html”]
mixin heading(className)
h1(class="heading " + className) Hello
.grid
+heading(‘heading–stroke heading–shadow’)
+heading(‘heading–stroke-shadow’)
+heading(‘heading–stroke heading–halftone’)
+heading(‘heading–stroke heading–halftone heading–halftone-color’)
.info
| Halftone effect from
a(href="http://www.patternify.com/") Patternify
[/code]
CSS / SCSS
[code language=”css”]
$body: #f2cee6;
$stroke: #0d1b1e;
$shadow: #2dc7ff;
$size: 6rem;
$halftone: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAHElEQVQYV2NUVFT8f//+fUYGBgYGMAEDcA5IBQCKJQVmn76DhAAAAABJRU5ErkJggg==");
@mixin stroke-width($property) {
-webkit-text-stroke-width: $property;
-moz-text-stroke-width: $property;
}
@mixin stroke-color($property) {
-webkit-text-stroke-color: $property;
-moz-text-stroke-color: $property;
}
@mixin background-clip($property) {
-webkit-background-clip: $property;
-moz-background-clip: $property;
background-clip: $property;
}
@mixin fill-color($property) {
-webkit-text-fill-color: $property;
-moz-text-fill-color: $property;
}
body {
background-color: $body;
padding: 4rem;
text-align: center;
}
.grid {
display: grid;
grid-template-columns: 1fr;
grid-gap: 1rem;
@media screen and (min-width: 768px) {
grid-template-columns: 1fr 1fr;
}
}
.heading {
font-size: $size;
letter-spacing: 6px;
margin: 0;
&–stroke {
@include stroke-width(2px);
@include stroke-color($stroke);
color: transparent;
}
&–shadow {
text-shadow: 6px 6px $shadow;
}
&–stroke-shadow {
color: $body;
text-shadow: -2px 0 $stroke, 0 -2px $stroke, 2px 0 $stroke, 0 2px $stroke,
2px 2px $stroke, -2px -2px $stroke, -2px 2px $stroke, 2px -2px $stroke,
6px 6px $shadow;
}
&–halftone {
position: relative;
&:after {
background: $halftone repeat;
@include stroke-width(0);
@include background-clip(text);
@include fill-color(transparent);
font-size: $size;
letter-spacing: 6px;
left: calc(50% + 6px);
top: calc(50% + 6px);
content: "Hello";
z-index: -1;
position: absolute;
transform: translate(-50%, -50%);
}
&-color {
&:after {
background-color: $shadow;
}
}
}
}
.info {
padding: 1rem 0;
}
[/code]
