-1

Is there any way to give text this beveled look with only CSS?

Beveled text image.

To be clear, I'm looking for text that has thickness, but in a beveled way. Not, for example, what you get with text-shadow, which seems to just extend the edges of the font.

ladenedge
  • 13,197
  • 11
  • 60
  • 117
  • rather than how do i...? try something and if it fails, ask why is it.... – Lucky Chingi Nov 13 '15 at 19:36
  • I have searched for beveled text, 3d text, miscellaneous text effects, etc. Nothing seems to fit the bill. – ladenedge Nov 13 '15 at 19:37
  • Maybe this will help: http://stackoverflow.com/questions/2889501/inner-text-shadow-with-css – Akhilesh B Chandran Nov 13 '15 at 19:46
  • @AdamBuchananSmith ... I don't think that really helps... – Jacob G Nov 13 '15 at 19:46
  • @AkhileshBChandran: I don't understand how to get from an inner text shadow to the beveled appearance I'm looking for..? (In fact, I don't see how text-shadow can help me at all, which is why all my Internet searches have been fruitless.) – ladenedge Nov 13 '15 at 19:49
  • @ladenedge: I thought this example from that same question would have helped: http://stackoverflow.com/questions/2889501/inner-text-shadow-with-css/17260716#17260716 But it won't give the complete beveled appearance of text that you are looking for. – Akhilesh B Chandran Nov 13 '15 at 19:57
  • http://jsfiddle.net/NeqCC/ seems close – Lucky Chingi Nov 13 '15 at 19:58
  • 1
    so i just saw this [codepen](http://codepen.io/giana/pen/LpwOpm?editors=010) and it reminded me of this post, although it's not quite the same and it's Firefox/Webkit only – cocoa Dec 01 '15 at 21:16

2 Answers2

2

In my experience, you cannot. The closest thing I've ever seen is the inset text-shadow trick mentioned in the comments and I haven't seen anything online that answers this either.

I'm assuming that SEO and accessibility are the reasons to keep this strictly as an HTML/CSS separation, though. This effect may be able to be accomplished via an img tag with a corresponding alt attribute (simple solution) or by using SVG (for selectable and scalable text) with the appropriate fallback(s). Also, if you're looking for flowing/wrapping text, SVG might be able to handle that as well. Check this answer for more details: Auto line-wrapping in SVG text

Community
  • 1
  • 1
BCDeWitt
  • 4,540
  • 2
  • 21
  • 34
0

Here, play around with the numbers until you get a satisfying result.

.inset {

color: rgba(10,60,150, 0.8);
text-shadow: 3px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
}

http://codepen.io/damianocel/pen/yYGRBP

damiano celent
  • 721
  • 6
  • 12
  • I really appreciate your answer (especially considering all the downvotes), but I'm afraid I don't see how to bring 3d text inset (examples of which are all over the Internet) into an *angled 3d outset* (of which I can find no example anywhere). – ladenedge Nov 13 '15 at 20:11
  • 1
    It is best to do it in photoshop etc, or to find a web font somewhere. This comes close to the one you posted: http://www.1001fonts.com/facets-nf-font.html – damiano celent Nov 13 '15 at 20:30
  • @Damianocelent Why not Blender – user877329 Jul 23 '23 at 07:40