Post rápido e engraçado hoje pessoal. heheh
Só pra deixar avisado a meus visitantes que não frequentam regularmente o fórum ievolution (devem ser poucos). Descoberta postada pelo HorphuS neste tópico do fórum.
Microsoft dorme no ponto e perde o domínio ie7.com para fã do Firefox. Muito engraçado. hhehehhehe
Té a próxima!
Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.
Opa, post rápido pessoal. Um script pronto.
Descrição: Sistema simples para exibição
de destaques como os desse
site. Onde aparece determinado destaque quando se clica nele, ou mudando
sozinhos através de timeout.
Versão: 1.0
Testado em: Firefox 1.5 ; Internet Explorer 6.0 ; Opera 8.5
Postado originalmente em: fórum
iEvolution
O código está com estilização visual básica.
Melhore-o conforme sua necessidade.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Destaques by Micox</title>
<!--
Nome: Destaques com timeout
Descrição: Sistema simples para exibição de destaques
como os do www.imasters.com.br. Onde aparece determinado destaque quando se
clica nele, ou mudando sozinhos através de timeout.
Versão: 1.0
Autor: Micox / Náiron JCG
Testado em: Firefox 1.5; Internet Explorer 6.0; Opera 8.5
-->
<style>
* { margin:0; padding:0;}
#destaques { width:300px; height:200px; border:1px solid black; overflow:
hidden;}
#destaques ul { height:30px; list-style:none; text-align:center; float:right;}
#destaques ul li{ float:left; width:20px; height:20px; border:1px solid blue;
margin:2px; cursor:pointer;}
#destaques div { clear:both; height:170px; display:none; /* todas escondidas
por default. O JS que irá exibi-las. */}
#destaques div img { float:left; width: 140px; height:140px; border:1px solid
black; margin:5px; }
#destaques .exibe { display:block;}
</style>
<script>
var atual=1; //esta var guarda o valor que tá sendo exibido agora.
var timeloop; //guardará o setInterval
function muda(qual){
/*** função que altera a div que é exibida
***/
//divs que estão dentro do destaques colocadas
num array
var divs = document.getElementById("destaques").getElementsByTagName("div");
//formatando o qual
var qual_num = Number(qual);
if (qual_num<1){ qual_num = divs.length;}
else if (qual_num>divs.length) { qual_num = 1;}
//colocando o zero antes se for necessário
if (qual_num<10) {qual = "0" + qual_num}
else { qual = qual_num };
//voltando a classe de todas para o padrão que é vazio
(resetando)
for (var i=0;i<divs.length;i++){ divs[i].className
= "";}
//aplicando a classe exibe na que for pra exibir
document.getElementById("dest_"+qual).className
= "exibe";
atual = qual_num; //setando o atual
}
function iniciaAutomatico(){
timeloop = setInterval("muda(Number(atual)+1)",3000);
}
</script>
</head>
<body onload="iniciaAutomatico()">
<div id="destaques">
<ul>
<li onclick="muda(this.innerHTML); clearInterval(timeloop)">01</li>
<li onclick="muda(this.innerHTML); clearInterval(timeloop)">02</li>
<li onclick="muda(this.innerHTML); clearInterval(timeloop)">03</li>
<li onclick="muda(Number(atual)-1); clearInterval(timeloop)"><</li>
<li onclick="muda(Number(atual)+1); clearInterval(timeloop)">></li>
</ul>
<div id="dest_01" class="exibe">
<img src="http://www.alteregos.blogger.com.br/seu%20madruga%20sorrindo.JPG" />
<h3>Destaque 1</h3>
<p> Visite o <a href="http://elmicox.blogspot.com">blog
do micox</a>: Javascript, AJAX, Webstandards, CSS, DOM, XML , PHP, ASP,
HTTP, exemplos práticos e outras coisas mais...</p>
</div>
<div id="dest_02">
<img src="http://chbr.manchete.net/madruga.jpg" />
<h3>Destaque 2</h3>
<p>Visite o <a href="http://forum.ievolution.com.br">fórum
iEvolution</a>: Suas dúvidas respondidas com qualidade e democracia.</p>
</div>
<div id="dest_03">
<img src="http://i.esmas.com/image/0/000/003/850/quico20.jpg" />
<h3>Destaque 3</h3>
<p>E é pra visitar esses dois links que
eu passei mermo!</p>
</div>
</div>
</body>
</html>
Té a próxima.
Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.
Olá pessoal,
Estive meio sumido sem postar devido ao novo fórum que estamos criando. Acho que todos que visitam por aqui já sabem.
Estamos em desenvolvimento e ficará muito bom.
Hoje resolvi postar algo muito simples e que pode ser útil a todos: Construção de um menu com bordas arredondadas e semi-transparente.
Para não perder o costume, este tutorial foi baseado em um post da marcinha lá no novo fórum. Agradecimentos a ela e ao pessoal que ajudou por lá.
Será um tutorial bem rápido e pequeno.
Bom, vamos começar mostrando uma prévia de como deve ficar nosso menu:
Percebam que temos 2 questões a resolver:
Enquanto a especificação CSS 3 não chega, nós temos que fazer algumas "gambiarras" se quisermos que um elemento tenha bordas arredondadas.
Nosso amigo Bruno Dulcetti fez o favor de listar algumas destas "gambiarras", pra quem tiver interesse.
A forma que irei utilizar neste tutorial é a seguinte:
As imagens criadas deverão ser gifs e ter a cor do background pretendido para o menu (no caso deste tutorial branco) tendo sua curva transparente.
As imagens (foram colocadas dentro de um div com fundo preto para melhor visualização):
Uma marcação padrão tableless para menus normalmente é assim:
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
Agora que já temos as imagens, vamos alterar o XHTML para receber as curvas.
Como a curva do topo será colocada diretamente no UL através de background, eu precisarei apenas criar 1 (um) novo elemento para receber a curva de baixo.
<ul id="nav" >
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
<div class="curva-base"></div>
Primeiramente agente colocará a curva-base. Setamos a altura para ter a mesma altura que a imagem e a colocamos como background. Temos também que colocar um overflow:hidden pra evitar problemas com o IE.
.curva-base {
height:10px;
overflow:hidden;
background-image:url(curva-base.gif);
}
Agora faremos a curva do topo colocando a imagem curva-topo como background "no-repeat top". Temos também que dar um espaçamento na altura da imagem para que o texto não fique sobre a curva (padding-top):
#nav {
width:190px;
background: url(curva-topo.gif) top no-repeat;
padding-top:10px;
}
Agora só falta colocar o background pra terminar o corpo do menu. Não podemos colocá-lo direto no UL pois a transparência da imagem irá revelá-lo e não ficará curvo. Temos que colocar o background em algum filho do UL. Pra isso vamos usar o LI:
#nav li {
background-color:#FFFFFF;
border-bottom:1px solid #000000;
}
Pronto, agora já temos um menu feio com curvas. No final iremos estilizá-lo por completo.
Percebam que eu coloquei uma classe "curva-base" para receber a imagem da curva do bottom ao invés de utilizar ID. Assim eu poderei reutilizar esta mesma classe em outros menus, economizando código.
Obs.: Existe também a propriedade -moz-border-radius implementada nos browsers Mozilla para fazer as curvas de uma forma mais fácil, porém nos queremos algo para todos os navegadores neste momento.
Ihhh este post está ficando muito grande. Já sei:
No próximo episódio teremos "A TRANSPARÊNCIA" !!!! Não percam...
Update: Próximo episódio pronto. A continuação do tutorial está aqui.
Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.