4
Is there any way to get to this result with CSS only?
Make a kind of 3D effect in text panes with CSS? Type the image below?
body {
background-color: #880000;
}
h1 {
color: #fff;
font-size: 100px;
font-family: sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 0 0 10px black;
}<h1>3D Text</h1>7
The secret to making 3D text is in the property text-shadow CSS. See the concept of the property:
The text-shadow property adds shadows to the text. It accepts a comma-separated list of shadows to be applied to the text and to the element text-decorations.
Each shadow is specified as an offset of the text together with optional color and blur radius values.
Before we see an example I warn you that undoubtedly the most annoying of all is to match the colors to apply a legal effect in the text, and it is interesting to always edit to see the effect by the developer tools (famous inspect).
In the example below I put in a stronger shade, to better visualize the applied shadows, but, if you want, just change the tones. The idea was to make it as similar as possible to your image (at least the style).
body {
background-color: #880000;
}
h1 {
color: #fff;
font-size: 150px;
font-family: monospace;
font-weight: bold;
text-align: center;
text-shadow:
1px -1px 0 #2f5d87,
2px -2px 0 #2e5a83,
3px -3px 0 #2d5880,
4px -4px 0 #2b557c,
5px -5px 0 #2a5378,
6px -6px 0 #295074,
7px -7px 0 #274d71,
8px -8px 0 #264b6d,
9px -9px 0 #254869,
10px -10px 0 #234665,
11px -11px 0 #224361,
12px -12px 0 #21405e,
13px -13px 12px rgba(0, 0, 0, 0.55),
13px -13px 1px rgba(0, 0, 0, 0.5);
}<h1>3D Text</h1>The text-shadow from the previous example is, say, a little complicated. But I will try to explain better how it works. Before we get bored we need to know what each value means:
/* deslocamento-x | deslocamento-y | raio-de-desfoque | cor */
text-shadow: 1px -1px 0 #2f5d87;
In the example we first pass a horizontal displacement value of 1px and vertical of -1px, plus a 0px (irrelevant) blur radius using the color #2f5d87. Only with that would we have the following result:
body {
background-color: #880000;
}
h1 {
color: #fff;
font-size: 150px;
font-family: monospace;
font-weight: bold;
text-align: center;
text-shadow: 1px -1px 0 #2f5d87;
}<h1>3D Text</h1>See that the value is almost unnoticeable and therefore would not give a 3D effect. What we did is apply a series of effects chained to h1. See what you’d look like if you added two more "effects".
body {
background-color: #880000;
}
h1 {
color: #fff;
font-size: 150px;
font-family: monospace;
font-weight: bold;
text-align: center;
text-shadow:
1px -1px 0 #2f5d87,
2px -2px 0 #2e5a83,
3px -3px 0 #2d5880;
}<h1>3D Text</h1>See how it accumulates "the lines of effect" and getting closer and closer to the desired effect.
References:
I thought your answer was very good, but I think it would be better if you explained what the values used in the text-shadow
@Isac, I’ve improved it, see if it’s clearer now.
It got better, even the small examples help to understand how the effect works :)
Thank you young man, very good example and explanation!
Show, anything just call hehe
4
h1 {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}<h1>Teste</h1>In the above case, I created several layers of text-shadow, until you reach something close to what you expect.
Recalling that the text-shadow is composed of 3 values(X-offset, Y-offset, Blur quantity and shade color).
Thanks for your cooperation :)
Browser other questions tagged css css3 3d
You are not signed in. Login or sign up in order to post.
Entitled to mouseover: https://codepen.io/anon/pen/bmeqmm - Taken from here
– Bacco
@Bacco boy awesome the quality of moving shadow, fuck d+! OBS, what a site pasta, I’m melting there in CSS Snippet, has a lot of interesting thing I found this example here very cool tb https://codepen.io/flowuhh/pen/YjQKeZ Thanks for Sharing Master
– hugocsl
@Bacco I noticed that this example of yours is scss but I think it would be very interesting to turn this into a possible response including both scss and compiled css. I thought the example was fantastic.
– Isac
@Isac in codepen can see the SCSS compiled in CSS. I did not find relevant as an answer, because the technique is the same as the two existing answers, it was only a question of greater "artistic dedication" of those who developed, because the goal was different from simply explaining how to do. I just wanted to stick around as a compliment.
– Bacco