{"id":736,"date":"2024-04-23T21:01:13","date_gmt":"2024-04-24T00:01:13","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=736"},"modified":"2025-11-07T15:05:05","modified_gmt":"2025-11-07T18:05:05","slug":"funcoes-url-e-calc","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/funcoes-url-e-calc\/","title":{"rendered":"Fun\u00e7\u00f5es url e calc"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tempo de leitura: <\/span> <span class=\"rt-time\"> 3<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Fun\u00e7\u00f5es url e calc<\/strong>: O CSS n\u00e3o \u00e9 apenas uma linguagem de declara\u00e7\u00e3o est\u00e1tica; ele inclui funcionalidades din\u00e2micas que permitem a manipula\u00e7\u00e3o de recursos e o c\u00e1lculo matem\u00e1tico de valores de propriedade. As fun\u00e7\u00f5es <strong><code>url()<\/code><\/strong> e <strong><code>calc()<\/code><\/strong> s\u00e3o as principais respons\u00e1veis por estender essa capacidade, tornando o c\u00f3digo mais flex\u00edvel e reduzindo a depend\u00eancia de scripts para tarefas simples de layout.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Neste artigo, vamos explorar como essas duas fun\u00e7\u00f5es essenciais operam, suas sintaxes e como utiliz\u00e1-las para criar designs mais robustos e adaptativos.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">1. Fun\u00e7\u00e3o <code>url()<\/code>: Referenciando Recursos<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">A fun\u00e7\u00e3o <code>url()<\/code> \u00e9 usada para especificar um URI (Uniform Resource Identifier) em propriedades CSS que esperam um link para um recurso externo. Ela \u00e9 essencial para importar imagens, fontes e outros recursos.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Sintaxe e Aplica\u00e7\u00f5es Comuns<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">A sintaxe \u00e9 simples, envolvendo o caminho do recurso dentro dos par\u00eanteses. O uso de aspas (simples ou duplas) \u00e9 opcional, mas recomendado para consist\u00eancia.<\/p>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Uso<\/strong><\/td><td><strong>Propriedade<\/strong><\/td><td><strong>Exemplo<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Imagem de Fundo<\/strong><\/td><td><code>background-image<\/code><\/td><td><code>background-image: url('caminho\/fundo.png');<\/code><\/td><\/tr><tr><td><strong>Fontes Externas<\/strong><\/td><td><code>@font-face<\/code><\/td><td><code>@font-face { src: url('fonts\/MinhaFonte.woff2'); }<\/code><\/td><\/tr><tr><td><strong>Conte\u00fado Gerado<\/strong><\/td><td><code>content<\/code><\/td><td><code>h2::before { content: url('icone.svg'); }<\/code><\/td><\/tr><tr><td><strong>Importa\u00e7\u00e3o CSS<\/strong><\/td><td><code>@import<\/code><\/td><td><code>@import url('theme\/reset.css');<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83e\udded Caminhos Relativos vs. Absolutos<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Relativo:<\/strong> O caminho \u00e9 resolvido em rela\u00e7\u00e3o ao local do arquivo <strong>CSS<\/strong> que cont\u00e9m a declara\u00e7\u00e3o <code>url()<\/code>.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Absoluto:<\/strong> O caminho come\u00e7a na raiz do site (<code>\/assets\/image.jpg<\/code>) ou usa um URL completo (<code>https:\/\/exemplo.com\/image.jpg<\/code>).<\/li>\n<\/ul>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">2. Fun\u00e7\u00e3o <code>calc()<\/code>: Matem\u00e1tica no Layout<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">A fun\u00e7\u00e3o <code>calc()<\/code> permite que voc\u00ea execute opera\u00e7\u00f5es matem\u00e1ticas b\u00e1sicas (adi\u00e7\u00e3o, subtra\u00e7\u00e3o, multiplica\u00e7\u00e3o, divis\u00e3o) para definir valores de propriedade.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u26a0\ufe0f Regra Cr\u00edtica de Sintaxe<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Para <code>calc()<\/code>, os espa\u00e7os em torno dos operadores <strong><code>+<\/code><\/strong> e <strong><code>-<\/code><\/strong> s\u00e3o <strong>obrigat\u00f3rios<\/strong>. Sem eles, o navegador pode interpret\u00e1 o valor como uma string:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Correto (Com espa\u00e7os) *\/\n.container {\n  width: calc(100% - 20px); \n}\n\n\/* Incorreto (Sem espa\u00e7os - n\u00e3o funciona) *\/\n.container {\n  width: calc(100%-20px); \n}\n<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">O Poder da Unidade Mista<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">A principal vantagem do <code>calc()<\/code> \u00e9 a capacidade de <strong>misturar unidades relativas e absolutas<\/strong> na mesma express\u00e3o, algo imposs\u00edvel com unidades tradicionais.<\/p>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Propriedade<\/strong><\/td><td><strong>Express\u00e3o<\/strong><\/td><td><strong>Significado<\/strong><\/td><\/tr><\/thead><tbody><tr><td><code>width<\/code><\/td><td><code>calc(100% - 40px)<\/code><\/td><td>Ocupa toda a largura, menos 40px (perfeito para centralizar com <code>margin: 20px<\/code>).<\/td><\/tr><tr><td><code>height<\/code><\/td><td><code>calc(100vh - 60px)<\/code><\/td><td>A altura da <em>viewport<\/em> menos o tamanho fixo do cabe\u00e7alho.<\/td><\/tr><tr><td><code>font-size<\/code><\/td><td><code>calc(1rem + 0.5vw)<\/code><\/td><td>Cria um tamanho de fonte responsivo que escala com a <em>viewport<\/em> mas tem um tamanho base m\u00ednimo (<code>1rem<\/code>).<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Exemplos Avan\u00e7ados de <code>calc()<\/code><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">CSS<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Cria tr\u00eas colunas de largura igual, com um espa\u00e7o de 1rem entre elas *\/\n.tres-colunas {\n  width: calc((100% \/ 3) - 1rem); \n  \/* (33.33%) - 1rem *\/\n}\n\n\/* Centraliza um item que tem largura mista (50% e 100px) *\/\n.item-centralizado {\n  left: calc(50% - 50px); \n  \/* Desloca 50% para a direita, e volta METADE da largura fixa de 100px. *\/\n}\n<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">3. Considera\u00e7\u00f5es de Uso e Performance<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Compatibilidade:<\/strong> A fun\u00e7\u00e3o <code>calc()<\/code> \u00e9 amplamente suportada em todos os navegadores modernos (e \u00e9 seguro usar).<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Prioridade:<\/strong> Use par\u00eanteses para agrupar opera\u00e7\u00f5es complexas e garantir a ordem de avalia\u00e7\u00e3o correta (como na matem\u00e1tica: multiplica\u00e7\u00e3o e divis\u00e3o s\u00e3o processadas primeiro).<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Otimiza\u00e7\u00e3o:<\/strong> O navegador otimiza a fun\u00e7\u00e3o <code>calc()<\/code> sempre que poss\u00edvel (por exemplo, <code>calc(10px + 5px)<\/code> \u00e9 calculado para <code>15px<\/code> antes da renderiza\u00e7\u00e3o).<\/li>\n<\/ul>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">\u2705 Conclus\u00e3o Fun\u00e7\u00f5es url e calc<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">As fun\u00e7\u00f5es <code>url()<\/code> e <code>calc()<\/code> s\u00e3o pilares do CSS moderno. Enquanto <code>url()<\/code> garante que seus recursos estejam prontamente dispon\u00edveis, <code>calc()<\/code> desbloqueia uma nova dimens\u00e3o de flexibilidade de layout. A capacidade de misturar unidades (<code>%<\/code> com <code>px<\/code>, <code>vh<\/code> com <code>rem<\/code>) com <code>calc()<\/code> permite a cria\u00e7\u00e3o de interfaces verdadeiramente responsivas e previs\u00edveis, reduzindo a complexidade de layouts avan\u00e7ados.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Toda jornada tem um in\u00edcio, e o in\u00edcio para se tornar um desenvolvedor web \u00e9 dominar as seguintes tecnologias, que voc\u00ea encontra aqui mesmo:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/html\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"426\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp\" alt=\"HTML\" class=\"wp-image-600\" srcset=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp 758w, https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html-300x169.webp 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><figcaption class=\"wp-element-caption\">HTML<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/css\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"426\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp\" alt=\"CSS\" class=\"wp-image-702\" srcset=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp 758w, https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux-300x169.webp 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><figcaption class=\"wp-element-caption\">CSS<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/javascript\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"426\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript.webp\" alt=\"Javascript\" class=\"wp-image-804\" srcset=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript.webp 758w, https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript-300x169.webp 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><figcaption class=\"wp-element-caption\">JavaScript<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">E se voc\u00ea gosta do nosso conte\u00fado, n\u00e3o deixe de contribuir adquirindo os servi\u00e7os e produtos dos nossos apoiadores e empresas que somos associados:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/hostinger.com.br\/?REFERRALCODE=1THIAGO62\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/03\/hostinger.png\" alt=\"Hospedagem Hostinger\" class=\"wp-image-92\"\/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/amzn.to\/3SNDYlc\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/ofertas-amazon.webp\" alt=\"Ofertas Amazon\" class=\"wp-image-1308\"\/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/amzn.to\/3SNKmt0\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/amazonprime.webp\" alt=\"Amazon Prime\" class=\"wp-image-1307\"\/><\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tempo de leitura: <\/span> <span class=\"rt-time\"> 3<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>Fun\u00e7\u00f5es url e calc: O CSS n\u00e3o \u00e9 apenas uma linguagem de declara\u00e7\u00e3o est\u00e1tica; ele&#8230;<\/p>\n","protected":false},"author":1,"featured_media":702,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-736","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","wpcat-7-id"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Fun\u00e7\u00f5es url e calc - BLOG THIAGO ROSSI<\/title>\n<meta name=\"description\" content=\"Fun\u00e7\u00f5es url() e calc(): Neste artigo, vamos explorar em detalhes como essas fun\u00e7\u00f5es funcionam e como utiliz\u00e1-las em seus projetos...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thiagorossi.com.br\/blog\/funcoes-url-e-calc\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fun\u00e7\u00f5es url e calc - BLOG THIAGO ROSSI\" \/>\n<meta property=\"og:description\" content=\"Fun\u00e7\u00f5es url() e calc(): Neste artigo, vamos explorar em detalhes como essas fun\u00e7\u00f5es funcionam e como utiliz\u00e1-las em seus projetos...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thiagorossi.com.br\/blog\/funcoes-url-e-calc\/\" \/>\n<meta property=\"og:site_name\" content=\"BLOG THIAGO ROSSI\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-24T00:01:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-07T18:05:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"758\" \/>\n\t<meta property=\"og:image:height\" content=\"426\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Thiago Rossi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thiago Rossi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/funcoes-url-e-calc\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/funcoes-url-e-calc\\\/\"},\"author\":{\"name\":\"Thiago Rossi\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\"},\"headline\":\"Fun\u00e7\u00f5es url e calc\",\"datePublished\":\"2024-04-24T00:01:13+00:00\",\"dateModified\":\"2025-11-07T18:05:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/funcoes-url-e-calc\\\/\"},\"wordCount\":539,\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/funcoes-url-e-calc\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/funcoes-url-e-calc\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/funcoes-url-e-calc\\\/\",\"name\":\"Fun\u00e7\u00f5es url e calc - BLOG THIAGO ROSSI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/funcoes-url-e-calc\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/funcoes-url-e-calc\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"datePublished\":\"2024-04-24T00:01:13+00:00\",\"dateModified\":\"2025-11-07T18:05:05+00:00\",\"description\":\"Fun\u00e7\u00f5es url() e calc(): Neste artigo, vamos explorar em detalhes como essas fun\u00e7\u00f5es funcionam e como utiliz\u00e1-las em seus projetos...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/funcoes-url-e-calc\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/funcoes-url-e-calc\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/funcoes-url-e-calc\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"width\":758,\"height\":426,\"caption\":\"CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/funcoes-url-e-calc\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fun\u00e7\u00f5es url e calc\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"name\":\"THIAGO ROSSI\",\"description\":\"Mais de 20 anos de experi\u00eancia no mercado de TI!\",\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"alternateName\":\"TR | CURSO WEB DEV\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\",\"name\":\"THIAGO ROSSI\",\"alternateName\":\"TR | CURSO WEB DEV\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"width\":300,\"height\":300,\"caption\":\"THIAGO ROSSI\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\",\"name\":\"Thiago Rossi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"caption\":\"Thiago Rossi\"},\"description\":\"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \\\"GDD \u2013 O Guia Definitivo\\\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.\",\"sameAs\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\",\"https:\\\/\\\/instagram.com\\\/thiagorossix86\",\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"],\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/author\\\/thiagorossi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Fun\u00e7\u00f5es url e calc - BLOG THIAGO ROSSI","description":"Fun\u00e7\u00f5es url() e calc(): Neste artigo, vamos explorar em detalhes como essas fun\u00e7\u00f5es funcionam e como utiliz\u00e1-las em seus projetos...","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:\/\/thiagorossi.com.br\/blog\/funcoes-url-e-calc\/","og_locale":"pt_BR","og_type":"article","og_title":"Fun\u00e7\u00f5es url e calc - BLOG THIAGO ROSSI","og_description":"Fun\u00e7\u00f5es url() e calc(): Neste artigo, vamos explorar em detalhes como essas fun\u00e7\u00f5es funcionam e como utiliz\u00e1-las em seus projetos...","og_url":"https:\/\/thiagorossi.com.br\/blog\/funcoes-url-e-calc\/","og_site_name":"BLOG THIAGO ROSSI","article_published_time":"2024-04-24T00:01:13+00:00","article_modified_time":"2025-11-07T18:05:05+00:00","og_image":[{"width":758,"height":426,"url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","type":"image\/webp"}],"author":"Thiago Rossi","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Thiago Rossi","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thiagorossi.com.br\/blog\/funcoes-url-e-calc\/#article","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/funcoes-url-e-calc\/"},"author":{"name":"Thiago Rossi","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87"},"headline":"Fun\u00e7\u00f5es url e calc","datePublished":"2024-04-24T00:01:13+00:00","dateModified":"2025-11-07T18:05:05+00:00","mainEntityOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/funcoes-url-e-calc\/"},"wordCount":539,"publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/funcoes-url-e-calc\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","articleSection":["CSS"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/thiagorossi.com.br\/blog\/funcoes-url-e-calc\/","url":"https:\/\/thiagorossi.com.br\/blog\/funcoes-url-e-calc\/","name":"Fun\u00e7\u00f5es url e calc - BLOG THIAGO ROSSI","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/funcoes-url-e-calc\/#primaryimage"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/funcoes-url-e-calc\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","datePublished":"2024-04-24T00:01:13+00:00","dateModified":"2025-11-07T18:05:05+00:00","description":"Fun\u00e7\u00f5es url() e calc(): Neste artigo, vamos explorar em detalhes como essas fun\u00e7\u00f5es funcionam e como utiliz\u00e1-las em seus projetos...","breadcrumb":{"@id":"https:\/\/thiagorossi.com.br\/blog\/funcoes-url-e-calc\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thiagorossi.com.br\/blog\/funcoes-url-e-calc\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/funcoes-url-e-calc\/#primaryimage","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","width":758,"height":426,"caption":"CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/thiagorossi.com.br\/blog\/funcoes-url-e-calc\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thiagorossi.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Fun\u00e7\u00f5es url e calc"}]},{"@type":"WebSite","@id":"https:\/\/thiagorossi.com.br\/blog\/#website","url":"https:\/\/thiagorossi.com.br\/blog\/","name":"THIAGO ROSSI","description":"Mais de 20 anos de experi\u00eancia no mercado de TI!","publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"alternateName":"TR | CURSO WEB DEV","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thiagorossi.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/thiagorossi.com.br\/blog\/#organization","name":"THIAGO ROSSI","alternateName":"TR | CURSO WEB DEV","url":"https:\/\/thiagorossi.com.br\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","width":300,"height":300,"caption":"THIAGO ROSSI"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/linkedin.com\/in\/thiagox86"]},{"@type":"Person","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87","name":"Thiago Rossi","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","caption":"Thiago Rossi"},"description":"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \"GDD \u2013 O Guia Definitivo\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.","sameAs":["https:\/\/thiagorossi.com.br\/blog","https:\/\/instagram.com\/thiagorossix86","https:\/\/linkedin.com\/in\/thiagox86"],"url":"https:\/\/thiagorossi.com.br\/blog\/author\/thiagorossi\/"}]}},"_links":{"self":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/comments?post=736"}],"version-history":[{"count":1,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/736\/revisions"}],"predecessor-version":[{"id":4411,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/736\/revisions\/4411"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media\/702"}],"wp:attachment":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media?parent=736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/categories?post=736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/tags?post=736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}