fonts Archives - csshint - A designer hub

Halftone Text Shadow Effects

admin — Fri, 14 Aug 2020 05:27:17 +0000

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]

Strokes, Shadows + Halftone Effects

See the Pen Strokes, Shadows + Halftone Effects by Mark
(@markmead) on CodePen.

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

32+ Free Tattoo Fonts with Style for 2023

admin — Sun, 23 Feb 2020 15:07:42 +0000

hey guys today’s we have picked 32+ best Free Tattoo Fonts with Style for 2023, Every font is free to download! Check out free fonts below, download them or create text images and logos with them. Thanks

fonts Archives - csshint - A designer hub

Halftone Text Shadow Effects

Strokes, Shadows + Halftone Effects

32+ Free Tattoo Fonts with Style for 2023

1. Ananda Namaste

2. Blackletter Font

3. Tribal Font

4. Delinquente Font

5. Tattoo Heavy

6. tribal tattoo font

7. Tengwar Annatar

8. brother tattoo font

9. True Man Tattoos

10. Death In The Shadow Font

11. Crux Font

12. Skullx Font

13. Ink In The Meat Font

14. Silent Reaction Font

15. Tribal Butterflies Font

16. Dragon is Coming fonts

17. Beech Font

18. VTKS ROCK GARAGE BAND Font

19. Always Beside You Font

20. Sailor Scrawl Font

21. Reditum Font

22. ANGEL TEARS Font

23. Precious Font

24. Cassandra Font

25. Countryside Font

26. Painter Font

27. Beyond Wonderland Font

28. Eutemia Ornaments Font

29. Anpad Script Font

30. Beauty Mountains Font

31. Qaskin Black Font

32. Billy Argel Font

33. Dark Garden Font

10 Most Reliable website to download Free Fonts

1.1001fonts

2.fontsquirrel

3.google fonts

4.dafont

5.urbanfonts

6.fontspace

7.fonts2u

8.ffonts

9.fontstock

10.abstractfonts

best locations where you can download safe fonts. DaFont, Google Fonts, 1001 Free Fonts