{"id":60512,"date":"2023-06-26T13:54:56","date_gmt":"2023-06-26T16:54:56","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=60512&#038;preview=true&#038;preview_id=60512"},"modified":"2023-08-22T05:39:37","modified_gmt":"2023-08-22T08:39:37","slug":"estilo-de-imagem-css","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/","title":{"rendered":"Estilo de imagem CSS: Aprimorando o Apelo Visual com Estilo"},"content":{"rendered":"<p>Quando se trata de <a href=\"https:\/\/kinsta.com\/pt\/blog\/design-responsivo-web\/\">web design<\/a>, visuais cativantes podem fazer toda a diferen\u00e7a. As imagens desempenham um papel crucial na cria\u00e7\u00e3o de uma experi\u00eancia de usu\u00e1rio envolvente e memor\u00e1vel.<\/p>\n<p>Mas como transformar suas imagens de comuns em extraordin\u00e1rias? \u00c9 a\u00ed que entra o estilo de imagem. Com o poder do <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-css\/\">CSS<\/a> ao seu alcance, voc\u00ea pode liberar sua criatividade e transformar suas imagens em elementos visuais cativantes que deixam uma impress\u00e3o duradoura.<\/p>\n<p>Neste artigo, iremos explorar o mundo do estilo de imagem com CSS, examinando v\u00e1rias t\u00e9cnicas e propriedades que elevar\u00e3o suas habilidades de design web a novos patamares.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Como adicionar imagens em HTML<\/h2>\n<p>Antes de estilizar uma imagem, voc\u00ea deve primeiro adicion\u00e1-la ao documento <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-html\/\">HTML<\/a>. Para fazer isso, voc\u00ea pode usar a tag <code>&lt;img&gt;<\/code>. A tag <code>&lt;img&gt;<\/code> \u00e9 uma tag de fechamento autom\u00e1tico (n\u00e3o requer uma tag de fechamento). Ela tem um atributo <code>src<\/code> que especifica a <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-uma-url\/\">URL<\/a> ou o caminho do arquivo da imagem que voc\u00ea deseja exibir.<\/p>\n<pre><code class=\"language-html\">&lt;img src=\"image.jpg\" alt=\"Description of the image\"&gt;<\/code><\/pre>\n<p>Voc\u00ea tamb\u00e9m pode fornecer uma URL absoluto ou um caminho de arquivo relativo para a imagem.<\/p>\n<pre><code class=\"language-html\">&lt;img src=\"https:\/\/source.unsplash.com\/tMHAmxLyzvA\" alt=\"Boston city skyline\"&gt;<\/code><\/pre>\n<p>O atributo <code>alt<\/code> representa o texto alternativo e \u00e9 essencial para a acessibilidade. A tag <code>&lt;img&gt;<\/code> tamb\u00e9m oferece dois atributos opcionais: <code>width<\/code> e <code>height<\/code>. Esses atributos permitem que voc\u00ea especifique as dimens\u00f5es da imagem em pixels.<\/p>\n<pre><code class=\"language-html\">&lt;img src=\"image.jpg\" alt=\"Description of the image\" width=\"300\" height=\"200\"&gt;<\/code><\/pre>\n<p>No entanto, geralmente \u00e9 recomend\u00e1vel evitar o uso dos atributos <code>width<\/code> e <code>height<\/code>, a menos que voc\u00ea precise manter dimens\u00f5es espec\u00edficas da imagem. Em vez disso, voc\u00ea pode usar CSS para controlar o tamanho da imagem, proporcionando mais flexibilidade no <a href=\"https:\/\/kinsta.com\/pt\/blog\/design-responsivo-web\/\">design responsivo<\/a>.<\/p>\n<pre><code class=\"language-css\">img {\n  height: 200px;\n  width: 700px;\n}<\/code><\/pre>\n<h2>Estilo de imagem responsivo<\/h2>\n<p>Aplicar valores espec\u00edficos para os atributos <code>width<\/code> e <code>height<\/code> de uma imagem pode levar a consequ\u00eancias indesej\u00e1veis, como compress\u00e3o ou distor\u00e7\u00e3o da imagem. Isso \u00e9 especialmente verdadeiro se as dimens\u00f5es especificadas n\u00e3o corresponderem \u00e0 propor\u00e7\u00e3o de aspecto original da imagem.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/06\/compressed-image-with-width-height.jpg\" alt=\"Imagem comprimida.\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Imagem comprimida.<\/figcaption><\/figure>\n<p>Para evitar esses problemas e manter as propor\u00e7\u00f5es adequadas da imagem, \u00e9 aqui que o estilo de imagem responsivo entra em a\u00e7\u00e3o. O estilo de imagem responsivo garante que as imagens se adaptem a diferentes tamanhos de tela, o que \u00e9 crucial para o <a href=\"https:\/\/kinsta.com\/pt\/blog\/conceitos-de-web-design\/\">design responsivo da Web<\/a>.<\/p>\n<p>Voc\u00ea pode conseguir isso usando a propriedade <code>max-width<\/code>, que limita a largura m\u00e1xima de uma imagem.<\/p>\n<pre><code class=\"language-css\">img {\n  max-width: 100%;\n  height: auto;\n}<\/code><\/pre>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/06\/responsive-image-with-width-height.jpg\" alt=\"Imagem responsiva.\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Imagem responsiva.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>H\u00e1 uma diferen\u00e7a quando voc\u00ea define <code>width<\/code> e <code>max-width<\/code> para <code>100%<\/code>. O uso de <code>width: 100%<\/code> permite que a imagem se estenda ou encolha para se ajustar \u00e0 largura do cont\u00eainer, enquanto <code>max-width: 100%<\/code> garante que a imagem n\u00e3o exceda seu tamanho original, mas ainda possa ser reduzida para se ajustar ao cont\u00eainer.<\/p>\n<\/aside>\n\n<p>Voc\u00ea tamb\u00e9m pode usar <a href=\"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/\">consultas de m\u00eddia<\/a> para modificar o estilo da imagem com base em diferentes pontos de interrup\u00e7\u00e3o do dispositivo. As consultas de m\u00eddia permitem que voc\u00ea aplique regras CSS espec\u00edficas com base no tamanho da tela do dispositivo, na orienta\u00e7\u00e3o e em outros recursos. Por exemplo:<\/p>\n<pre><code class=\"language-css\">@media screen and (max-width: 600px) {\n  .my-image {\n    max-width: 50%;\n  }\n}<\/code><\/pre>\n<h2>Utilizando object-fit para manter a propor\u00e7\u00e3o e evitar redu\u00e7\u00e3o de tamanho<\/h2>\n<p>\u00c0s vezes, existem cen\u00e1rios em que voc\u00ea precisa especificar uma largura e altura espec\u00edficas para uma imagem. Nesses casos, voc\u00ea pode utilizar a propriedade CSS <code>object-fit<\/code> para controlar o comportamento da imagem dentro de suas dimens\u00f5es especificadas.<\/p>\n<p>A propriedade <code>object-fit<\/code> permite que voc\u00ea especifique como uma imagem deve caber dentro do seu cont\u00eainer, mantendo a propor\u00e7\u00e3o de aspecto. Ela pode receber v\u00e1rios valores, como:<\/p>\n<ul>\n<li><strong>fill (preencher):<\/strong> Este valor estica ou comprime a imagem para se ajustar exatamente ao cont\u00eainer, potencialmente causando distor\u00e7\u00e3o.<\/li>\n<li><strong>contain (conter):<\/strong> Este valor redimensiona a imagem proporcionalmente para caber dentro do cont\u00eainer sem cortes, mantendo a propor\u00e7\u00e3o. Garante que a imagem inteira seja vis\u00edvel dentro do cont\u00eainer, podendo resultar em espa\u00e7os vazios.<\/li>\n<li><strong>cover (cobrir):<\/strong> Este valor redimensiona a imagem proporcionalmente para cobrir o cont\u00eainer, mantendo a propor\u00e7\u00e3o. Pode resultar no corte das bordas da imagem para preencher todo o cont\u00eainer.<\/li>\n<li><strong>none (nenhum):<\/strong> Esse valor n\u00e3o aplica nenhum dimensionamento ou corte, e a imagem manter\u00e1 seu tamanho original, podendo transbordar o cont\u00eainer.<\/li>\n<\/ul>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/06\/object-fit-image.jpg\" alt=\"Resultado para estilos populares de ajuste de objeto.\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Resultado para estilos populares de ajuste de objeto.<\/figcaption><\/figure>\n<p>Aqui est\u00e1 um exemplo de uso da propriedade de ajuste de objeto:<\/p>\n<pre><code class=\"language-css\">img {\n  width: 300px;\n  height: 300px;\n  object-fit: cover;\n}<\/code><\/pre>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"Using object-fit to Maintain Aspect Ratio - Kinsta\" src=\"https:\/\/codepen.io\/olawanlejoel\/embed\/preview\/oNarJZa?default-tabs=html%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=oNarJZa#?secret=SiSmhqkmnq\" data-secret=\"SiSmhqkmnq\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<h2>Criando imagens com cantos arredondados com CSS<\/h2>\n<p>Ao adicionar cantos arredondados \u00e0s imagens, voc\u00ea pode dar a elas uma apar\u00eancia mais suave e visualmente mais atraente.<\/p>\n<p>Com o CSS, voc\u00ea pode obter esse efeito facilmente aplicando a propriedade <code>border-radius<\/code> \u00e0 imagem.<\/p>\n<p>Veja a seguir como voc\u00ea pode criar imagens com cantos arredondados:<\/p>\n<pre><code class=\"language-css\">img {\n  border-radius: 10px;\n}<\/code><\/pre>\n<p>No exemplo acima, definimos a propriedade <code>border-radius<\/code> como <code>10px<\/code>. Ajuste o valor de acordo com sua prefer\u00eancia para controlar o arredondamento dos cantos. Este valor pode usar as unidades de medida de sua prefer\u00eancia, como rem, porcentagem, etc.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/06\/rounded-corner-image.jpg\" alt=\"Imagem com cantos arredondados.\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Imagem com cantos arredondados.<\/figcaption><\/figure>\n<h2>Criando imagens circulares com CSS<\/h2>\n<p>Para criar imagens perfeitamente circulares, combine a propriedade <code>border-radius<\/code> com dimens\u00f5es iguais de largura e altura.<\/p>\n<p>Veja como voc\u00ea pode criar imagens circulares:<\/p>\n<pre><code class=\"language-css\">img {\n  border-radius: 50%;\n  width: 200px;\n  height: 200px;\n}<\/code><\/pre>\n<p>No exemplo acima, a propriedade <code>border-radius<\/code> est\u00e1 definida como <code>50%<\/code>, criando um c\u00edrculo ao fazer com que a curva da borda tenha metade da largura ou da altura da imagem.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Os atributos <code>width<\/code> e <code>height<\/code> devem ter dimens\u00f5es iguais para que voc\u00ea obtenha uma imagem perfeitamente circular.<\/p>\n<\/aside>\n\n<p>Voc\u00ea tamb\u00e9m pode usar a propriedade <code>clip-path<\/code>. Ela permite que voc\u00ea defina um caminho de recorte para um elemento, criando formas exclusivas.<\/p>\n<p>Aqui est\u00e1 um exemplo de uma imagem recortada em um c\u00edrculo:<\/p>\n<pre><code class=\"language-css\">img {\n  clip-path: circle(50%);\n  width: 200px;\n  height: 200px;\n}<\/code><\/pre>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"Creating Circular Images with CSS - Kinsta\" src=\"https:\/\/codepen.io\/olawanlejoel\/embed\/preview\/rNqEoPv?default-tabs=css%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=rNqEoPv#?secret=RMM9bZlL8v\" data-secret=\"RMM9bZlL8v\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<h2>Centralizando imagens com CSS<\/h2>\n<p>O alinhamento de imagens no centro do seu cont\u00eainer \u00e9 uma pr\u00e1tica comum em <a href=\"https:\/\/kinsta.com\/pt\/topicos\/web-design\/\">web design<\/a>. Voc\u00ea pode definir a propriedade <code>display<\/code> da imagem como <code>block<\/code> e aplicar <code>margin: 0 auto<\/code>, que centraliza horizontalmente a imagem em seu cont\u00eainer.<\/p>\n<pre><code class=\"language-css\">img {\n  display: block;\n  margin: 0 auto;\n  width: 700px;\n}<\/code><\/pre>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/06\/centered-image.jpg\" alt=\"Imagem centralizada.\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Imagem centralizada.<\/figcaption><\/figure>\n<h2>Criando imagens transparentes<\/h2>\n<p>Voc\u00ea pode usar CSS para aplicar o efeito de transpar\u00eancia desejado para tornar uma imagem transparente. A propriedade <code>opacity<\/code> permite que voc\u00ea controle o n\u00edvel de transpar\u00eancia de um elemento, incluindo imagens.<\/p>\n<p>Um valor de <code>1<\/code> representa opacidade total (completamente vis\u00edvel), enquanto <code>0<\/code> representa transpar\u00eancia total (completamente invis\u00edvel).<\/p>\n<pre><code class=\"language-css\">img {\n  opacity: 0.5;\n}<\/code><\/pre>\n<p>A opacidade da imagem no c\u00f3digo acima est\u00e1 definida como <code>0.5<\/code>, resultando em um efeito semitransparente. Voc\u00ea pode ajustar o valor da opacidade para obter o n\u00edvel desejado de transpar\u00eancia.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/06\/transparent-image.jpg\" alt=\"Imagem transparente.\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Imagem transparente.<\/figcaption><\/figure>\n<h2>Inserindo texto em imagens<\/h2>\n<p>Ao colocar texto em imagens, voc\u00ea pode criar designs visualmente atraentes e informativos. Para colocar o texto em cima de uma imagem, voc\u00ea pode usar uma combina\u00e7\u00e3o de posicionamento CSS e <code>z-index<\/code>.<\/p>\n<p>Aqui est\u00e1 um exemplo:<\/p>\n<pre><code class=\"language-css\"> \/\/ HTML\n&lt;div class=\"image-container\"&gt;\n  &lt;img src=\"https:\/\/source.unsplash.com\/tMHAmxLyzvA\" alt=\"Boston city skyline\" &gt;\n  &lt;div class=\"image-text\"&gt;Welcome to Kinsta&lt;\/div&gt;\n&lt;\/div&gt;\n\n\/\/ CSS\n.image-container {\n  position: relative;\n}\n\n\n.image-text {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1;\n  color: white;\n  font-size: 20px;\n  font-weight: bold;\n}<\/code><\/pre>\n<p>No c\u00f3digo acima, <code>image-container<\/code> <code>div<\/code> serve como cont\u00eainer para a imagem e a sobreposi\u00e7\u00e3o de texto. A propriedade <code>position: relative<\/code> \u00e9 aplicada ao cont\u00eainer para estabelecer um contexto de posicionamento. A classe <code>image-text<\/code> \u00e9 ent\u00e3o usada para posicionar o texto de forma absoluta dentro do cont\u00eainer usando <code>position: absolute<\/code> e as propriedades <code>top<\/code>, <code>left<\/code> e <code>transform<\/code> para centraliz\u00e1-lo. A propriedade garante que o texto seja centralizado. A propriedade <code>z-index<\/code> garante que o texto apare\u00e7a acima da imagem, e voc\u00ea pode personalizar ainda mais a apar\u00eancia do texto com cor, tamanho e espessura da fonte.<\/p>\n<p>Observe que os valores espec\u00edficos de posicionamento e estilo podem ser ajustados para atender \u00e0s suas prefer\u00eancias e requisitos de design.<\/p>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"Placing Text on Images - Kinsta\" src=\"https:\/\/codepen.io\/olawanlejoel\/embed\/preview\/WNaqPbE?default-tabs=css%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=WNaqPbE#?secret=Kq2urrTiw4\" data-secret=\"Kq2urrTiw4\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<h2>Invertendo imagens: Cria\u00e7\u00e3o de efeitos espelhados<\/h2>\n<p>A invers\u00e3o de imagens pode acrescentar um elemento visual interessante ao <a href=\"https:\/\/kinsta.com\/pt\/blog\/cursos-de-web-design\/\">web design<\/a>. Se voc\u00ea quiser criar um efeito espelhado ou inverter uma imagem vertical, ou horizontalmente, o CSS oferece t\u00e9cnicas simples para obter esse efeito.<\/p>\n<h3>Invers\u00e3o horizontal<\/h3>\n<p>Para inverter horizontalmente uma imagem, voc\u00ea pode usar a propriedade transform com a fun\u00e7\u00e3o <code>scaleX()<\/code>. O valor <code>scaleX(-1)<\/code> inverte a imagem ao longo do eixo horizontal.<\/p>\n<pre><code class=\"language-css\">img {\n  transform: scaleX(-1);\n}<\/code><\/pre>\n<h3>Invers\u00e3o vertical<\/h3>\n<p>Para inverter verticalmente uma imagem, voc\u00ea pode usar a propriedade transform com a fun\u00e7\u00e3o <code>scaleY()<\/code>. O valor <code>scaleY(-1)<\/code> inverte a imagem ao longo do eixo vertical.<\/p>\n<pre><code class=\"language-css\">img {\n  transform: scaleY(-1);\n}<\/code><\/pre>\n<h3>Invers\u00e3o diagonal<\/h3>\n<p>Para criar um efeito de invers\u00e3o diagonal, voc\u00ea deve combinar as fun\u00e7\u00f5es <code>scaleX()<\/code> e <code>scaleY()<\/code> na propriedade <code>transform<\/code>.<\/p>\n<pre><code class=\"language-css\">img {\n  transform: scaleX(-1) scaleY(-1);\n}<\/code><\/pre>\n<p>No c\u00f3digo acima, a imagem ser\u00e1 espelhada horizontal e verticalmente, resultando em um efeito de invers\u00e3o diagonal.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/06\/flipping-images-css.jpg\" alt=\"Invers\u00e3o de imagem horizontal, vertical e diagonal.\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Invers\u00e3o de imagem horizontal, vertical e diagonal.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>A invers\u00e3o de imagens usando CSS n\u00e3o modifica o arquivo de imagem real; apenas altera a maneira como ele \u00e9 exibido na p\u00e1gina da internet. Se precisar inverter a imagem permanentemente, voc\u00ea dever\u00e1 edit\u00e1-la usando uma ferramenta de edi\u00e7\u00e3o.<\/p>\n<\/aside>\n\n<h2>Adicionando filtros \u00e0s imagens: Aprimorando os efeitos visuais<\/h2>\n<p>Os filtros podem transformar a apar\u00eancia das imagens, permitindo que voc\u00ea crie efeitos visuais exclusivos. O CSS oferece uma s\u00e9rie de propriedades de filtro que podem ser aplicadas \u00e0s imagens, permitindo que voc\u00ea ajuste o brilho, o contraste, a satura\u00e7\u00e3o e muito mais.<\/p>\n<p>Voc\u00ea pode usar a propriedade <code>filter<\/code> para aplicar um filtro a uma imagem. Essa propriedade aceita v\u00e1rias fun\u00e7\u00f5es de filtro, cada uma alterando diferentes aspectos da imagem.<\/p>\n<pre><code class=\"language-css\">img {\n  filter: brightness(150%);\n}<\/code><\/pre>\n<p>No c\u00f3digo acima, a fun\u00e7\u00e3o <code>brightness(150%)<\/code> \u00e9 aplicada \u00e0 imagem. Isso aumenta o brilho da imagem em <strong>150%<\/strong>.<\/p>\n<h3>Fun\u00e7\u00f5es de filtro comumente usadas<\/h3>\n<p>Aqui est\u00e3o algumas fun\u00e7\u00f5es de filtro comumente usadas:<\/p>\n<ul>\n<li><code>brightness()<\/code>: Ajusta o brilho da imagem.<\/li>\n<li><code>contrast()<\/code>: Modifica o contraste da imagem.<\/li>\n<li><code>saturate()<\/code>: Altera o n\u00edvel de satura\u00e7\u00e3o da imagem.<\/li>\n<li><code>grayscale()<\/code>: Converte a imagem em escala de cinza.<\/li>\n<li><code>blur()<\/code>: Aplica um efeito de desfoque \u00e0 imagem.<\/li>\n<li><code>sepia()<\/code>: Aplica um efeito de tom s\u00e9pia \u00e0 imagem.<\/li>\n<\/ul>\n<p>Voc\u00ea pode experimentar diferentes fun\u00e7\u00f5es e valores de filtro para obter os efeitos visuais desejados. A combina\u00e7\u00e3o de v\u00e1rios filtros tamb\u00e9m pode produzir transforma\u00e7\u00f5es mais complexas.<\/p>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"Adding Filters to Images - Kinsta\" src=\"https:\/\/codepen.io\/olawanlejoel\/embed\/preview\/WNaqWJG?default-tabs=html%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=WNaqWJG#?secret=LzOjnXHtF6\" data-secret=\"LzOjnXHtF6\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Nem todos os filtros s\u00e3o compat\u00edveis com todos os navegadores. Antes de usar um filtro espec\u00edfico, verifique sua compatibilidade em diferentes navegadores usando plataformas como <a href=\"https:\/\/caniuse.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">caniuse.com<\/a>.<\/p>\n<\/aside>\n\n<h2>Criando sobreposi\u00e7\u00f5es ao passar o mouse sobre imagens<\/h2>\n<p>As sobreposi\u00e7\u00f5es ao passar o mouse sobre imagens podem trazer interatividade e interesse visual ao seu site. Quando um usu\u00e1rio passa o mouse sobre uma imagem, um efeito de sobreposi\u00e7\u00e3o pode ser aplicado, como uma sobreposi\u00e7\u00e3o de cor ou uma legenda de texto.<\/p>\n<p>O CSS oferece v\u00e1rias t\u00e9cnicas para criar sobreposi\u00e7\u00f5es ao passar o mouse; uma maneira \u00e9 usando transi\u00e7\u00f5es CSS. Ao fazer a transi\u00e7\u00e3o de propriedades espec\u00edficas de um elemento, voc\u00ea pode animar suavemente as altera\u00e7\u00f5es ao passar o mouse sobre uma imagem.<\/p>\n<pre><code class=\"language-css\">\/\/ HTML\n&lt;div class=\"image-container\"&gt;\n  &lt;img src=\"image.jpg\" alt=\"Description of the image\"&gt;\n  &lt;div class=\"overlay\"&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n\n\/\/ CSS\n.image-container {\n  position: relative;\n  display: inline-block;\n}\n.overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n.image-container:hover .overlay {\n  opacity: 1;\n}<\/code><\/pre>\n<p>No c\u00f3digo acima, um elemento <code>.image-container<\/code> envolve a imagem e um elemento <code>.overlay<\/code>. A sobreposi\u00e7\u00e3o \u00e9 inicialmente transparente (<code>opacity: 0<\/code>) e cobre toda a imagem. Quando voc\u00ea passa o mouse sobre <code>.image-container<\/code>, a opacidade de <code>.overlay<\/code> passa para <code>1<\/code>, revelando a sobreposi\u00e7\u00e3o de cores.<\/p>\n<p>Para obter o efeito visual desejado, voc\u00ea pode personalizar a sobreposi\u00e7\u00e3o ajustando as propriedades <code>background-color<\/code> e opacidade.<\/p>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"Creating Hover Overlays on Images - KInsta\" src=\"https:\/\/codepen.io\/olawanlejoel\/embed\/preview\/MWPMdpB?default-tabs=html%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=MWPMdpB#?secret=WJnVkHD3br\" data-secret=\"WJnVkHD3br\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<h2>Resumo<\/h2>\n<p>A estiliza\u00e7\u00e3o de imagens com CSS abre um mundo de possibilidades criativas, permitindo que voc\u00ea aprimore o apelo visual e a interatividade das suas p\u00e1ginas da internet.<\/p>\n<p>Quando voc\u00ea estilizar imagens com CSS, tenha sempre em mente a acessibilidade, a capacidade de resposta e o <a href=\"https:\/\/kinsta.com\/pt\/blog\/otimizar-imagens-para-web\/\">desempenho<\/a>.<\/p>\n<p><em>Qual \u00e9 o estilo de imagem CSS que voc\u00ea mais usa? Qual deles te interessa mais? Deixe-nos saber nos coment\u00e1rios.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quando se trata de web design, visuais cativantes podem fazer toda a diferen\u00e7a. As imagens desempenham um papel crucial na cria\u00e7\u00e3o de uma experi\u00eancia de usu\u00e1rio &#8230;<\/p>\n","protected":false},"author":287,"featured_media":60513,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1017],"class_list":["post-60512","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-linguagens-desenvolvimento-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Estilo de imagem CSS: Aprimorando o Apelo Visual com Estilo - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Aprimore o apelo visual, crie efeitos impressionantes e impressione seus visitantes com nosso guia abrangente sobre estiliza\u00e7\u00e3o de imagens com CSS.\" \/>\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\/estilo-de-imagem-css\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Estilo de imagem CSS: Aprimorando o Apelo Visual com Estilo\" \/>\n<meta property=\"og:description\" content=\"Aprimore o apelo visual, crie efeitos impressionantes e impressione seus visitantes com nosso guia abrangente sobre estiliza\u00e7\u00e3o de imagens com CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-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-26T16:54:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-22T08:39:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/css-image-styling.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, crie efeitos impressionantes e impressione seus visitantes com nosso guia abrangente sobre estiliza\u00e7\u00e3o de imagens com CSS.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/css-image-styling.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=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Estilo de imagem CSS: Aprimorando o Apelo Visual com Estilo\",\"datePublished\":\"2023-06-26T16:54:56+00:00\",\"dateModified\":\"2023-08-22T08:39:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/\"},\"wordCount\":1911,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/css-image-styling.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/\",\"name\":\"Estilo de imagem CSS: Aprimorando o Apelo Visual com Estilo - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/css-image-styling.jpg\",\"datePublished\":\"2023-06-26T16:54:56+00:00\",\"dateModified\":\"2023-08-22T08:39:37+00:00\",\"description\":\"Aprimore o apelo visual, crie efeitos impressionantes e impressione seus visitantes com nosso guia abrangente sobre estiliza\u00e7\u00e3o de imagens com CSS.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/css-image-styling.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/css-image-styling.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Linguagens de Desenvolvimento Web\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/linguagens-desenvolvimento-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Estilo de imagem CSS: Aprimorando o Apelo Visual com Estilo\"}]},{\"@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":"Estilo de imagem CSS: Aprimorando o Apelo Visual com Estilo - Kinsta\u00ae","description":"Aprimore o apelo visual, crie efeitos impressionantes e impressione seus visitantes com nosso guia abrangente sobre estiliza\u00e7\u00e3o de imagens com CSS.","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\/estilo-de-imagem-css\/","og_locale":"pt_PT","og_type":"article","og_title":"Estilo de imagem CSS: Aprimorando o Apelo Visual com Estilo","og_description":"Aprimore o apelo visual, crie efeitos impressionantes e impressione seus visitantes com nosso guia abrangente sobre estiliza\u00e7\u00e3o de imagens com CSS.","og_url":"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2023-06-26T16:54:56+00:00","article_modified_time":"2023-08-22T08:39:37+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/css-image-styling.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Aprimore o apelo visual, crie efeitos impressionantes e impressione seus visitantes com nosso guia abrangente sobre estiliza\u00e7\u00e3o de imagens com CSS.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/css-image-styling.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Joel Olawanle","Tempo estimado de leitura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Estilo de imagem CSS: Aprimorando o Apelo Visual com Estilo","datePublished":"2023-06-26T16:54:56+00:00","dateModified":"2023-08-22T08:39:37+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/"},"wordCount":1911,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/css-image-styling.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/","url":"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/","name":"Estilo de imagem CSS: Aprimorando o Apelo Visual com Estilo - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/css-image-styling.jpg","datePublished":"2023-06-26T16:54:56+00:00","dateModified":"2023-08-22T08:39:37+00:00","description":"Aprimore o apelo visual, crie efeitos impressionantes e impressione seus visitantes com nosso guia abrangente sobre estiliza\u00e7\u00e3o de imagens com CSS.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/css-image-styling.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/css-image-styling.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/estilo-de-imagem-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Linguagens de Desenvolvimento Web","item":"https:\/\/kinsta.com\/pt\/topicos\/linguagens-desenvolvimento-web\/"},{"@type":"ListItem","position":3,"name":"Estilo de imagem CSS: Aprimorando o Apelo Visual com Estilo"}]},{"@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\/60512","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=60512"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/60512\/revisions"}],"predecessor-version":[{"id":60759,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/60512\/revisions\/60759"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60512\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60512\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60512\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60512\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60512\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60512\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60512\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60512\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60512\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/60513"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=60512"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=60512"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=60512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}