8 efeitos HTML interessantes que qualquer um pode adicionar aos seus sites

gurinho

Você quer que seu site tenha uma aparência incrível – mas faltam suas habilidades de desenvolvimento web.

Não se desespere! Você não precisa saber CSS ou PHP para construir um site sofisticado com efeitos interessantes. Algumas tags HTML simples e saber como copiar e colar bastarão.

Para começar com alguns efeitos HTML interessantes, compilamos esses modelos de código de efeito HTML gratuitos. Eles irão aprimorar a funcionalidade e a experiência do usuário do seu site, sem quebrar o banco. Embora sejam principalmente HTML, esses códigos legais também podem conter algum CSS e PHP.

1. Efeito de paralaxe legal com HTML

Você provavelmente já viu o efeito paralaxe usado em sites com anúncios online. Conforme você rola para baixo em um artigo, a imagem de fundo parece rolar em um ritmo diferente ou um anúncio é exibido.

Como alternativa, talvez a imagem de plano de fundo mude conforme você visita diferentes partes do site. É um efeito legal que adiciona profundidade visual ao conteúdo e é ideal mesmo se você não entender o código HTML básico .

Você pode brincar com o efeito e copiar o código para um efeito simples de rolagem Parallax do W3Schools .

Em sua versão mais sofisticada, esse efeito é uma combinação de HTML, CSS e JS.

Vá em frente e busque os códigos para o efeito de paralaxe de cabeçalho / rodapé acima no CodePen .

2. Código de caixa de comentário HTML rolável

Este é um elemento HTML simples, mas útil, que permite empacotar longos trechos de texto em um formato compacto. Dessa forma, não ocupa todo o espaço da página.

Você pode brincar com as cores e o tamanho da caixa de texto para adequá-la às suas necessidades.

Entrada:

 <div style="width: 25%; height: 50px; overflow: auto; scrollbar-face-color: #CE7E00; scrollbar-shadow-color: #FFFFFF; br /scrollbar-highlight-color: #6F4709; scrollbar-3dlight-color:#11111; scrollbar-darkshadow-color: #6F4709; br /scrollbar-track-color: #FFE8C1; scrollbar-arrow-color: #6F4709;">
 Putting some text in this box will let you see how large it can stretch to - eventually the scrollbars should show, enabling you to scroll through the text. That's it! :)</div>

Se você deseja algo um pouco mais elaborado, também pode buscar o código para uma caixa de comentário personalizável no Quackit .

Eles oferecem vários modelos, mas você também pode usar seu editor para alterar e testar (executar) manualmente seu código personalizado.

3. Um truque legal de HTML: texto em destaque

Com uma tag HTML <span> simples, você pode adicionar muitos efeitos interessantes ao seu texto ou imagens. Observe que nem todos funcionam em vários navegadores. Os mencionados aqui funcionam no Google Chrome, Microsoft Edge e Mozilla Firefox.

Este efeito de texto HTML destaca o texto entre as tags <span>.

Entrada:

 <span style="background-color: #FFFF00>Your highlighted text here.</span>

Demonstração de saída:

4. Adicionar imagem de fundo ao texto

Da mesma forma, você pode alterar a cor do texto ou adicionar uma imagem de fundo. Este fica ótimo se o tamanho da fonte do texto for maior.

Entrada:

 <span style="background-image: url(https://www.makeuseof.com/wp-content/uploads/2017/09/Background-Image.jpg); font-size: 20pt">MakeUseOf presents...</span>

O mesmo efeito é obtido adicionando os elementos de estilo e fonte ao texto em uma tag <strong>.

Demonstração de saída:

5. Truque de HTML útil para adicionar uma dica de ferramenta de título

Uma dica de ferramenta de título aparece quando você rola o mouse sobre um pedaço de texto ou imagem "manipulado". Você já deve ter visto esses itens usados ​​em sites em imagens, textos vinculados ou mesmo itens de menu em aplicativos de desktop. Use este código HTML para adicionar uma dica de ferramenta ao texto simples em sua página da web.

Entrada:

 <span title="See, this is the tooltip. :)">Move your mouse over me!</span>

Demonstração de saída:

6. Os truques de HTML mais legais até agora: rolagem ou queda do texto

Ao pesquisar "marquee html" no Google, você descobrirá um pequeno ovo de Páscoa. Veja a contagem de resultados da pesquisa de rolagem no topo? Esse é um efeito criado pela marca letreiro agora obsoleta. Embora esse efeito de texto HTML antes legal tenha se tornado obsoleto, a maioria dos navegadores ainda o suporta.

Entrada:

 <marquee>I wanna scroll with it, baby!</marquee>

Demonstração de saída:

Você pode adicionar outros atributos para controlar o comportamento de rolagem, cor de fundo, direção, altura e muito mais. Porém, tome cuidado; esses efeitos podem se tornar bastante irritantes se usados ​​em excesso.

Para um efeito de texto cadente legal, vá para Quackit novamente e copie seu código de letreiro altamente personalizado.

7. Construir um menu de switch interessante com HTML

Os truques de HTML mais legais são efeitos HTML dinâmicos. No entanto, eles geralmente são baseados em scripts. Aqui está um efeito para menus que você concordará que parece muito elegante.

É um pouco mais complicado do que uma tag HTML comum porque funciona com uma folha de estilo e scripts. A vantagem é que você não precisa carregar um arquivo CSS ou script para que funcione. Em vez disso, simplesmente cole o código a seguir na seção <head> do seu site.

Entrada:

 <style type="text/css">
 .menutitle{
 cursor:pointer;
 margin-bottom: 5px;
 background-color:#ECECFF;
 color:#000000;
 width:140px;
 padding:2px;
 text-align:center;
 font-weight:bold;
 /*/*/border:1px solid #000000;/* */
 }.submenu{
 margin-bottom: 0.5em;
 }
 </style><script type="text/javascript">/***********************************************
 * Switch Menu script- by Martial B of http://getElementById.com/
 * Modified by Dynamic Drive for format & NS4/IE4 compatibility
 * Visit http://www.dynamicdrive.com/ for full source code
 ***********************************************/var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
 var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page onlyif (document.getElementById){ //DynamicDrive.com change
 document.write('<style type="text/css">n')
 document.write('.submenu{display: none;}n')
 document.write('</style>n')
 }function SwitchMenu(obj){
 if(document.getElementById){
 var el = document.getElementById(obj);
 var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
 if(el.style.display != "block"){ //DynamicDrive.com change
 for (var i=0; i<ar.length; i++){
 if (ar[i].className=="submenu") //DynamicDrive.com change
 ar[i].style.display = "none";
 }
 el.style.display = "block";
 }else{
 el.style.display = "none";
 }
 }
 }function get_cookie(Name) {
 var search = Name + "="
 var returnvalue = "";
 if (document.cookie.length > 0) {
 offset = document.cookie.indexOf(search)
 if (offset != -1) {
 offset += search.length
 end = document.cookie.indexOf(";", offset);
 if (end == -1) end = document.cookie.length;
 returnvalue=unescape(document.cookie.substring(offset, end))
 }
 }
 return returnvalue;
 }function onloadfunction(){
 if (persistmenu=="yes"){
 var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
 var cookievalue=get_cookie(cookiename)
 if (cookievalue!="")
 document.getElementById(cookievalue).style.display="block"
 }
 }function savemenustate(){
 var inc=1, blockid=""
 while (document.getElementById("sub"+inc)){
 if (document.getElementById("sub"+inc).style.display=="block"){
 blockid="sub"+inc
 break
 }
 inc++
 }
 var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
 var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
 document.cookie=cookiename+"="+cookievalue
 }if (window.addEventListener)
 window.addEventListener("load", onloadfunction, false)
 else if (window.attachEvent)
 window.attachEvent("onload", onloadfunction)
 else if (document.getElementById)
 window.onload=onloadfunctionif (persistmenu=="yes" && document.getElementById)
 window.onunload=savemenustate</script>
 And this code goes wherever you want the dynamic menu to appear.
 <!-- Keep all menus within masterdiv-->
 <div id="masterdiv"><div onclick="SwitchMenu('sub1')">Topics</div>
 <span id="sub1">
 - <a href="https://www.makeuseof.com/service/browser">Browsers/Addons</a><br>
 - <a href="https://www.makeuseof.com/service/web_based">Web Apps</a><br>
 - <a href="https://www.makeuseof.com/service/how-to">How-To Tips</a><br>
 - <a href="https://www.makeuseof.com/service/applications">Cool Software</a><br>
 ...and more!
 </span><div onclick="SwitchMenu('sub2')">Staff Writers</div>
 <span id="sub2">
 - <a href="https://www.makeuseof.com/tag/author/karl-l-gechlik/">Karl Gechlik</a><br>
 - <a href="https://www.makeuseof.com/tag/author/tinsie/">Tina</a><br>
 - <a href="https://www.makeuseof.com/tag/author/varunkashyap/">Varun Kashyap</a><br>
 ...and more!
 </span><div onclick="SwitchMenu('sub3')">Miscellaneous</div>
 <span id="sub3">
 - <a href="https://www.makeuseof.com/about/">About</a><br>
 - <a href="https://www.makeuseof.com/contact">Contact</a><br>
 - <a href="https://www.makeuseof.com/archives-2">Archives</a><br>
 - <a href="https://www.makeuseof.com/disclaimer">Disclaimer</a><br>
 </span></div>

Demonstração de saída:

Infelizmente, não podemos demonstrar esse efeito aqui. Mas a fonte original, Dynamic Drive , apresenta uma cópia de trabalho desse efeito HTML dinâmico.

8. Obtenha uma planilha HTML com o Tableizer

Se você deseja exibir uma planilha em seu site, deixe o Tableizer! transforme seus dados em uma tabela HTML. Basta colar os dados brutos do Excel, Google Doc ou qualquer outra planilha na ferramenta de conversão em tableizer.journalistopia.com . Ajuste as opções da tabela e clique em Tableize It para receber a saída HTML.

Este é talvez um dos códigos HTML mais legais para o seu site, como Tableize It! faz todo o trabalho duro.

Clique em Copiar HTML para a área de transferência para copiar o código HTML e adicioná-lo ao seu site. Considere editar as cores de fundo para torná-las muito mais legais.

Embora não seja realmente um efeito HTML, é muito útil.

Mais códigos e efeitos HTML interessantes para o seu site

O poder do HTML, CSS e JavaScript oferece opções potencialmente ilimitadas para efeitos impressionantes em seu site. Quer mais?

Mostramos oito códigos HTML interessantes que você pode copiar para aprimorar seu site. Embora diferentes, são fáceis de implementar, desde que você conheça as técnicas básicas de codificação de HTML.