Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
126 lines (117 sloc) 5.06 KB
---
title: Logomático – Crie seu próprio logotipo!
---
<style type="text/css">
/*body { text-align:center; margin:auto;}*/
#canvas { margin:50px auto; position: relative; }
#canvas, #cores, #vazado { width:256px; height:256px; }
#cores { float:left; }
#chave-esq { float:left; }
#chave-dir { float:right; }
#chave-esq,
#chave-dir {
width:80px;
height:250px;
}
#zz {
position:absolute;
top:55px;
left:55px;
width:140px;
height:140px;
}
#vazado {
position:absolute;
top:0;
left:0;
background:url(img/logo/zzlogo-vazado-preto.png);
}
#content table { border-spacing:0; border-collapse:collapse; margin:auto; }
#content td { width:32px; height:32px; border:1px solid black; }
#content td a { display:block; text-decoration:none; }
#content td a:hover { color:transparent; }
.white { background-color: white !important; }
.black { background-color: black !important; }
.yellow { background-color: yellow !important; }
.red { background-color: red !important; }
.green { background-color: lime !important; }
.orange { background-color: #FF8000 !important; }
.blue { background-color: #0080FF !important; }
.pink { background-color: #FF0080 !important; }
.rose { background-color: #CC66FF !important; }
.gray { background-color: #666666 !important; }
.silver { background-color: #E6E6E6 !important; }
#fim { clear: both; margin: 4em; }
</style>
<script type="text/javascript">
function clique(el) {
cor = el.parentNode.className;
destino = el.parentNode.parentNode.id.replace('cor-', '');
document.getElementById(destino).className = cor;
event.preventDefault();
}
function fundo(n) {
el = document.getElementById("vazado");
cor = (n == 0) ? "preto" : "branco";
el.style.backgroundImage = "url(img/logo/zzlogo-vazado-" + cor + ".png)";
}
</script>
<div id="canvas">
<div id="cores">
<div id="chave-esq" class="white"></div>
<div id="chave-dir" class="white"></div>
<div id="zz" class="white"></div>
</div>
<div id="vazado"></div>
</div>
<table id="tabelinha">
<tr id="cor-chave-esq">
<th>{</th>
<td class="yellow"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="orange"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="red"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="pink"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="rose"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="blue"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="green"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="white"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="silver"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="gray"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="black"><a href="#" onClick="clique(this)">&nbsp;</a></td>
</tr>
<tr id="cor-zz">
<th>ZZ</th>
<td class="yellow"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="orange"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="red"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="pink"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="rose"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="blue"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="green"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="white"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="silver"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="gray"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="black"><a href="#" onClick="clique(this)">&nbsp;</a></td>
</tr>
<tr id="cor-chave-dir">
<th>}</th>
<td class="yellow"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="orange"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="red"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="pink"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="rose"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="blue"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="green"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="white"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="silver"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="gray"><a href="#" onClick="clique(this)">&nbsp;</a></td>
<td class="black"><a href="#" onClick="clique(this)">&nbsp;</a></td>
</tr>
<tr>
<th>fundo</th>
<td class="white"><a href="javascript:fundo(1)">&nbsp;</a></td>
<td class="black"><a href="javascript:fundo(0)">&nbsp;</a></td>
<td colspan="9" style="border-style: none;"></td>
</tr>
</table>
<p id="fim">Quando terminar, faça um PrintScreen para salvar o logo.</p>