Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to get cut out text effect like this using CSS/CSS3 only?

Tags:

css

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.

alt text

like image 459
Jitendra Vyas Avatar asked Oct 19 '10 12:10

Jitendra Vyas


People also ask

How do I cut text in CSS?

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.

What is text shadow css3 used for?

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.


2 Answers

This should work:
Here's a little trick I discovered using the :before and :after pseudo-elements:

http://dabblet.com/gist/1609945

like image 98
Web_Designer Avatar answered Oct 22 '22 14:10

Web_Designer


text-shadow is your friend. See this page for lots of examples what you can achieve with it. Example #8 looks promising.

like image 44
Aaron Digulla Avatar answered Oct 22 '22 13:10

Aaron Digulla