Home-theater-designers
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, o a imagem de fundo parece rolar em um ritmo diferente, ou um anúncio aparece.
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 de rolagem paralaxe simples da 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 acima Efeito de paralaxe de cabeçalho / rodapé da 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:
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! :) Se você deseja algo um pouco mais sofisticado, também pode buscar o código para uma caixa de comentário personalizável do 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 um simplesCom a tag HTML, 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 oTag.
Entrada:
Your highlighted text here.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:
MakeUseOf presents...O mesmo efeito é obtido adicionando os elementos de estilo e fonte ao texto em um marcação.
como desligar a localização no snapchat
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 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:
Move your mouse over me!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:
I wanna scroll with it, baby!Demonstração de saída:
Você pode adicione mais 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 descendente legal, vá para o Quackit novamente e copie seu código de letreiro altamente personalizado.
7. Crie 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 fazer upload de um arquivo CSS ou script para que funcione. Em vez disso, simplesmente cole o código a seguir na seção do seu site.
Entrada:
.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;
}
/***********************************************
* 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('n')
document.write('.submenu{display: none;}n')
document.write('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 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
And this code goes wherever you want the dynamic menu to appear.
Topics
- Browsers/Addons
- Web Apps
- How-To Tips
- Cool Software
...and more!
Staff Writers
- Karl Gechlik
- Tina
- Varun Kashyap
...and more!
Miscellaneous
- About
- Contact
- Archives
- Disclaimer
Demonstração de saída:
Infelizmente, não podemos demonstrar esse efeito aqui. Mas a fonte original, Drive Dinâmico , apresenta uma cópia de trabalho deste 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 . Ajustar o opções de mesa , então clique 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 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.
como faço backup do meu computador para a nuvem
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?
- Goodies HTML te dá ótimoideias de tags.
- Drive Dinâmico tem muitos scripts HTML dinâmicos incríveis.
- Quackit oferece código HTML legal.
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.
Compartilhado Compartilhado Tweet O email 17 exemplos de código HTML simples que você pode aprender em 10 minutosQuer criar uma página da web básica? Aprenda esses exemplos de HTML e experimente-os em um editor de texto para ver como ficam em seu navegador.
Leia a seguir Tópicos relacionados- Programação
- HTML
- Desenvolvimento web
- Ferramentas para webmasters
Editor adjunto de segurança, Linux, DIY, programação e explicação técnica e produtor de podcasts realmente úteis, com vasta experiência em suporte de desktop e software. Um colaborador da revista Linux Format, Christian é um mexedor de Raspberry Pi, amante de Lego e fã de jogos retro.
Mais de Christian CawleyAssine a nossa newsletter
Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!
Clique aqui para se inscrever