Você quer que seu site pareça incrível — mas suas habilidades de desenvolvimento web estão faltando.
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 servirão.
Para começar com alguns efeitos HTML interessantes, compilamos esses modelos de código gratuitos para copiar. Eles melhorarão a funcionalidade e a experiência do usuário do seu site, sem custar um centavo. Embora sejam principalmente HTML, esses códigos legais também podem conter algum CSS e PHP.
1. Efeito de paralaxe HTML legal
Você provavelmente já viu o Efeito Paralaxe usado em sites com anúncios online. Conforme você rola para baixo um artigo, a imagem de fundo parece rolar em um ritmo diferente ou um anúncio é exibido.
Como alternativa, talvez a imagem de fundo mude conforme você visita diferentes partes do site. É um efeito legal que adiciona profundidade visual ao conteúdo e pode ser adicionado mesmo que você não entenda o código HTML básico.
Você pode brincar com o efeito e copiar o código para um simples efeito 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 Header/Footer Parallax acima do CodePen.
Este é um elemento HTML simples, mas útil, que permite compactar 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 ajustá-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;">
Se você deseja algo um pouco mais sofisticado, também pode buscar código para uma caixa de comentários personalizável do Quackit.
Lá você encontrará vários modelos, mas também poderá usar o editor deles para alterar e testar (executar) manualmente seu código personalizado.
3. Um truque HTML legal: texto destacado
Com uma simples tag , você pode adicionar vários efeitos HTML interessantes ao seu texto ou imagens. Observe que nem todos funcionam em navegadores. Os mencionados aqui funcionam no Google Chrome, Microsoft Edge e Mozilla Firefox.
Este efeito de texto HTML destaca o texto entre as tags .
Entrada:
<span style="background-color: #FFFF00>Your highlighted text here.</span>Demonstração de saída:
4. Código HTML para adicionar uma imagem de fundo legal ao texto
Da mesma forma, você pode alterar a cor do seu 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 .
Demonstração de saída:
Uma dica de ferramenta de título aparece quando você rola com o mouse sobre um pedaço de texto ou imagem “manipulado”. Você já os viu usados em sites em imagens, texto vinculado ou até 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 ainda: texto de rolagem ou queda
Ao pesquisar por “marquee html” no Google, você descobrirá um pequeno ovo de páscoa. Veja a contagem de resultados de pesquisa de rolagem na parte superior? Esse é um efeito criado pela agora obsoleta marca de letreiro. Embora esse efeito de texto HTML antes legal tenha sido preterido, a maioria dos navegadores ainda o suporta.
Entrada:
<marquee>I wanna scroll with it, baby!</marquee>Demonstração de saída:
Você pode adicionar mais atributos para controlar o comportamento de rolagem, cor de fundo, direção, altura e muito mais.
Por exemplo, você pode rolar para a esquerda com:
<marquee Troque “esquerda” por “direita” para rolar o texto na direção oposta.
Como alternativa, você pode rolar para cima ou para baixo:
<marquee Além disso, o letreiro também possui um comportamento de “slide”, que limita o quanto o texto pode rolar. Tome cuidado, no entanto; estes efeitos podem tornar-se bastante irritantes se usados em demasia. Para um efeito de texto em queda legal, vá para Quackit novamente e copie seu código de letreiro altamente personalizado.
Os truques HTML mais legais são os 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 fazer upload de um arquivo CSS ou script para que funcione. Em vez disso, basta colar o código do Dynamic Drive na seção
do seu site.8. Obtenha uma planilha HTML com o Tableizer
Se você deseja exibir uma planilha em seu site, deixe o Tableizer! transformar 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 o opções de mesaentão clique Tabelar para receber a saída HTML.
Este é talvez um dos códigos HTML mais legais para o seu site, pois o Tableize It! faz todo o trabalho duro.
Clique Copiar HTML para a área de transferência para copiar o código HTML e adicioná-lo ao seu site. Considere editar a propriedade background-colors para um efeito mais frio.
Embora isso não seja realmente um efeito HTML, é bastante útil.
Mais códigos e efeitos HTML legais 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, todos são fáceis de implementar, desde que você conheça as técnicas básicas de codificação HTML.
