{"id":227815,"date":"2022-09-27T18:49:00","date_gmt":"2022-09-27T15:49:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=227815"},"modified":"2022-11-09T02:39:06","modified_gmt":"2022-11-08T23:39:06","slug":"designs-de-caixa-de-pesquisa-html-baseados-em-css-para-aprimorar-sua-pesquisa-no-site","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/designs-de-caixa-de-pesquisa-html-baseados-em-css-para-aprimorar-sua-pesquisa-no-site\/","title":{"rendered":"Designs de caixa de pesquisa HTML baseados em CSS para aprimorar sua pesquisa no site"},"content":{"rendered":"\n<p>Quando se trata de elementos de site que s\u00e3o bons e obrigat\u00f3rios, as caixas de pesquisa caem diretamente no campo obrigat\u00f3rio. Escolha qualquer site que vier \u00e0 mente \u2013 \u00e9 prov\u00e1vel que tenha uma caixa de pesquisa, provavelmente no topo da p\u00e1gina.<\/p>\n<p>Uma caixa de pesquisa, tamb\u00e9m conhecida como barra de pesquisa, desempenha um papel importante em um site. Ele atua como a porta de entrada para todo o conte\u00fado dispon\u00edvel e permite que os visitantes encontrem rapidamente o que est\u00e3o procurando. Eles geralmente s\u00e3o colocados em destaque em todas as p\u00e1ginas como parte do cabe\u00e7alho ou barra lateral do site.<\/p>\n<p>Como a caixa de pesquisa HTML do seu site \u00e9 mostrada essencialmente em todos os lugares para todos os visitantes, faz sentido que voc\u00ea gaste algum tempo para deix\u00e1-la bonita, certo?<\/p>\n<p>Neste artigo de nossa equipe em <a href=\"https:\/\/wpdatatables.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wpDataTables<\/a>, vamos conferir alguns designs de caixa de pesquisa realmente legais e sofisticados que voc\u00ea pode implementar agora com nada mais do que HTML, CSS e talvez um pouco de JavaScript.<\/p>\n<h3><strong>Os benef\u00edcios de um bom design de caixa de pesquisa HTML<\/strong><\/h3>\n<p>Uma caixa de pesquisa conecta as pessoas com tudo o que um site ou aplicativo tem a oferecer. \u00c9 o primeiro porto de escala para quando um usu\u00e1rio precisa de assist\u00eancia extra para navegar em um site, e \u00e9 um ponto crucial no qual a conversa entre o usu\u00e1rio e o site acontece.<\/p>\n<p>Na pr\u00e1tica, as caixas de pesquisa HTML s\u00e3o simples de entender. As palavras-chave s\u00e3o digitadas pelo usu\u00e1rio e, em troca, a caixa de pesquisa o ajuda a encontrar as informa\u00e7\u00f5es que deseja saber.<\/p>\n<p>Aqui est\u00e3o alguns aspectos positivos que voc\u00ea deve esperar ver ao adicionar uma caixa de pesquisa HTML ao seu site:<\/p>\n<ul>\n<li>Seu site fica mais amig\u00e1vel<\/li>\n<li>Voc\u00ea aumenta a satisfa\u00e7\u00e3o de seus visitantes e clientes<\/li>\n<li>Voc\u00ea pode direcionar os visitantes para produtos e servi\u00e7os mais rapidamente, melhorando as taxas de convers\u00e3o<\/li>\n<li>Simplifica o processo de pesquisa ao ter a fun\u00e7\u00e3o de pesquisa imediatamente acess\u00edvel<\/li>\n<li>Voc\u00ea pode descobrir o que seus usu\u00e1rios est\u00e3o procurando e obter dados de marketing valiosos<\/li>\n<\/ul>\n<h2><strong>Designs de caixa de pesquisa HTML que voc\u00ea pode usar agora<\/strong><\/h2>\n<p>Todas as caixas de pesquisa HTML baseadas em CSS que voc\u00ea encontrar\u00e1 nesta cole\u00e7\u00e3o s\u00e3o simples na estrutura do c\u00f3digo. Isso significa que eles podem ser personalizados facilmente e voc\u00ea sempre pode mudar para uma apar\u00eancia \u00fanica diferente ajustando o CSS. Vamos para a lista e ver o que encontramos!<\/p>\n<h3><strong>Barra de pesquisa animada<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/stefcharle\/pen\/eMZqpY\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-182028-61e8757d872cf.jpg\" alt=\"Designs de caixa de pesquisa HTML baseados em CSS para aprimorar sua pesquisa no site\" \/><\/a><\/p>\n<p>Como voc\u00ea pode ver pelo nome, esta \u00e9 uma caixa de pesquisa HTML animada. Ao clicar no \u00edcone de pesquisa, voc\u00ea encontrar\u00e1 a caixa de entrada e, no restante do tempo, a entrada ficar\u00e1 oculta. Esse tipo de elemento \u00e9 \u00f3timo, especialmente se voc\u00ea tiver um espa\u00e7o de tela pequeno.<\/p>\n<h3><strong>Formul\u00e1rio de pesquisa expans\u00edvel com CSS3<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/huange\/pen\/rbqsD\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-182028-61e8757ec5837.jpg\" alt=\"Designs de caixa de pesquisa HTML baseados em CSS para aprimorar sua pesquisa no site\" \/><\/a><\/p>\n<p>Como voc\u00ea pode ver na demonstra\u00e7\u00e3o, esta caixa de pesquisa HTML pode se expandir dependendo do n\u00famero de caracteres que est\u00e3o sendo inseridos. Usando CSS3, voc\u00ea pode personaliz\u00e1-lo facilmente ao seu gosto.<\/p>\n<h3><strong>Formul\u00e1rio de pesquisa com bot\u00e3o de pesquisa animado<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/himalayasingh\/pen\/dqjLgO\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-182028-61e8757fbf077.jpg\" alt=\"Designs de caixa de pesquisa HTML baseados em CSS para aprimorar sua pesquisa no site\" \/><\/a><\/p>\n<p>Esta \u00e9 uma caixa de pesquisa HTML simples, mas de boa apar\u00eancia, para come\u00e7ar. O criador usou <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/tabelas-responsivas-com-css-e-html-ou-wordpress\/\" title=\"CSS e HTML b\u00e1sicos\">CSS e HTML b\u00e1sicos<\/a> para criar esta atraente barra de pesquisa animada. Experimente para ver se vai bem com o seu site \u2013 pode ser exatamente o que voc\u00ea estava procurando.<\/p>\n<h3><strong>Texto de digita\u00e7\u00e3o de espa\u00e7o reservado<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/mikedevelops\/pen\/vOavQB\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-182028-61e87580c8240.jpg\" alt=\"Designs de caixa de pesquisa HTML baseados em CSS para aprimorar sua pesquisa no site\" \/><\/a><\/p>\n<p>Esta \u00e9 uma caixa de entrada simples que tem um <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/adicione-efeitos-legais-de-javascript-em-seu-site-com-bibliotecas-de-animacao\/\" title=\"efeito de anima\u00e7\u00e3o legal.\">efeito de anima\u00e7\u00e3o legal.<\/a> <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/efeitos-de-brilho-de-texto-css-para-deslumbrar-e-encantar-seus-usuarios\/\" title=\"Como o nome sugere, voc\u00ea obt\u00e9m alguns efeitos de texto\">Como o nome sugere, voc\u00ea obt\u00e9m alguns efeitos de texto<\/a> de digita\u00e7\u00e3o com ele. O desenvolvedor certificou-se de que a caixa de entrada ainda se parecesse com uma caixa de pesquisa HTML t\u00edpica, para que fosse facilmente reconhec\u00edvel pelos usu\u00e1rios.<\/p>\n<h3><strong>Impressionante forma de pulso brilhante<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/jackrugile\/pen\/ABeIi\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-182028-61e87581d690f.jpg\" alt=\"Designs de caixa de pesquisa HTML baseados em CSS para aprimorar sua pesquisa no site\" \/><\/a><\/p>\n<p>Este formul\u00e1rio de pesquisa simples tem uma \u00e1rea de texto legal que, quando voc\u00ea clica, come\u00e7a a brilhar junto com um bot\u00e3o de envio. \u00c9 atraente e visualmente interativo ao mesmo tempo e foi feito usando apenas CSS e HTML.<\/p>\n<h3><strong>&quot;Loooong&quot; a barra de pesquisa<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/Hsuching\/pen\/MJBzJX\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-182028-61e87582d7153.jpg\" alt=\"Designs de caixa de pesquisa HTML baseados em CSS para aprimorar sua pesquisa no site\" \/><\/a><\/p>\n<p>Quando voc\u00ea clica no \u00edcone de pesquisa, esta caixa de pesquisa HTML se expande em uma entrada de pesquisa maior. Foi feito usando CSS3.<\/p>\n<h3><strong>Entrada de pesquisa com efeito de transforma\u00e7\u00e3o<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/MilanMilosev\/pen\/JdgRpB\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-182028-61e87583d2fbe.jpg\" alt=\"Designs de caixa de pesquisa HTML baseados em CSS para aprimorar sua pesquisa no site\" \/><\/a><\/p>\n<p>Semelhante \u00e0 caixa de pesquisa anterior, quando voc\u00ea seleciona o \u00edcone de pesquisa, ele se torna uma barra de pesquisa e fica bem legal. Foi feito usando HTML\/CSS e uma pitada de JS.<\/p>\n<h3><strong>Pesquisa de expans\u00e3o de CSS puro<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/thebabydino\/pen\/PBXRRm\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-182028-61e87584dcc4d.jpg\" alt=\"Designs de caixa de pesquisa HTML baseados em CSS para aprimorar sua pesquisa no site\" \/><\/a><\/p>\n<p>Esta caixa de pesquisa simples \u00e9 outro exemplo de uma barra de pesquisa animada de boa apar\u00eancia. \u00c9 suave, brilha e foi feito com CSS puro, sem necessidade de JavaScript!<\/p>\n<h3>Ei, voc\u00ea sabia que os dados tamb\u00e9m podem ser bonitos?<\/h3>\n<p><a href=\"https:\/\/wpdatatables.com\/?utm_source=articlewidget\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wpDataTables<\/a> pode torn\u00e1-lo assim. H\u00e1 uma boa raz\u00e3o pela qual \u00e9 o plugin n\u00ba 1 do WordPress para criar tabelas e gr\u00e1ficos responsivos.<\/p>\n<p><a href=\"https:\/\/wpdatatables.com\/?utm_source=articlewidget\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-182028-61e87585dd166.png\" alt=\"Designs de caixa de pesquisa HTML baseados em CSS para aprimorar sua pesquisa no site\" \/><\/a><\/p>\n<p>Um exemplo real de wpDataTables em estado selvagem<\/p>\n<p>E \u00e9 muito f\u00e1cil fazer algo assim:<\/p>\n<ol>\n<li>Voc\u00ea fornece os dados da tabela<\/li>\n<li>Configure e personalize<\/li>\n<li>Publique-o em um post ou p\u00e1gina<\/li>\n<\/ol>\n<p>E n\u00e3o \u00e9 apenas bonito, mas tamb\u00e9m pr\u00e1tico. Voc\u00ea pode criar tabelas grandes com <a href=\"https:\/\/wpdatatables.com\/documentation\/creating-wpdatatables\/creating-mysql-based-wpdatatables-with-server-side-processing\/?utm_source=articlewidget\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">at\u00e9 milh\u00f5es de linhas<\/a>, ou pode usar <a href=\"https:\/\/wpdatatables.com\/documentation\/table-features\/advanced-filtering\/?utm_source=articlewidget\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">filtros e pesquisas avan\u00e7adas<\/a>, ou pode enlouquecer e <a href=\"https:\/\/wpdatatables.com\/documentation\/front-end-editing\/creating-editable-tables\/?utm_source=articlewidget\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">torn\u00e1-las edit\u00e1veis<\/a>.<\/p>\n<p>&#8220;Sim, mas eu gosto demais do Excel e n\u00e3o tem nada disso em sites&quot;. Sim, existe. Voc\u00ea pode usar a <a href=\"https:\/\/wpdatatables.com\/documentation\/table-features\/conditional-formatting\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">formata\u00e7\u00e3o condicional<\/a> como no Excel ou no Planilhas Google.<\/p>\n<p>Eu te disse que voc\u00ea tamb\u00e9m pode <a href=\"https:\/\/wpdatatables.com\/documentation\/wpdatacharts\/creating-charts-wordpress-wpdatachart-wizard\/?utm_source=articlewidget\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">criar gr\u00e1ficos<\/a> com seus dados? E isso \u00e9 apenas uma pequena parte. Existem <a href=\"https:\/\/wpdatatables.com\/features\/?utm_source=articlewidget\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">muitos outros recursos<\/a> para voc\u00ea.<\/p>\n<h3><strong>Caixa de pesquisa CSS3 elegante<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/nikhil\/pen\/GuAho\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-182028-61e875871dc9f.jpg\" alt=\"Designs de caixa de pesquisa HTML baseados em CSS para aprimorar sua pesquisa no site\" \/><\/a><\/p>\n<p>Esta caixa de pesquisa oferece exatamente o que promete: uma elegante caixa de pesquisa baseada em CSS3.<\/p>\n<h3><strong>Consulta sugerida<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/tingc10\/pen\/jPYXzR\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-182028-61e875881e24f.jpg\" alt=\"Designs de caixa de pesquisa HTML baseados em CSS para aprimorar sua pesquisa no site\" \/><\/a><\/p>\n<p>Esta caixa de pesquisa \u00e9 principalmente um conceito de demonstra\u00e7\u00e3o e suporta apenas algumas consultas preenchidas automaticamente por enquanto. Se quiser, no entanto, voc\u00ea pode investir algum tempo nisso e criar uma caixa de entrada de consulta sugerida perfeita, adicionando consultas comuns aplic\u00e1veis \u200b\u200bao seu site.<\/p>\n<h3><strong>Caixa de pesquisa CSS3 inspirada em Apple.com<\/strong><\/h3>\n<p><a href=\"http:\/\/www.bloggermint.com\/2011\/06\/css3-search-box-inspired-by-apple-com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-182028-61e875891f6ca.jpg\" alt=\"Designs de caixa de pesquisa HTML baseados em CSS para aprimorar sua pesquisa no site\" \/><\/a><\/p>\n<p>Esta caixa de pesquisa foi inspirada no design simples da Apple e foi feita usando CSS3. Tem alguns bons efeitos de anima\u00e7\u00e3o porque a barra se expande quando voc\u00ea clica nela. Um design como este pode ajud\u00e1-lo a economizar espa\u00e7o para sua p\u00e1gina da web.<\/p>\n<h3><strong>Entrada de pesquisa animada<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/lhenrique\/pen\/JvqGjj\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-182028-61e87589e5715.jpg\" alt=\"Designs de caixa de pesquisa HTML baseados em CSS para aprimorar sua pesquisa no site\" \/><\/a><\/p>\n<p>Se voc\u00ea estava procurando por um design mais criativo, esta caixa de pesquisa HTML animada pode ser uma \u00f3tima op\u00e7\u00e3o para voc\u00ea. Ele tem um fundo gradiente dourado e seu desenvolvedor usou apenas alguns HTML e CSS b\u00e1sicos para faz\u00ea-lo.<\/p>\n<h3><strong>Caixa de pesquisa CSS3 legal com caixa de sugest\u00f5es em foco<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/logicgates\/pen\/eqwbm\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-182028-61e8758ae1b94.jpg\" alt=\"Designs de caixa de pesquisa HTML baseados em CSS para aprimorar sua pesquisa no site\" \/><\/a><\/p>\n<p>Precisando de uma caixa de pesquisa mais elegante que tamb\u00e9m tenha transi\u00e7\u00f5es legais? Este c\u00f3digo \u00e9 perfeito para o trabalho. O que \u00e9 legal \u00e9 o fato de que ele ainda mostra resultados de pesquisa pr\u00f3ximos e isso significa que o usu\u00e1rio pode pesquisar rapidamente usando apenas as letras iniciais das palavras-chave.<\/p>\n<h3><strong>Campo de pesquisa CSS An<em><\/em><\/strong> e <strong><em><\/em>mation<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/sebastianpopp\/pen\/myYmmy\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-182028-61e8758bd3918.jpg\" alt=\"Designs de caixa de pesquisa HTML baseados em CSS para aprimorar sua pesquisa no site\" \/><\/a><\/p>\n<p>Este campo de pesquisa CSS tem uma anima\u00e7\u00e3o de expans\u00e3o suave ao passar o mouse. Se voc\u00ea n\u00e3o gosta da cor de fundo roxa, basta ajustar o CSS!<\/p>\n<h3><strong>Exemplo de pesquisa difusa<\/strong><\/h3>\n<p><a href=\"https:\/\/codepen.io\/jakealbaugh\/pen\/wzzrmX\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-182028-61e8758ccdb83.jpg\" alt=\"Designs de caixa de pesquisa HTML baseados em CSS para aprimorar sua pesquisa no site\" \/><\/a><\/p>\n<p>Este exemplo de uma barra de pesquisa difusa mostra como voc\u00ea pode implementar a correspond\u00eancia aproximada de string com base em consultas recentes sugeridas. Isso funcionaria particularmente bem em um contexto de com\u00e9rcio eletr\u00f4nico.<\/p>\n<h3><strong>Dica de pesquisa<\/strong><\/h3>\n<p><a href=\"https:\/\/dribbble.com\/shots\/4106506-Search-hint-Daily-ui-22\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-182028-61e8758dc56bd.jpg\" alt=\"Designs de caixa de pesquisa HTML baseados em CSS para aprimorar sua pesquisa no site\" \/><\/a><\/p>\n<p>Esta caixa de pesquisa HTML \u00e9 perfeita para \u00edndices de filmes e listagens de pesquisa semelhantes. Ao digitar palavras-chave, voc\u00ea obt\u00e9m resultados em tempo real. Os resultados da pesquisa s\u00e3o divididos em categorias para economizar espa\u00e7o na tela e funciona bem em telas de dispositivos m\u00f3veis.<\/p>\n<h3><strong>Considera\u00e7\u00f5es finais sobre esses designs de caixa de pesquisa HTML<\/strong><\/h3>\n<p>Se voc\u00ea estiver procurando por algumas caixas de pesquisa HTML f\u00e1ceis de usar que se adequem ao design do seu site, n\u00e3o procure mais do que os itens listados neste artigo.<\/p>\n<p>Cada um deles tem uma apar\u00eancia \u00fanica que pode ser adaptada para se adequar ao seu site com algumas altera\u00e7\u00f5es simples de CSS. Claro, voc\u00ea \u00e9 livre para us\u00e1-los como est\u00e3o, mas \u00e9 sempre recomend\u00e1vel manter o estilo dos elementos do seu site consistentes com sua marca geral.<\/p>\n<p>Se voc\u00ea gostou de ler este artigo sobre designs de caixa de pesquisa HTML, voc\u00ea deve conferir este artigo sobre efeitos de <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/efeitos-de-brilho-de-texto-css-para-deslumbrar-e-encantar-seus-usuarios\/\" title=\"brilho de texto CSS .\">brilho de texto CSS .<\/a><\/p>\n<p>Tamb\u00e9m escrevemos sobre alguns assuntos relacionados, como <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/exemplos-de-galeria-de-imagens-css-que-voce-pode-usar-em-seu-site\/\" title=\"galeria\">galeria<\/a> de imagens <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/exemplos-de-editor-de-css-que-voce-deve-testar\/\" title=\"CSS, editor\">CSS, editor<\/a> CSS, <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/exemplos-de-menus-moveis-css-que-voce-deve-conferir\/\" title=\"menu m\u00f3vel\">menu m\u00f3vel<\/a> CSS, <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/otimas-transicoes-de-pagina-css-que-voce-pode-usar-hoje-em-seu-site\/\" title=\"transi\u00e7\u00f5es de p\u00e1gina\">transi\u00e7\u00f5es de p\u00e1gina<\/a> CSS e <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/efeitos-impressionantes-de-imagem-css-que-voce-pode-usar-em-seu-site\/\" title=\"efeitos de foco de imagem CSS\">efeitos de foco de imagem CSS<\/a>.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpdatatables.com\" class=\"external external_icon\">wpdatatables.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Na pr\u00e1tica, a caixa de pesquisa HTML \u00e9 simples de entender. As palavras-chave s\u00e3o digitadas pelo usu\u00e1rio e em troca o ajuda a encontrar as informa\u00e7\u00f5es.<\/p>\n","protected":false},"author":1,"featured_media":182029,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[753,909,722,837,785,846,867],"tags":[1170],"class_list":["post-227815","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-aberto","category-css-8","category-desenvolvedor","category-guia-para-iniciantes","category-software-livre","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/227815","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=227815"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/227815\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/182029"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=227815"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=227815"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=227815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}