Coração com letras(Animado)
´´´´¶¶¶¶¶¶´´´´´´¶¶¶¶¶¶
´´¶¶¶¶¶¶¶¶¶¶´´¶¶¶¶¶¶¶¶¶¶
´¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶´´´´¶¶¶¶
¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶´´´´¶¶¶¶
¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶´´¶¶¶¶¶
¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ ´¶¶¶¶¶
´¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
´´´¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
´´´´´¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
´´´´´´´¶¶¶¶¶¶¶¶¶¶¶¶¶
´´´´´´´´´¶¶¶¶¶¶¶¶
´´´´´´´´´´´¶¶¶¶
´´´´´´´´´´´´¶¶
´´¶¶¶¶¶¶¶¶¶¶´´¶¶¶¶¶¶¶¶¶¶
´¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶´´´´¶¶¶¶
¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶´´´´¶¶¶¶
¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶´´¶¶¶¶¶
¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶ ´¶¶¶¶¶
´¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
´´´¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
´´´´´¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
´´´´´´´¶¶¶¶¶¶¶¶¶¶¶¶¶
´´´´´´´´´¶¶¶¶¶¶¶¶
´´´´´´´´´´´¶¶¶¶
´´´´´´´´´´´´¶¶
´´´´´´¶¶¶¶¶¶¶¶´´´´´´´´¶¶¶¶¶¶¶¶
´´´´¶¶¶¶¶¶¶¶¶¶¶¶´´´´¶¶¶¶¶¶¶¶¶¶¶¶
´´´¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶´´´´¶¶¶¶¶¶
´´¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶´´´´¶¶¶¶¶¶
´´¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶´´¶¶¶¶¶¶
´´¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶´¶¶¶¶¶
´´´¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
´´´´´¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
´´´´´´´¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
´´´´´´´´´¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
´´´´´´´´´´´¶¶¶¶¶¶¶¶¶¶¶¶¶¶
´´´´´´´´´´´´´¶¶¶¶¶¶¶¶¶
´´´´´´´´´´´´´´¶¶¶¶¶¶
´´´´´´´´´´´´´´´¶¶¶¶
´´´´´´´´´´´´´´´´¶¶
´´´´¶¶¶¶¶¶¶¶¶¶¶¶´´´´¶¶¶¶¶¶¶¶¶¶¶¶
´´´¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶´´´´¶¶¶¶¶¶
´´¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶´´´´¶¶¶¶¶¶
´´¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶´´¶¶¶¶¶¶
´´¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶´¶¶¶¶¶
´´´¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
´´´´´¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
´´´´´´´¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
´´´´´´´´´¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
´´´´´´´´´´´¶¶¶¶¶¶¶¶¶¶¶¶¶¶
´´´´´´´´´´´´´¶¶¶¶¶¶¶¶¶
´´´´´´´´´´´´´´¶¶¶¶¶¶
´´´´´´´´´´´´´´´¶¶¶¶
´´´´´´´´´´´´´´´´¶¶
Oi gente, tudo bom? Clima de amor nesse dia de hoje né...rs
Resolvi ensinar alguma coisa fofa então...rs
Esse coração que eu fiz foi um exemplo do que pode ser feito...
Lembra daqueles recados enviados por orkut, que podiam conter HTML? Então, esse coração é feito com javascript, css e paciência, muita paciência, pra desenhar com as letras...rsrs
No caso desse coração por exemplo eu achei o menor pronto procurando por "desenhar coração com o teclado" no google, aí eu só tive que fazer um maior... Pra isso não teve jeito... Abri o editor de texto e fiquei lá até dar certo...rsrs
Depois você joga os dois num html, coloca cada um deles dentro de uma <div style='display:inline'>coração</div>, pois assim usando o inspetor de elementos do navegador você pode descobrir quantos pixels de largura e altura tem cada coração... Do maior você precisa saber a altura e a largura, do menor só a altura... Se o seu navegador não tiver esse inspetor você pode colocar background no style da div também, e depois medir com o paint...
Tendo em mãos essas medidas podemos partir para a análise do código...
<style>
#coracao{
width:272px;
height:270px;
font-family:Georgia, "Times New Roman", Times, serif;
}
Haverá um div que terá os 2 corações dentro, essa div terá id coracao, acima você encontra o estilo dela, foi colocado a largura(width) e a altura(height) do maior coração, pois se o maior couber o menor também caberá, já o contrário não é verdadeiro. Coloquei a fonte também, essa fonte eu peguei inspecionando o elemento do site onde peguei o desenho, é que dependendo da fonte o desenho não fica igual, portanto prestem atenção nisso, se copiarem, descubram a fonte que foi usada pra funcionar com vocês também...
#coracao_0{
margin:0 auto;
width:208px;
margin-top:18px;
color:#BB0000;
}
O margin:0 auto, fará com que o coração menor(coracao_0) fique centralizado horizontalmente, para essa centralização funcionar você tem que colocar qual é a largura(width) do coração menor, infelizmente, pra centralizá-lo verticalmente não é tão fácil assim, você terá que usar uma calculadora e fazer uma continha de subtração e outra de divisão, isso é, (altura coração maior - altura coração menor) dividido por 2, no meu caso a conta foi essa: 270-234=36 dividido por 2=18, assim a margem superior do coração menor(margin-top), ficou estabelecida em 18px(pixels).
Color server pra você mudar a cor da letra, você terá que saber a cor em hexadecimal, mas relaxe isso é fácil de descobrir hoje em dia, há vários conversores, e pelo inspetor de elementos do chrome você pode até usar um seletor de cores, mas ele retorna em rgb(x,x,x), mas não tem problema você pode usar rgb que também funciona quase sempre...^^ Só evite o rgba, porque o alpha não funciona em navegadores antigos...
#coracao_1{
display:none;
color:#FF0000;
}
</style>
O coração maior ficará oculto(display:none), isso é, enquanto você não estiver executando o javascript só aparecerá o coração menor...
<div id="coracao">
<div id="coracao_0">
...aqui vem o coração pequeno...
</div>
<div id="coracao_1">
...aqui vem o coração grande...
</div>
</div>
Estrutura utilizada: 2 divs de corações(0 e 1) dentro de um outro div(coracao)...
<script>
function batecoracao(){
if(document.getElementById("coracao_1").style.display=='none'){
document.getElementById("coracao_0").style.display='none';
document.getElementById("coracao_1").style.display='block';
}else{
document.getElementById("coracao_1").style.display='none';
document.getElementById("coracao_0").style.display='block';
}
}
setInterval('batecoracao()',500);
</script>
Para criar uma função a estrutura é:
function nome(){
...
}
A função serve pra você não precisar digitar o comando toda vez que quiser usá-lo, aliás, no nosso caso de hoje sem a função não seria nem possível criar um setInterval, você teria que pegar o que tem dentro da função repetir várias vezes, colando uma em baixo da outra, mesmo assim talvez você não conseguiria ver a execução do efeito, pois o computador executaria no tempo dele, ao contrário do setInterval, no qual você estipula o tempo...
Dentro da função eu crio uma condicional, que procura pelo elemento com id coracao_1(document.getElementById("coracao_1")) e logo na frente coloco .style.display, pra saber qual é o estado do display dele, se está em block ou none(no nosso exemplo de hoje são essas possibilidades), logo depois compara pra ver se o resultado é igual(==) a 'none', não esqueça que none tem que estar entre aspas, pois é string(palavra) e não integer(número)... Caso a condicional aponte que é verdade, que o resultado é none, ela executa o que está entre as chaves {} caso contrário(else), executa o que está nas chaves depois do else. Essa condicional faz com que se o coração maior estiver oculto, que o menor se oculte e o maior apareça, caso contrário, acontece o inverso...
setInteval serve pra repetir uma função "pra sempre", note o modo de escrever esse comando, começa com minúsculas e tem o i maiúsculo. Veja que é colocado o nome da função com parenteses na frente e aspas, depois vem uma vírgula e depois um número, esse número equivale aos milésimos do intervalo de execução da ação, no nosso caso a cada meio segundo(500 milésimos) será executada a função batecoracao...
Bom galera por hoje é isso, espero que vocês tenham aprendido alguma coisa, é uma coisinha bem simples, só pra quem está começando com html mesmo, espero que tenham gostado e que tenham um feliz dia dos namorados...=D
Resolvi ensinar alguma coisa fofa então...rs
Esse coração que eu fiz foi um exemplo do que pode ser feito...
Lembra daqueles recados enviados por orkut, que podiam conter HTML? Então, esse coração é feito com javascript, css e paciência, muita paciência, pra desenhar com as letras...rsrs
No caso desse coração por exemplo eu achei o menor pronto procurando por "desenhar coração com o teclado" no google, aí eu só tive que fazer um maior... Pra isso não teve jeito... Abri o editor de texto e fiquei lá até dar certo...rsrs
Depois você joga os dois num html, coloca cada um deles dentro de uma <div style='display:inline'>coração</div>, pois assim usando o inspetor de elementos do navegador você pode descobrir quantos pixels de largura e altura tem cada coração... Do maior você precisa saber a altura e a largura, do menor só a altura... Se o seu navegador não tiver esse inspetor você pode colocar background no style da div também, e depois medir com o paint...
Tendo em mãos essas medidas podemos partir para a análise do código...
<style>
#coracao{
width:272px;
height:270px;
font-family:Georgia, "Times New Roman", Times, serif;
}
Haverá um div que terá os 2 corações dentro, essa div terá id coracao, acima você encontra o estilo dela, foi colocado a largura(width) e a altura(height) do maior coração, pois se o maior couber o menor também caberá, já o contrário não é verdadeiro. Coloquei a fonte também, essa fonte eu peguei inspecionando o elemento do site onde peguei o desenho, é que dependendo da fonte o desenho não fica igual, portanto prestem atenção nisso, se copiarem, descubram a fonte que foi usada pra funcionar com vocês também...
#coracao_0{
margin:0 auto;
width:208px;
margin-top:18px;
color:#BB0000;
}
O margin:0 auto, fará com que o coração menor(coracao_0) fique centralizado horizontalmente, para essa centralização funcionar você tem que colocar qual é a largura(width) do coração menor, infelizmente, pra centralizá-lo verticalmente não é tão fácil assim, você terá que usar uma calculadora e fazer uma continha de subtração e outra de divisão, isso é, (altura coração maior - altura coração menor) dividido por 2, no meu caso a conta foi essa: 270-234=36 dividido por 2=18, assim a margem superior do coração menor(margin-top), ficou estabelecida em 18px(pixels).
Color server pra você mudar a cor da letra, você terá que saber a cor em hexadecimal, mas relaxe isso é fácil de descobrir hoje em dia, há vários conversores, e pelo inspetor de elementos do chrome você pode até usar um seletor de cores, mas ele retorna em rgb(x,x,x), mas não tem problema você pode usar rgb que também funciona quase sempre...^^ Só evite o rgba, porque o alpha não funciona em navegadores antigos...
#coracao_1{
display:none;
color:#FF0000;
}
</style>
O coração maior ficará oculto(display:none), isso é, enquanto você não estiver executando o javascript só aparecerá o coração menor...
<div id="coracao">
<div id="coracao_0">
...aqui vem o coração pequeno...
</div>
<div id="coracao_1">
...aqui vem o coração grande...
</div>
</div>
Estrutura utilizada: 2 divs de corações(0 e 1) dentro de um outro div(coracao)...
<script>
function batecoracao(){
if(document.getElementById("coracao_1").style.display=='none'){
document.getElementById("coracao_0").style.display='none';
document.getElementById("coracao_1").style.display='block';
}else{
document.getElementById("coracao_1").style.display='none';
document.getElementById("coracao_0").style.display='block';
}
}
setInterval('batecoracao()',500);
</script>
Para criar uma função a estrutura é:
function nome(){
...
}
A função serve pra você não precisar digitar o comando toda vez que quiser usá-lo, aliás, no nosso caso de hoje sem a função não seria nem possível criar um setInterval, você teria que pegar o que tem dentro da função repetir várias vezes, colando uma em baixo da outra, mesmo assim talvez você não conseguiria ver a execução do efeito, pois o computador executaria no tempo dele, ao contrário do setInterval, no qual você estipula o tempo...
Dentro da função eu crio uma condicional, que procura pelo elemento com id coracao_1(document.getElementById("coracao_1")) e logo na frente coloco .style.display, pra saber qual é o estado do display dele, se está em block ou none(no nosso exemplo de hoje são essas possibilidades), logo depois compara pra ver se o resultado é igual(==) a 'none', não esqueça que none tem que estar entre aspas, pois é string(palavra) e não integer(número)... Caso a condicional aponte que é verdade, que o resultado é none, ela executa o que está entre as chaves {} caso contrário(else), executa o que está nas chaves depois do else. Essa condicional faz com que se o coração maior estiver oculto, que o menor se oculte e o maior apareça, caso contrário, acontece o inverso...
setInteval serve pra repetir uma função "pra sempre", note o modo de escrever esse comando, começa com minúsculas e tem o i maiúsculo. Veja que é colocado o nome da função com parenteses na frente e aspas, depois vem uma vírgula e depois um número, esse número equivale aos milésimos do intervalo de execução da ação, no nosso caso a cada meio segundo(500 milésimos) será executada a função batecoracao...
Bom galera por hoje é isso, espero que vocês tenham aprendido alguma coisa, é uma coisinha bem simples, só pra quem está começando com html mesmo, espero que tenham gostado e que tenham um feliz dia dos namorados...=D
Comentários
Postar um comentário