Aqui você verá artigos sobre CSS
Moderador: web
por web Offline » Dom Ago 26, 2007 8:49 pm
|
|
Abaixo vou passar um sistema de barra de estatísticas transparentes.
CSS
- Código: Selecionar todos
<style type="text/css">
.barra_1{
width:20px;
background-color:black;
position:relative;
left:0;
z-index:1;
float:left;
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
font-size:0px;
}
.barra_2{
width:20px;
background-color:#cccccc;
position:relative;
left:-5;
z-index:2;
float:left;
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
font-size:0px;
}
.barra_3{
width:20px;
background-color:orange;
position:relative;
left:-10;
z-index:3;
float:left;
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
font-size:0px;
}
.barra_4{
width:20px;
background-color:green;
position:relative;
left:-15;
z-index:4;
float:left;
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
font-size:0px;
}
.barra_5{
width:15px;
background-color:purple;
position:relative;
left:-20;
z-index:5;
float:left;
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
font-size:0px;
}
</style>
HTML
- Código: Selecionar todos
<table cellpadging="0" cellspacing="0">
<tr>
<td valign="bottom"><div class="barra_1" style="height:30px;"></div></td>
<td valign="bottom"><div class="barra_2" style="height:60px;"></div></td>
<td valign="bottom"><div class="barra_3" style="height:40px;"></div></td>
<td valign="bottom"><div class="barra_4" style="height:80px;"></div></td>
<td valign="bottom"><div class="barra_5" style="height:1px;"></div></td>
</tr>
</table>
<table>
<tr>
<td colspan="5"><div class="barra_1" style="width:15px; height:15px;"></div> item 1</td>
</tr>
<tr>
<td colspan="5"><div class="barra_2" style="width:15px; height:15px; left:0px;"></div> item 2</td>
</tr>
<tr>
<td colspan="5"><div class="barra_3" style="width:15px; height:15px; left:0px;"></div> item 3</td>
</tr>
<tr>
<td colspan="5"><div class="barra_4" style="width:15px; height:15px; left:0px;"></div> item 4</td>
</tr>
<tr>
<td colspan="5"><div class="barra_5" style="width:15px; height:15px; left:0px;"></div> item 5</td>
</tr>
</table>
Gostou do que encontrou? Divulgue, indique, participe, agradeça pelas respostas.
Faço scripts personalizados ou reparos em scripts. Orçamento MSN codigosnaweb [@] hotmail [.] com
web
ADMIN
Mensagens: 11904
Registrado em: Sáb Jan 20, 2007 6:08 pm
Localização: RJ / RJ / Brasil
|
Voltar para Artigos sobre CSS
Quem está online
Usuários navegando neste fórum: Nenhum usuário registrado e 1 visitante
