is there a clean and elegant way to achieve a vintage striped text-shadow effect?
To give you an example, i'd like to reproduce with css something like this:
I'd like the stripes to be of a different color from the font.
Asked
Active
Viewed 2,631 times
5
-
I doubt you can easily do this in css, are SVG's a option? – Jacob G Dec 18 '14 at 22:32
-
Yes, svg are definitely welcome. – Aranel Dec 18 '14 at 22:35
-
@ImagineWebDesign I'd be interested in trying out SVG's, if it's not possibile to implement via css-only (more elegant and efficient solution). – Aranel Dec 18 '14 at 22:52
-
I have been trying to find a way to do it with CSS, but the only way I have come up with would only work in webkit browsers :( – Jacob G Dec 18 '14 at 22:53
1 Answers
2
http://jsfiddle.net/kntz6h01/2/
This is the closest I could come up with, but it only works with webkit browsers and is not very customisable in terms of the length of the text-shadow. It also requires an attribute in the tag to duplicate the text.
Basically it works by creating a striped background with -webkit-repeating-linear-gradient, masking out the background with
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
and duplicating the text with the :after pseudo-element and applying a text-shadow to it.
It's probably not very useful.
szupie
- 826
- 10
- 18
-
1
-
Yeah, this is more of a proof of concept demonstrating how unpowerful css is... Even if it was compatible with all browsers, I can't imagine anyone actually using this. – szupie Dec 18 '14 at 23:01
-
If you want it to look even better, add a border around the text matching the background of the body: https://stackoverflow.com/questions/2570972/css-font-border – Greyson R. Oct 11 '19 at 21:30