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..