Is it possible to get cut out text effect like this using CSS/CSS3 only? or image is the only option to get this effect.
text-overflow: ellipsis; white-space: nowrap; overflow: hidden; in CSS (or hard-code the style, but CSS is cleaner). If you want to completely cut the text off, use clip instead of ellipsis . Or better, see MDN since w3schools often has outright incorrect information.
The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its decorations . Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.
This should work:
Here's a little trick I discovered using the :before
and :after
pseudo-elements:
http://dabblet.com/gist/1609945
text-shadow
is your friend. See this page for lots of examples what you can achieve with it. Example #8 looks promising.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With