Que tal refazermos o efeito neon
2 participantes
Página 1 de 1
Que tal refazermos o efeito neon
Olá amigos, não sei se é a área certa mas vamos la..
Todos devem se lembrar do famoso efeito neon que existia antigamente nos fóruns, porém com o novo editor esse efeito ficou indisponível, eu não lembro como funcionava o antigo, e como eu tive a idéia ontem de refaze-lo, eu não o usei como base (até porque estava sem internet na hora), fiz uma parte do código já, bom como ja disse não manjo muito de Java Script, mas estou estudando para melhorar.. O que falta fazer eu creio que seja adicionar no editor da Forumeiros e talvez adaptar algumas coisas.. O que vocês acham?
HTML
http://mtaz.wikiforum.net/h34-efeito-neon
Não sei se esta tudo certo né, como ja disse não sou muito bom com isso..
Acho que é possível também otimizar esse JQuery, quem sabe..
Todos devem se lembrar do famoso efeito neon que existia antigamente nos fóruns, porém com o novo editor esse efeito ficou indisponível, eu não lembro como funcionava o antigo, e como eu tive a idéia ontem de refaze-lo, eu não o usei como base (até porque estava sem internet na hora), fiz uma parte do código já, bom como ja disse não manjo muito de Java Script, mas estou estudando para melhorar.. O que falta fazer eu creio que seja adicionar no editor da Forumeiros e talvez adaptar algumas coisas.. O que vocês acham?
HTML
- Código:
<div id="texto" style="position:absolute; left:25%;"><input type="text" class="texto" /></div>
<div id="neon">
<div id="neon-title"><img src="https://cdn1.iconfinder.com/data/icons/fatcow/16/select_by_color.png"/></div>
<div id="neon-content">
<table>
<tbody>
<tr>
<td><div id="copyright"></div></td>
<td style="cursor:default;font-size:11px;color:#000;font-weight:bold;" title="Efeito Neon - PunBB Community www.jscript.forumeiros.com">Efeito Neon</td>
</tr>
<tr>
<td><div id="vermelho"></div></td>
<td class="vermelho" style="cursor:pointer;font-size:12px;color:#dc0000;text-shadow:#dc0000 0 0 3px;">Neon Vermelho</td>
</tr>
<tr>
<td><div id="verde"></div></td>
<td class="verde" style="cursor:pointer;font-size:12px;color:#61cf00;text-shadow:#61cf00 0 0 3px;">Neon Verde</td>
</tr>
<tr>
<td><div id="laranja"></div></td>
<td class="laranja" style="cursor:pointer;font-size:12px;color:#cf7f00;text-shadow:#cf7f00 0 0 3px;">Neon Laranja</td>
</tr>
</tbody>
</table>
</div>
</div>
- Código:
@charset "utf-8";
/* CSS Document */
body{
font: normal 12px "Trebuchet MS",tahoma,helvetica,arial,sans-serif;
}
#copyright{
background: url('http://punbb.informer.com/favicon.ico') no-repeat;
width: 16px;
height: 16px;
}
#neon-title{
background: url('https://cdn1.iconfinder.com/data/icons/fatcow/16/select_by_color.png') no-repeat;
text-align: center;
color: #999;
cursor: pointer;
width: 16px;
height: 16px;
-webkit-background-clip: padding-box;
-webkit-border-radius: 2px;
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
background: #FFF;
background-clip: padding-box;
border: 1px solid #CCC;
border-radius: 2px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
color: #333;
line-height: 1;
padding: 4px;
z-index: 4000;
}
#neon-content{
-webkit-background-clip: padding-box;
-webkit-border-radius: 2px;
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
background: #FFF;
background-clip: padding-box;
border: 1px solid #CCC;
border-radius: 2px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
color: #333;
line-height: 1;
padding: 10px;
position: absolute;
z-index: 4000;
display: none;
}
/* CORES */
#vermelho{
background: #dc0000;
}
#vermelho,v{
width: 10px;
border-radius: 2px;
height: 10px;
float: ;
color: #dc0000;
cursor: pointer;
}
#verde,ve{
width: 10px;
border-radius: 2px;
height: 10px;
float: ;
color: #61cf00;
background: #61cf00;
cursor: pointer;
}
#laranja,lr{
width: 10px;
border-radius: 2px;
height: 10px;
float: ;
color: #cf7f00;
background: #cf7f00;
cursor: pointer;
}
- Código:
$(document).ready(function(){
$("#neon-title").click(function(){
$("#neon-content").stop().slideToggle(300);
});
});
$(document).ready(function(){
$(".vermelho,#vermelho").click(function(){$(".texto").val('<v>' + jQuery('.texto').val() + '</v>');});
$(".verde,#verde").click(function(){$(".texto").val('<ve>' + jQuery('.texto').val() + '</ve>');});
$(".laranja,#laranja").click(function(){$(".texto").val('<lr>' + jQuery('.texto').val() + '</lr>');});
});
http://mtaz.wikiforum.net/h34-efeito-neon
Não sei se esta tudo certo né, como ja disse não sou muito bom com isso..
Acho que é possível também otimizar esse JQuery, quem sabe..
Re: Que tal refazermos o efeito neon
Olá,
Por acaso é uma função muito interessante e mais fácil de utilizar!
Por acaso é uma função muito interessante e mais fácil de utilizar!
Convidado- Convidado
Re: Que tal refazermos o efeito neon
Olá!
Eu vi em seu fórum, ao que me parece adiciona novos BBcode não é?
JS
Eu vi em seu fórum, ao que me parece adiciona novos BBcode não é?
JS
Re: Que tal refazermos o efeito neon
Sim, é o objetivo, adicionar outro botão nesse novo editor, com a opção de adicionar o neon nas palavras..
O que acha?
O que acha?
Re: Que tal refazermos o efeito neon
Vamos prosseguir com o tópico? Se formos, eu mesmo faço e posto pra galera.
Convidado- Convidado
Re: Que tal refazermos o efeito neon
Tive alguns resultados, mas ficou muito bugado.. Vou estar tentando refazer aqui e posto alguma coisa.
Re: Que tal refazermos o efeito neon
Bom,
Que tal pensarmos em, botar novos botões somente no template? É que há um template para isso..
Que tal pensarmos em, botar novos botões somente no template? É que há um template para isso..
Convidado- Convidado
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|