{"id":2105,"date":"2012-03-01T20:59:48","date_gmt":"2012-03-01T20:59:48","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=2105"},"modified":"2022-04-04T10:42:42","modified_gmt":"2022-04-04T10:42:42","slug":"como-aplicar-sombra-a-un-texto-con-css","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/como-aplicar-sombra-a-un-texto-con-css\/","title":{"rendered":"C\u00f3mo aplicar sombra a un texto con CSS"},"content":{"rendered":"

En este art\u00edculo vas a descubrir como aplicar sombra a un texto<\/strong> utilizando la nueva propiedad text-shadow<\/strong> de CSS3<\/strong>.<\/p>\n

En el ejemplo en funcionamiento he creado un t\u00edtulo usando la etiqueta H1:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<h1<\/span><\/a>><\/span>Lorem ipsum dolor sit amet consectetur<\/<\/span>h1<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Y en mi hoja de estilos CSS<\/strong> puedo aplicar la siguiente regla:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
h1 {<\/span>\n    text-shadow<\/span>:<\/span> 4px<\/span> 0px<\/span> 2px<\/span> #ccc<\/span>;<\/span>\n    color<\/span>:<\/span> #171717<\/span>;<\/span>\n    font-size<\/span>:<\/span> 48px<\/span>;<\/span> \n}<\/span><\/pre><\/div><\/div>\n
Resultado:<\/p>\n
\"Texto<\/p>\n
Lo que quiero darte a conocer en este art\u00edculo es la primera propiedad \u00abtext-shadow\u00bb que justamente permite a\u00f1adir una sombra a tu texto.<\/p>\n
Aparte tambi\u00e9n le aplico al texto un color oscuro y un tama\u00f1o de 48px.<\/p>\n
A la propiedad \u00abtext-shadow\u00bb le puedas dar 4 valores.<\/p>\n
En orden tienen el siguiente significado:<\/p>\n