{"id":67312,"date":"2023-06-28T14:13:20","date_gmt":"2023-06-28T12:13:20","guid":{"rendered":"https:\/\/kinqsta.com\/es\/?p=67312&preview=true&preview_id=67312"},"modified":"2025-01-17T13:48:38","modified_gmt":"2025-01-17T12:48:38","slug":"contorno-texto-css","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/","title":{"rendered":"C\u00f3mo A\u00f1adir Contorno de Texto con CSS"},"content":{"rendered":"

En lo relativo al dise\u00f1o web<\/a>, el atractivo visual de los contenidos desempe\u00f1a un papel fundamental a la hora de captar y retener la atenci\u00f3n de tu audiencia. Un aspecto del dise\u00f1o que puede influir significativamente en la est\u00e9tica general y la legibilidad de tu sitio web es el estilo del texto.<\/p>\n

El estilo del texto va m\u00e1s all\u00e1 de elegir una fuente<\/a> y un color de fuente<\/a>. Implica combinar cuidadosamente varias propiedades CSS<\/a> para conseguir el efecto deseado, como utilizar contornos de texto para que tu texto sea visualmente llamativo.<\/p>\n

En este art\u00edculo, nos adentramos en el arte de estilizar el contorno de los textos utilizando CSS y exploramos c\u00f3mo funciona junto con las distintas opciones que puedes utilizar.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Entender los Textos Web<\/h2>\n

El texto web es el texto que se muestra en una p\u00e1gina web. Las fuentes desempe\u00f1an un papel vital a la hora de mostrar texto en la web. Estas fuentes son esencialmente gr\u00e1ficos basados en vectores, lo que significa que los datos en p\u00edxeles no las limitan y pueden representarse en varios tama\u00f1os manteniendo su nitidez y claridad.<\/p>\n

Un aspecto fascinante de que las fuentes sean gr\u00e1ficos basados en vectores es la capacidad de aplicar trazos o contornos alrededor de caracteres individuales. Al igual que puedes dibujar un trazo alrededor de una forma en programas vectoriales como Adobe Illustrator, CSS proporciona los medios para conseguir el mismo efecto en el texto web.<\/p>\n

2 M\u00e9todos para A\u00f1adir un Contorno de Texto con CSS<\/h2>\n

Cuando se trata de a\u00f1adir un efecto de contorno a tu texto utilizando CSS, hay dos m\u00e9todos que puedes emplear. Exploremos y veamos las desventajas de estos m\u00e9todos y c\u00f3mo utilizarlos.<\/p>\n

1. Utilizar la Propiedad text-stroke<\/h3>\n

text-stroke<\/code> es una propiedad CSS que puedes utilizar para a\u00f1adir un contorno a tus textos. Te permite especificar los contornos width<\/code> y color<\/code>. Esta propiedad s\u00f3lo es compatible con los navegadores basados en WebKit, y para que puedas utilizarla, debes a\u00f1adir el prefijo -webkit-<\/code>.<\/p>\n

Por ejemplo, vamos a a\u00f1adir un contorno a un texto de encabezamiento h1<\/code>: \u00abWelcome to Kinsta\u00bb:<\/p>\n

<h1>Welcome to Kinsta<\/h1><\/code><\/pre>\n
As\u00ed se utilizar\u00e1 la propiedad text-stroke<\/code> con el prefijo -webkit-<\/code>:<\/p>\n
h1 {\n  -webkit-text-stroke-width: 3px;\n  -webkit-text-stroke-color: black;\n}<\/code><\/pre>\n
-webkit-text-stroke-width<\/code> y -webkit-text-stroke-color<\/code> especifican los trazos width<\/code> y color<\/code>, respectivamente. Establece el width<\/code> en 3px<\/code> y el color<\/code> en black<\/code>.<\/p>\n
\"A\u00f1ade
A\u00f1ade el contorno con la propiedad trazo de texto.<\/figcaption><\/figure>\n
Estas dos propiedades anteriores pueden combinarse con la propiedad abreviada -webkit-text-stroke<\/code>, que especifica simult\u00e1neamente el trazo color<\/code> y width<\/code>.<\/p>\n
h1 {\n  -webkit-text-stroke: 3px black;\n}<\/code><\/pre>\n
Esto dar\u00e1 el mismo resultado.<\/p>\n
Soporte para la Propiedad text-stroke<\/h4>\n
Seg\u00fan caniuse<\/a>, no hay soporte para la propiedad text-stroke<\/code> en el navegador Internet Explorer.<\/p>\n
\"Soporte
Soporte para la propiedad text-stroke.<\/figcaption><\/figure>\n
Si utilizas la propiedad text-stroke<\/code> para establecer el contorno de tus textos y un usuario hace uso de un navegador no compatible, es posible que dicho texto no sea visible si su color coincide con el color de fondo.<\/p>\n
Para solucionarlo, puedes utilizar la propiedad -webkit-text-fill-color<\/code> para establecer un color<\/code> para el texto y establecer un color de reserva con la propiedad color<\/code>:<\/p>\n
h1 {\n  color: black;\n  -webkit-text-fill-color: white; \/* Will override color (regardless of order) *\/\n  -webkit-text-stroke: 3px black;\n}<\/code><\/pre>\n
\"A\u00f1adir
A\u00f1adir soporte para navegadores no compatibles.<\/figcaption><\/figure>\n
Cuando un navegador no soporta la propiedad text-stroke<\/code>, utiliza el color establecido por la propiedad color<\/code>.<\/p>\n
\"Fallback
Fallback (opci\u00f3n alternativa) cuando el navegador no es compatible.<\/figcaption><\/figure>\n
Otra opci\u00f3n ser\u00e1 confirmar que el navegador admite la propiedad -webkit-text-stroke<\/code> antes de a\u00f1adir el estilo.<\/p>\n
@supports (-webkit-text-stroke: 3px black) {\n  h1 {\n    -webkit-text-fill-color: white;\n    -webkit-text-stroke: 3px black;\n  }\n}<\/code><\/pre>\n
2. Utilizar la Propiedad text-shadow<\/h3>\n
Si no quieres ocuparte de las diferencias de soporte, puedes utilizar la propiedad text-shadow<\/code>, que tiene soporte para todas<\/a> las versiones m\u00e1s recientes de los navegadores m\u00e1s populares.<\/p>\n
\"Soporte
Soporte para la propiedad text-shadow.<\/figcaption><\/figure>\n
Para la propiedad text-shadow<\/code>, utilizaremos cuatro sombras, cada una en la parte superior derecha<\/strong>, superior izquierda<\/strong>, inferior izquierda<\/strong> e inferior derecha<\/strong>.<\/p>\n
h1 {\n  color: #fff;\n  text-shadow:\n    3px 3px 0 #000,\n    -3px 3px 0 #000,\n    -3px -3px 0 #000,\n    3px -3px 0 #000;\n}<\/code><\/pre>\n
En este ejemplo, utilizamos cuatro sombras para crear un efecto de contorno de texto. Cada sombra tiene un desplazamiento de 3 p\u00edxeles respecto al texto, y el color se establece en negro (#000<\/code>). Este efecto es similar al generado por el primer m\u00e9todo.<\/p>\n
\"A\u00f1adir
A\u00f1adir contorno con la propiedad sombra de texto.<\/figcaption><\/figure>\n
Aplicando sombras a las cuatro esquinas del texto, conseguimos un contorno bien definido. Si\u00e9ntete libre de ajustar los desplazamientos de p\u00edxel, los colores de las sombras o los colores del texto para adaptarlos a tus preferencias espec\u00edficas de dise\u00f1o.<\/p>\n
Este m\u00e9todo te ofrece una ventaja a\u00f1adida, ya que puedes ajustar las sombras horizontales y verticales seg\u00fan lo que convenga al texto. Tambi\u00e9n puedes a\u00f1adir un peque\u00f1o radio de desenfoque:<\/p>\n
h1 {\n  color: #fff;\n  text-shadow:\n    3px 3px 2px #000,\n    -3px 3px 2px #000,\n    -3px -3px 0 #000,\n    3px -3px 0 #000;\n}<\/code><\/pre>\n
\"A\u00f1adir
A\u00f1adir desenfoque al contorno con la propiedad sombra de texto.<\/figcaption><\/figure>\n
Una limitaci\u00f3n del uso de sombras de texto es que puedes encontrarte con un efecto de trazo discontinuo cuando la longitud de la sombra supera 1 p\u00edxel (lo ver\u00e1s si lo comparas con el m\u00e9todo text-stroke<\/code> ).<\/p>\n
Combinaci\u00f3n de las Propiedades text-stroke y text-shadow<\/h2>\n
Puedes combinar ambas propiedades para conseguir un efecto visualmente impactante que combine un contorno de texto perfecto con un sutil desenfoque y los efectos adicionales que ofrece la propiedad text-shadow<\/code>. Esta combinaci\u00f3n permite un enfoque vers\u00e1til y personalizable para mejorar el aspecto de tu texto.<\/p>\n
h1 {\n  -webkit-text-stroke: 1px black;\n   color: white;\n   text-shadow:\n       3px 3px 0 #000,\n     -1px -1px 0 #000,  \n      1px -1px 0 #000,\n      -1px 1px 0 #000,\n       1px 1px 0 #000;\n}<\/code><\/pre>\n
\"Combinar
Combinar text-stroke y text-shadow para crear un contorno<\/figcaption><\/figure>\n
Tambi\u00e9n puedes prescindir de tener que a\u00f1adir sombras individuales a cada esquina y aplicar una sombra general con un trazo:<\/p>\n
#heading-1{\n\tcolor: white;\n\t-webkit-text-stroke: 1px #F8F8F8;\n\ttext-shadow: 0px 1px 4px #23430C;\n}\n\n#heading-2{\n\tcolor: white;\n\t-webkit-text-stroke: 1px #F8F8F8;\n\ttext-shadow: 0px 2px 4px red;\n}\n\n#heading-3{\n\tcolor: #333;\n\t-webkit-text-stroke: 1px #282828;\n\ttext-shadow: 0px 4px 4px #282828;\n}<\/code><\/pre>\n
\"M\u00e1s
M\u00e1s ejemplos de implementaci\u00f3n de contornos con text-stroke y text-shadow<\/figcaption><\/figure>\n
Resumen<\/h2>\n
Tanto las propiedades text-stroke<\/code> como text-shadow<\/code> ofrecen valiosas opciones para a\u00f1adir contornos a tu texto. La elecci\u00f3n entre ellas depende de la compatibilidad del navegador, de los efectos deseados y del nivel de control que necesites para tu dise\u00f1o.<\/p>\n
Experimenta con diferentes t\u00e9cnicas y encuentra el mejor enfoque para crear contornos de texto visualmente atractivos y cautivadores. Puedes combinar las prestaciones de alojamiento de Kinsta<\/a> con tu proyecto completo para conseguir una presencia online atractiva.<\/p>\n
\u00a1Comparte tu experiencia! \u00bfHas utilizado alg\u00fan otro enfoque que no se haya tratado en este art\u00edculo? H\u00e1znoslo saber en los comentarios.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
En lo relativo al dise\u00f1o web, el atractivo visual de los contenidos desempe\u00f1a un papel fundamental a la hora de captar y retener la atenci\u00f3n de …<\/p>\n","protected":false},"author":287,"featured_media":67313,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1337],"class_list":["post-67312","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-herramientas-de-desarrollo-web"],"yoast_head":"\nC\u00f3mo A\u00f1adir un Contorno de Texto con CSS - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Mejora el aspecto visual de tu sitio web y haz que tu texto destaque con un atractivo contorno de texto. \u00a1Empieza a aplicar t\u00e9cnicas CSS hoy mismo!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo A\u00f1adir Contorno de Texto con CSS\" \/>\n<meta property=\"og:description\" content=\"Mejora el aspecto visual de tu sitio web y haz que tu texto destaque con un atractivo contorno de texto. \u00a1Empieza a aplicar t\u00e9cnicas CSS hoy mismo!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-28T12:13:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-17T12:48:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/css-text-outline.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Mejora el aspecto visual de tu sitio web y haz que tu texto destaque con un atractivo contorno de texto. \u00a1Empieza a aplicar t\u00e9cnicas CSS hoy mismo!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/css-text-outline.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"C\u00f3mo A\u00f1adir Contorno de Texto con CSS\",\"datePublished\":\"2023-06-28T12:13:20+00:00\",\"dateModified\":\"2025-01-17T12:48:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/\"},\"wordCount\":1044,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/css-text-outline.jpg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/\",\"url\":\"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/\",\"name\":\"C\u00f3mo A\u00f1adir un Contorno de Texto con CSS - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/css-text-outline.jpg\",\"datePublished\":\"2023-06-28T12:13:20+00:00\",\"dateModified\":\"2025-01-17T12:48:38+00:00\",\"description\":\"Mejora el aspecto visual de tu sitio web y haz que tu texto destaque con un atractivo contorno de texto. \u00a1Empieza a aplicar t\u00e9cnicas CSS hoy mismo!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/css-text-outline.jpg\",\"contentUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/css-text-outline.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Herramientas de Desarrollo Web\",\"item\":\"https:\/\/kinqsta.com\/es\/secciones\/herramientas-de-desarrollo-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo A\u00f1adir Contorno de Texto con CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/es\/#website\",\"url\":\"https:\/\/kinqsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/es\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo A\u00f1adir un Contorno de Texto con CSS - Kinsta\u00ae","description":"Mejora el aspecto visual de tu sitio web y haz que tu texto destaque con un atractivo contorno de texto. \u00a1Empieza a aplicar t\u00e9cnicas CSS hoy mismo!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo A\u00f1adir Contorno de Texto con CSS","og_description":"Mejora el aspecto visual de tu sitio web y haz que tu texto destaque con un atractivo contorno de texto. \u00a1Empieza a aplicar t\u00e9cnicas CSS hoy mismo!","og_url":"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2023-06-28T12:13:20+00:00","article_modified_time":"2025-01-17T12:48:38+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/css-text-outline.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Mejora el aspecto visual de tu sitio web y haz que tu texto destaque con un atractivo contorno de texto. \u00a1Empieza a aplicar t\u00e9cnicas CSS hoy mismo!","twitter_image":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/css-text-outline.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Joel Olawanle","Tiempo de lectura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"C\u00f3mo A\u00f1adir Contorno de Texto con CSS","datePublished":"2023-06-28T12:13:20+00:00","dateModified":"2025-01-17T12:48:38+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/"},"wordCount":1044,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/css-text-outline.jpg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/","url":"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/","name":"C\u00f3mo A\u00f1adir un Contorno de Texto con CSS - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinqsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/css-text-outline.jpg","datePublished":"2023-06-28T12:13:20+00:00","dateModified":"2025-01-17T12:48:38+00:00","description":"Mejora el aspecto visual de tu sitio web y haz que tu texto destaque con un atractivo contorno de texto. \u00a1Empieza a aplicar t\u00e9cnicas CSS hoy mismo!","breadcrumb":{"@id":"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/#primaryimage","url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/css-text-outline.jpg","contentUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/css-text-outline.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/es\/blog\/contorno-texto-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Herramientas de Desarrollo Web","item":"https:\/\/kinqsta.com\/es\/secciones\/herramientas-de-desarrollo-web\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo A\u00f1adir Contorno de Texto con CSS"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/es\/#website","url":"https:\/\/kinqsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinqsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinqsta.com\/es\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/67312","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/comments?post=67312"}],"version-history":[{"count":8,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/67312\/revisions"}],"predecessor-version":[{"id":67569,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/67312\/revisions\/67569"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67312\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67312\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67312\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67312\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67312\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67312\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67312\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67312\/translations\/es"},{"href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67312\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/media\/67313"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/media?parent=67312"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/tags?post=67312"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/topic?post=67312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}