{"id":60576,"date":"2023-06-28T09:17:50","date_gmt":"2023-06-28T12:17:50","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=60576&preview=true&preview_id=60576"},"modified":"2025-01-17T09:48:48","modified_gmt":"2025-01-17T12:48:48","slug":"contorno-de-texto-com-css","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/","title":{"rendered":"Como Adicionar Contorno de Texto com CSS"},"content":{"rendered":"

Quando se trata de web design<\/a>, o apelo visual do seu conte\u00fado desempenha um papel fundamental para capturar e reter a aten\u00e7\u00e3o do seu p\u00fablico. Um aspecto do design que pode afetar significativamente a est\u00e9tica geral e a legibilidade do seu site \u00e9 o estilo do texto.<\/p>\n

O estilo do texto vai al\u00e9m da simples escolha da fonte<\/a> e da cor da fonte<\/a>. Envolve combinar cuidadosamente v\u00e1rias propriedades CSS<\/a> para alcan\u00e7ar o efeito desejado, como utilizar contornos de texto para tornar seu texto visualmente impactante.<\/p>\n

Neste artigo, vamos nos aprofundar na arte de estilizar o contorno de textos usando CSS e explorar como isso funciona juntamente com as v\u00e1rias op\u00e7\u00f5es que voc\u00ea pode usar.<\/p>\n

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

Entendendo os textos da web<\/h2>\n

Os textos na web s\u00e3o textos exibidos em uma p\u00e1gina da web. As fontes desempenham um papel vital na exibi\u00e7\u00e3o de textos na web. Essas fontes s\u00e3o essencialmente gr\u00e1ficos baseados em vetores, o que significa que os dados de pixels n\u00e3o as limitam e podem ser renderizados em v\u00e1rios tamanhos, mantendo sua nitidez e clareza.<\/p>\n

Um aspecto fascinante das fontes serem gr\u00e1ficos baseados em vetores \u00e9 a capacidade de aplicar tra\u00e7os ou contornos ao redor de caracteres individuais. Assim como \u00e9 poss\u00edvel desenhar um tra\u00e7o ao redor de uma forma em programas vetoriais como o Adobe Illustrator, o CSS fornece os meios para alcan\u00e7ar o mesmo efeito em textos na web.<\/p>\n

2 m\u00e9todos para adicionar contorno de texto com CSS<\/h2>\n

Quando se trata de adicionar um efeito de contorno ao seu texto usando CSS, existem dois m\u00e9todos que voc\u00ea pode usar. Vamos explorar e ver as desvantagens desses m\u00e9todos e como us\u00e1-los.<\/p>\n

1. Usando a propriedade text-stroke<\/h3>\n

text-stroke<\/code> \u00e9 uma propriedade CSS que voc\u00ea pode usar para adicionar um contorno aos seus textos. Ela permite que voc\u00ea especifique o width<\/code> e o color<\/code> do contorno. Essa propriedade \u00e9 compat\u00edvel apenas com navegadores baseados no WebKit e, para us\u00e1-la, voc\u00ea deve adicionar o prefixo -webkit-<\/code>.<\/p>\n

Por exemplo, vamos adicionar um contorno a um texto de cabe\u00e7alho h1<\/code> – “Welcome to Kinsta”:<\/p>\n

<h1>Welcome to Kinsta<\/h1><\/code><\/pre>\n
\u00c9 assim que a propriedade text-stroke<\/code> ser\u00e1 usada com o prefixo -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> e -webkit-text-stroke-color<\/code> especificam, respectivamente, a largura width<\/code> e a cor color<\/code> do contorno. Define a largura width<\/code> como 3px e a cor como preta black<\/code>.<\/p>\n
\"Adicionando
Adicionando contorno com a propriedade text-stroke.<\/figcaption><\/figure>\n
Essas duas propriedades acima podem ser combinadas com a propriedade abreviada -webkit-text-stroke<\/code>, que especifica simultaneamente o contorno color<\/code> e width<\/code>.<\/p>\n
h1 {\n  -webkit-text-stroke: 3px black;\n}<\/code><\/pre>\n
Isso dar\u00e1 o mesmo resultado.<\/p>\n
Suporte para a propriedade text-stroke<\/h4>\n
Conforme o\u00a0caniuse<\/a>, n\u00e3o h\u00e1 suporte para a propriedade text-stroke<\/code> no navegador Internet Explorer.<\/p>\n
\"Suporte
Suporte para a propriedade text-stroke.<\/figcaption><\/figure>\n
Se voc\u00ea usar a propriedade text-stroke<\/code> para definir o contorno dos seus textos e um usu\u00e1rio usar um navegador sem suporte, esse texto poder\u00e1 n\u00e3o ser vis\u00edvel se a cor corresponder \u00e0 cor de fundo.<\/p>\n
Para corrigir isso, voc\u00ea pode usar a propriedade -webkit-text-fill-color<\/code> para definir um color<\/code> para o texto e definir uma cor de fallback com a propriedade 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
\"Adicionando
Adicionando suporte para navegadores sem suporte.<\/figcaption><\/figure>\n
Quando um navegador n\u00e3o \u00e9 compat\u00edvel com a propriedade text-stroke<\/code>, ele usa a cor definida pela propriedade color<\/code>.<\/p>\n
\"Fallback
Fallback quando o navegador n\u00e3o \u00e9 compat\u00edvel.<\/figcaption><\/figure>\n
Outra op\u00e7\u00e3o \u00e9 confirmar se o navegador \u00e9 compat\u00edvel com a propriedade -webkit-text-stroke<\/code> antes de adicionar o 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. Uso da propriedade text-shadow<\/h3>\n
Se n\u00e3o quiser lidar com diferen\u00e7as de suporte, voc\u00ea poder\u00e1 usar a propriedade text-shadow<\/code>, que oferece suporte para todas<\/a> as vers\u00f5es mais recentes dos navegadores mais populares.<\/p>\n
\"Suporte
Suporte para a propriedade text-shadow.<\/figcaption><\/figure>\n
Para a propriedade text-shadow<\/code>, usaremos quatro sombras, cada uma no canto superior direito<\/strong>, no canto superior esquerdo<\/strong>, no canto inferior esquerdo<\/strong> e no canto inferior direito<\/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
Neste exemplo, usamos quatro sombras para criar um efeito de contorno de texto. Cada sombra tem um deslocamento de 3 pixels do texto e a cor \u00e9 definida como preta (#000<\/code>). Esse efeito \u00e9 semelhante ao gerado pelo primeiro m\u00e9todo.<\/p>\n
\"Adicionando
Adicionando contorno com a propriedade text-shadow.<\/figcaption><\/figure>\n
Ao aplicar sombras a todos os quatro cantos do texto, voc\u00ea obt\u00e9m um contorno bem definido. Sinta-se \u00e0 vontade para ajustar os deslocamentos em pixels, as cores das sombras ou as cores do texto de acordo com suas prefer\u00eancias espec\u00edficas de design.<\/p>\n
Esse m\u00e9todo oferece uma vantagem adicional, pois voc\u00ea pode ajustar as sombras horizontais e verticais de acordo com o que for mais adequado ao texto. Voc\u00ea tamb\u00e9m pode adicionar um pequeno raio de desfoque:<\/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
\"Adicione
Adicione desfoque ao contorno com a propriedade text-shadow.<\/figcaption><\/figure>\n
Uma limita\u00e7\u00e3o do uso de sombras de texto \u00e9 que voc\u00ea pode encontrar um efeito de tra\u00e7o descont\u00ednuo quando o comprimento da sombra exceder 1 pixel (voc\u00ea ver\u00e1 isso se comparar com o m\u00e9todo text-stroke<\/code> ).<\/p>\n
Combina\u00e7\u00e3o das propriedades text-stroke e text-shadow<\/h2>\n
Voc\u00ea pode combinar as duas propriedades para obter um efeito visualmente impressionante que combine um contorno de texto perfeito com um desfoque sutil e efeitos adicionais oferecidos pela propriedade text-shadow<\/code>. Essa combina\u00e7\u00e3o permite uma abordagem vers\u00e1til e personaliz\u00e1vel para aprimorar a apar\u00eancia do seu 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
\"Combinando
Combinando tra\u00e7ado de texto e sombra de texto para criar um contorno.<\/figcaption><\/figure>\n
Voc\u00ea tamb\u00e9m pode evitar a necessidade de adicionar sombras individuais a cada canto e aplicar uma sombra geral com uma linha:<\/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
\"Mais
Mais exemplos de implementa\u00e7\u00e3o de contorno com tra\u00e7ado de texto e sombra de texto.<\/figcaption><\/figure>\n
Resumo<\/h2>\n
As propriedades text-stroke<\/code> e text-shadow<\/code> oferecem op\u00e7\u00f5es valiosas para voc\u00ea adicionar contornos ao seu texto. A escolha entre elas depende da compatibilidade com o navegador, dos efeitos desejados e do n\u00edvel de controle que voc\u00ea precisa para o seu design.<\/p>\n
Voc\u00ea pode experimentar diferentes t\u00e9cnicas e encontrar a melhor abordagem para criar contornos de texto cativantes e visualmente atraentes. Voc\u00ea pode combinar os recursos de hospedagem da Kinsta<\/a> com seu projeto completo para obter uma presen\u00e7a on-line envolvente.<\/p>\n
Compartilhe sua experi\u00eancia! Voc\u00ea usou alguma outra abordagem n\u00e3o mencionada neste artigo? Compartilhe conosco nos coment\u00e1rios.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Quando se trata de web design, o apelo visual do seu conte\u00fado desempenha um papel fundamental para capturar e reter a aten\u00e7\u00e3o do seu p\u00fablico. Um …<\/p>\n","protected":false},"author":287,"featured_media":60577,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1018],"class_list":["post-60576","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-ferramentas-desenvolvimento-web"],"yoast_head":"\nComo Adicionar Contorno de Texto com CSS - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Aprimore o apelo visual do seu site e destaque seu texto com um contorno de texto atraente. Comece a implementar t\u00e9cnicas de CSS hoje mesmo!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Adicionar Contorno de Texto com CSS\" \/>\n<meta property=\"og:description\" content=\"Aprimore o apelo visual do seu site e destaque seu texto com um contorno de texto atraente. Comece a implementar t\u00e9cnicas de CSS hoje mesmo!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-28T12:17:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-17T12:48:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/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=\"Aprimore o apelo visual do seu site e destaque seu texto com um contorno de texto atraente. Comece a implementar t\u00e9cnicas de CSS hoje mesmo!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/css-text-outline.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\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:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Como Adicionar Contorno de Texto com CSS\",\"datePublished\":\"2023-06-28T12:17:50+00:00\",\"dateModified\":\"2025-01-17T12:48:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/\"},\"wordCount\":1043,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/css-text-outline.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/\",\"name\":\"Como Adicionar Contorno de Texto com CSS - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/css-text-outline.jpg\",\"datePublished\":\"2023-06-28T12:17:50+00:00\",\"dateModified\":\"2025-01-17T12:48:48+00:00\",\"description\":\"Aprimore o apelo visual do seu site e destaque seu texto com um contorno de texto atraente. Comece a implementar t\u00e9cnicas de CSS hoje mesmo!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/css-text-outline.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/css-text-outline.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ferramentas de Desenvolvimento Web\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/ferramentas-desenvolvimento-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Adicionar Contorno de Texto com CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"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:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/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:\/\/kinsta.com\/pt\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Adicionar Contorno de Texto com CSS - Kinsta\u00ae","description":"Aprimore o apelo visual do seu site e destaque seu texto com um contorno de texto atraente. Comece a implementar t\u00e9cnicas de CSS hoje mesmo!","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:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Adicionar Contorno de Texto com CSS","og_description":"Aprimore o apelo visual do seu site e destaque seu texto com um contorno de texto atraente. Comece a implementar t\u00e9cnicas de CSS hoje mesmo!","og_url":"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2023-06-28T12:17:50+00:00","article_modified_time":"2025-01-17T12:48:48+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/css-text-outline.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Aprimore o apelo visual do seu site e destaque seu texto com um contorno de texto atraente. Comece a implementar t\u00e9cnicas de CSS hoje mesmo!","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/css-text-outline.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Joel Olawanle","Tempo estimado de leitura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Como Adicionar Contorno de Texto com CSS","datePublished":"2023-06-28T12:17:50+00:00","dateModified":"2025-01-17T12:48:48+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/"},"wordCount":1043,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/css-text-outline.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/","url":"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/","name":"Como Adicionar Contorno de Texto com CSS - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/css-text-outline.jpg","datePublished":"2023-06-28T12:17:50+00:00","dateModified":"2025-01-17T12:48:48+00:00","description":"Aprimore o apelo visual do seu site e destaque seu texto com um contorno de texto atraente. Comece a implementar t\u00e9cnicas de CSS hoje mesmo!","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/css-text-outline.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/css-text-outline.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Ferramentas de Desenvolvimento Web","item":"https:\/\/kinsta.com\/pt\/topicos\/ferramentas-desenvolvimento-web\/"},{"@type":"ListItem","position":3,"name":"Como Adicionar Contorno de Texto com CSS"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","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:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/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:\/\/kinsta.com\/pt\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/60576","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=60576"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/60576\/revisions"}],"predecessor-version":[{"id":60761,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/60576\/revisions\/60761"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60576\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60576\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60576\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60576\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60576\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60576\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60576\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60576\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60576\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/60577"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=60576"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=60576"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=60576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}