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]

Strokes, Shadows + Halftone Effects

The post Halftone Text Shadow Effects appeared first on csshint - A designer hub.