-1

espero que todos se encuentren bien, mi pregunta es como se le pueden poner sombras a las letras? hasta el momento he encontrado solamente al fondo(background) pero no a letras propiamente tal. El que responda de antemano le agradezco UwU

2

3 respuestas 3

4

La propiedad de CSS se llama asi "text-shadow"

Aqui puedes encontrar (en ingles) especificacion de su uso: https://www.w3schools.com/cssref/css3_pr_text-shadow.asp

h1 {
  color: green;
  text-shadow: 2px 2px #FF0000;
}
<h1>Hola Mundo</h1>

0
3

La propiedad que hacer el efecto 3d es text-shadow. La parte de los 2px es los pixeles de entrada y el color de sobra, despues los demas de 4px es para hacer un poco el efecto de 3d y los 6px es para que ya se vea en 3d

h1 {
 height: 10vh;
 text-shadow:2px 2px 4px #FFF, 4px 4px 4px #111,
 6px 6px 4px #222;
}
<h1>Hola Caracola</h1>

https://html-css-js.com/css/generator/text-shadow/ en esta pagina puedes contemplar y editar el text-shadow para ver como quedaria

3
  • listo mucho mejor? el 27 ago. 2020 a las 7:34
  • como lo ves BetaM el 27 ago. 2020 a las 7:37
  • también voy a intentar explicarlo el 27 ago. 2020 a las 7:39
3

La propiedad css para la sombra en el texto es: text-shadow

La sintaxis es:

offset-x | offset-y | blur-radius | color

text-shadow: 1px 1px 2px black;

Puedes agregar varias sombras separadas por comas para dar un efecto de 3d.

body {
  background-color: #e7e5e4;
  text-align: center;
}

.shadow {
  font-family: 'arial', sans-serif;
  font-size: 60px;
  color: #131313;
  letter-spacing: 0.15em;
  text-shadow: 1px -1px 0 #767676, -1px 2px 1px #737272, -2px 4px 1px #767474, -3px 6px 1px #787777, -4px 8px 1px #7b7a7a, -5px 10px 1px #7f7d7d, -6px 12px 1px #828181, -7px 14px 1px #868585, -8px 16px 1px #8b8a89, -9px 18px 1px #8f8e8d, -10px 20px 1px #949392, -11px 22px 1px #999897, -12px 24px 1px #9e9c9c, -13px 26px 1px #a3a1a1, -14px 28px 1px #a8a6a6, -15px 30px 1px #adabab, -16px 32px 1px #b2b1b0, -17px 34px 1px #b7b6b5, -18px 36px 1px #bcbbba, -19px 38px 1px #c1bfbf, -20px 40px 1px #c6c4c4, -21px 42px 1px #cbc9c8, -22px 44px 1px #cfcdcd, -23px 46px 1px #d4d2d1, -24px 48px 1px #d8d6d5, -25px 50px 1px #dbdad9, -26px 52px 1px #dfdddc, -27px 54px 1px #e2e0df, -28px 56px 1px #e4e3e2;
}
<h1 class="shadow">TEXT SHADOW</h1>

1
  • 1
    Buena respuesta, serviría de mucho que agregues una explicación de lo que hace cada parámetro.
    – Triby
    el 27 ago. 2020 a las 16:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.