{"id":70783,"date":"2023-06-28T13:14:54","date_gmt":"2023-06-28T12:14:54","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=70783&preview=true&preview_id=70783"},"modified":"2023-06-30T09:57:29","modified_gmt":"2023-06-30T08:57:29","slug":"contorno-testo-css","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/","title":{"rendered":"Come Aggiungere un Contorno al Testo con i CSS"},"content":{"rendered":"

Quando si parla di web design<\/a>, l’aspetto visivo dei contenuti gioca un ruolo fondamentale nel catturare e mantenere l’attenzione del pubblico. Un aspetto del design che pu\u00f2 avere un impatto significativo sull’estetica generale e sulla leggibilit\u00e0 di un sito web \u00e8 lo stile del testo.<\/p>\n

Lo stile del testo va oltre la semplice scelta del font<\/a> e del colore del carattere<\/a>. Si tratta di combinare con cura varie propriet\u00e0 CSS<\/a> per ottenere l’effetto desiderato, come ad esempio l’utilizzo dei contorni del testo per renderlo visivamente accattivante.<\/p>\n

In questo articolo approfondiamo l’arte di modellare i contorni dei testi utilizzando i CSS ed esploriamo il loro funzionamento e le varie opzioni da utilizzare.<\/p>\n

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

Capire i testi web<\/h2>\n

Il testo web \u00e8 il testo che viene visualizzato su una pagina web. I font svolgono un ruolo fondamentale nella visualizzazione del testo sul web. Questi font sono essenzialmente grafica vettoriale, il che significa che i dati dei pixel non li limitano e possono essere resi in varie dimensioni mantenendo la loro nitidezza e chiarezza.<\/p>\n

Un aspetto affascinante della grafica vettoriale dei font \u00e8 la possibilit\u00e0 di applicare tratti o contorni ai singoli caratteri. Cos\u00ec come \u00e8 possibile disegnare un tratto intorno a una forma in programmi vettoriali come Adobe Illustrator, i CSS forniscono i mezzi per ottenere lo stesso effetto sul testo web.<\/p>\n

2 metodi per aggiungere un contorno al testo con i CSS<\/h2>\n

Quando si tratta di aggiungere un effetto contorno al testo utilizzando i CSS, ci sono due metodi che si possono utilizzare. Vediamo i lati negativi di questi metodi e come utilizzarli.<\/p>\n

1. Utilizzo della propriet\u00e0 text-stroke<\/h3>\n

text-stroke<\/code> \u00e8 una propriet\u00e0 CSS che si pu\u00f2 utilizzare per aggiungere un contorno ai testi. Permette di specificare i contorni width<\/code> e color<\/code>. Questa propriet\u00e0 \u00e8 supportata solo dai browser basati su WebKit e per poterla utilizzare \u00e8 necessario aggiungere il prefisso -webkit-<\/code>.<\/p>\n

Ad esempio, aggiungiamo il tratto a un testo di intestazione h1<\/code> – “Welcome to Kinsta”:<\/p>\n

<h1>Welcome to Kinsta<\/h1><\/code><\/pre>\n
In questo modo la propriet\u00e0 text-stroke<\/code> verr\u00e0 utilizzata con il prefisso -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> specificano rispettivamente i prefissi width<\/code> e color<\/code> del tratto. Imposta width<\/code> su 3px<\/code> e color<\/code> su black<\/code>.<\/p>\n
\"Aggiunta
Aggiunta del contorno con la propriet\u00e0 text-stroke.<\/figcaption><\/figure>\n
Queste due propriet\u00e0 possono essere combinate con la propriet\u00e0 stenografica -webkit-text-stroke<\/code>, che specifica simultaneamente i tratti color<\/code> e width<\/code>.<\/p>\n
h1 {\n  -webkit-text-stroke: 3px black;\n}<\/code><\/pre>\n
In questo modo si otterr\u00e0 lo stesso risultato.<\/p>\n
Supporto per la propriet\u00e0 text-stroke<\/h4>\n
Secondo caniuse<\/a>, il browser Internet Explorer non supporta la propriet\u00e0 text-stroke<\/code>.<\/p>\n
\"Supporto
Supporto per la propriet\u00e0 text-stroke.<\/figcaption><\/figure>\n
Se utilizzate la propriet\u00e0 text-stroke<\/code> per impostare il contorno dei vostri testi e un utente utilizza un browser non supportato, il testo potrebbe non essere visibile se il suo colore corrisponde al colore dello sfondo.<\/p>\n
Per ovviare a questo problema, potete utilizzare la propriet\u00e0 -webkit-text-fill-color<\/code> per impostare un color<\/code> per il testo e impostare un colore di riserva con la propriet\u00e0 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
\"Aggiunta
Aggiunta del supporto per i browser non supportati.<\/figcaption><\/figure>\n
Se un browser non supporta la propriet\u00e0 text-stroke<\/code>, utilizzer\u00e0 il colore impostato dalla propriet\u00e0 color<\/code>.<\/p>\n
\"Alternativa
Alternativa quando il browser non \u00e8 supportato.<\/figcaption><\/figure>\n
Un’altra opzione consiste nel verificare che il browser supporti la propriet\u00e0 -webkit-text-stroke<\/code> prima di aggiungere lo stile.<\/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. Usare la propriet\u00e0 text-shadow<\/h3>\n
Se non volete gestire le differenze di supporto, potete utilizzare la propriet\u00e0 text-shadow<\/code>, che supporta tutte<\/a> le ultime versioni dei browser pi\u00f9 diffusi.<\/p>\n
\"Supporto
Supporto per la propriet\u00e0 text-shadow.<\/figcaption><\/figure>\n
Per la propriet\u00e0 text-shadow<\/code>, utilizzeremo quattro ombreggiature, ciascuna in alto a destra<\/strong>, in alto a sinistra<\/strong>, in basso a sinistra<\/strong> e in basso a destra<\/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
In questo esempio, utilizziamo quattro ombreggiature per creare un effetto di contorno del testo. Ogni ombreggiatura ha un offset di 3 pixel dal testo e il colore \u00e8 impostato sul nero (#000<\/code>). Questo effetto \u00e8 simile a quello generato dal primo metodo.<\/p>\n
\"Aggiunta
Aggiunta di un contorno con la propriet\u00e0 text-shadow.<\/figcaption><\/figure>\n
Applicando le ombreggiature a tutti e quattro gli angoli del testo, otteniamo un contorno ben definito. Sentitevi liberi di regolare gli offset dei pixel, i colori delle ombreggiature o i colori del testo per adattarli alle vostre preferenze di design specifiche.<\/p>\n
Questo metodo offre un ulteriore vantaggio in quanto \u00e8 possibile regolare le ombreggiature orizzontali e verticali in base alle esigenze del testo. Potete anche aggiungere un piccolo raggio di sfocatura:<\/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
\"Aggiungere
Aggiungere una sfocatura al contorno con la propriet\u00e0 text-shadow.<\/figcaption><\/figure>\n
Un limite dell’utilizzo dell’ombreggiatura del testo \u00e8 che potrebbe verificarsi un effetto di tratto discontinuo quando la lunghezza dell’ombra supera 1 pixel (lo vedrete confrontandolo con il metodo text-stroke<\/code> ).<\/p>\n
Combinare le propriet\u00e0 text-stroke e text-shadow<\/h2>\n
\u00c8 possibile combinare entrambe le propriet\u00e0 per ottenere un effetto visivamente straordinario che combina un perfetto contorno del testo con una sottile sfocatura e gli effetti aggiuntivi offerti dalla propriet\u00e0 text-shadow<\/code>. Questa combinazione consente un approccio versatile e personalizzabile per migliorare l’aspetto del testo.<\/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
\"Combinare
Combinare text-stroke e text-shadow per creare un contorno.<\/figcaption><\/figure>\n
Potete anche evitare di aggiungere ombreggiature individuali a ogni angolo e applicare un’ombra generale con una sola linea:<\/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
\"Altri
Altri esempi di contorno realizzati con text-stroke e text-shadow.<\/figcaption><\/figure>\n
Riepilogo<\/h2>\n
Entrambe le propriet\u00e0 text-stroke<\/code> e text-shadow<\/code> offrono valide opzioni per aggiungere contorni a un testo. La scelta dipende dalla compatibilit\u00e0 con il browser, dagli effetti desiderati e dal livello di controllo che desiderate per il vostro progetto.<\/p>\n
Sperimentate diverse tecniche e trovate l’approccio migliore per creare contorni di testo di grande impatto visivo. Potete combinare le funzionalit\u00e0 di hosting di Kinsta<\/a> con il vostro progetto completo per ottenere una presenza online accattivante.<\/p>\n
Condividete la vostra esperienza! Avete utilizzato altri approcci non trattati in questo articolo? Fatecelo sapere nei commenti.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Quando si parla di web design, l’aspetto visivo dei contenuti gioca un ruolo fondamentale nel catturare e mantenere l’attenzione del pubblico. Un aspetto del design che …<\/p>\n","protected":false},"author":287,"featured_media":70784,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[25883],"class_list":["post-70783","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-strumenti-di-sviluppo-web"],"yoast_head":"\nCome Aggiungere un Contorno al Testo con i CSS - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Migliora lo stile visivo del tuo sito web e fai risaltare il tuo testo con un contorno di testo. Implementa le tecniche CSS oggi stesso!\" \/>\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\/it\/blog\/contorno-testo-css\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come Aggiungere un Contorno al Testo con i CSS\" \/>\n<meta property=\"og:description\" content=\"Migliora lo stile visivo del tuo sito web e fai risaltare il tuo testo con un contorno di testo. Implementa le tecniche CSS oggi stesso!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-28T12:14:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-30T08:57:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/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=\"Migliora lo stile visivo del tuo sito web e fai risaltare il tuo testo con un contorno di testo. Implementa le tecniche CSS oggi stesso!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/css-text-outline.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Come Aggiungere un Contorno al Testo con i CSS\",\"datePublished\":\"2023-06-28T12:14:54+00:00\",\"dateModified\":\"2023-06-30T08:57:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/\"},\"wordCount\":940,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/css-text-outline.jpg\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/\",\"name\":\"Come Aggiungere un Contorno al Testo con i CSS - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/css-text-outline.jpg\",\"datePublished\":\"2023-06-28T12:14:54+00:00\",\"dateModified\":\"2023-06-30T08:57:29+00:00\",\"description\":\"Migliora lo stile visivo del tuo sito web e fai risaltare il tuo testo con un contorno di testo. Implementa le tecniche CSS oggi stesso!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/css-text-outline.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/css-text-outline.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Strumenti di Sviluppo Web\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/strumenti-di-sviluppo-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come Aggiungere un Contorno al Testo con i CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"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\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/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\/it\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come Aggiungere un Contorno al Testo con i CSS - Kinsta\u00ae","description":"Migliora lo stile visivo del tuo sito web e fai risaltare il tuo testo con un contorno di testo. Implementa le tecniche CSS oggi stesso!","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\/it\/blog\/contorno-testo-css\/","og_locale":"it_IT","og_type":"article","og_title":"Come Aggiungere un Contorno al Testo con i CSS","og_description":"Migliora lo stile visivo del tuo sito web e fai risaltare il tuo testo con un contorno di testo. Implementa le tecniche CSS oggi stesso!","og_url":"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2023-06-28T12:14:54+00:00","article_modified_time":"2023-06-30T08:57:29+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/css-text-outline.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Migliora lo stile visivo del tuo sito web e fai risaltare il tuo testo con un contorno di testo. Implementa le tecniche CSS oggi stesso!","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/css-text-outline.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Joel Olawanle","Tempo di lettura stimato":"5 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Come Aggiungere un Contorno al Testo con i CSS","datePublished":"2023-06-28T12:14:54+00:00","dateModified":"2023-06-30T08:57:29+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/"},"wordCount":940,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/css-text-outline.jpg","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/","url":"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/","name":"Come Aggiungere un Contorno al Testo con i CSS - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/css-text-outline.jpg","datePublished":"2023-06-28T12:14:54+00:00","dateModified":"2023-06-30T08:57:29+00:00","description":"Migliora lo stile visivo del tuo sito web e fai risaltare il tuo testo con un contorno di testo. Implementa le tecniche CSS oggi stesso!","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/css-text-outline.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/css-text-outline.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/contorno-testo-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Strumenti di Sviluppo Web","item":"https:\/\/kinsta.com\/it\/argomenti\/strumenti-di-sviluppo-web\/"},{"@type":"ListItem","position":3,"name":"Come Aggiungere un Contorno al Testo con i CSS"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","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\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/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\/it\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/70783","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=70783"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/70783\/revisions"}],"predecessor-version":[{"id":70807,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/70783\/revisions\/70807"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/70783\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/70783\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/70783\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/70783\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/70783\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/70783\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/70783\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/70783\/translations\/es"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/70783\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/70784"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=70783"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=70783"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=70783"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}