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
-
1Bienvenido a Stack Overflow en español. Te invito a leer Cómo preguntar y a realizar el recorrido de bienvenida. Para que tu pregunta no termine cerrada, debes mostrar lo que has intentado. La idea del sitio es formular preguntas concretas, donde se demuestre el trabajo / esfuerzo / investigación realizada y el intento por resolver la situación. Actualmente tu pregunta no cumple ese formato. De hecho es duplicada de esta otra pregunta, donde hay respuestas que indican cómo añadir sombra al texto usando CSS. Saludos– Mauricio Contrerasel 27 ago. 2020 a las 9:47
-
¿Responde esto a tu pregunta? ¿Cómo se puede hacer sombra alargada con CSS?– Alfabravoel 27 ago. 2020 a las 16:57
3 respuestas
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>
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
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>
-
1Buena respuesta, serviría de mucho que agregues una explicación de lo que hace cada parámetro.– Tribyel 27 ago. 2020 a las 16:48