Se você sempre desejou ter um link em sua página onde fosse possível mudar o estilo da mesma somente com um clique, então está lendo o post certo. Iremos aprender, utilizando a linguagem PHP, como é possível criar um link que permite o usuário escolher entre duas folhas de estilos. Sendo possível alterar totalmente o layout de uma página através do CSS, você poderá criar duas versões de um único site e ainda permitirá que o internauta escolha qual deseja visualizar. Isso tornará seu site um pouco mais interativo com o usuário.

A estrutura para tornar isso possível é simples, para tanto, é necessário noções de PHP e conhecimento de CSS. Para iniciarmos você terá que ter uma página pronta (óbvio, né?! rsrs), que eu chamarei de “minhapagina.php”, e duas folhas de estilos, no meu caso “folha01.css” e “folha02.css”.

A primeira alteração que vamos fazer no documento PHP será “linkar” uma das folhas de estilos a ele. Normalmente o link se dá pelo seguinte comando:

<link href="folha1.css" rel="stylesheet" type="text/css" />

Porém, para o trabalho que iremos realizar iremos utilizar:

<link href="<?php echo $padrao;?>" rel="stylesheet" type="text/css"  />

Agora iremos inserir todo o comando PHP. Será criada uma variável chamada “padrão” que irá receber a folha de estilo. Iremos atribuir a essa variável umas das folhas de estilos, a que irá ser carregada com a página. O seu estilo padrão. Em seguida, através da estrutura IF iremos realizar toda a mágica para que a alteração seja possível. Veja abaixo a estrutura comentada:

1
2
3
4
5
6

<?php $padrao="folha01.css"; //variável recebe o estilo padrão que será carregado 
	//isset verifica se a varíavel "estilo" foi criada e então...
	if( isset ($_GET['estilo'])) {
	   	$padrao = $_GET['estilo']; //... a variável "padrão" recebe o estilo escolhido 
	}
?>

Através da estrutura acima será feita toda a verificação para a mudança de estilo. Para finalizarmos, vamos criar os links para as folhas de estilo. Como você deve ter percebido no código PHP utilizamos o método GET, portando o link deve ser para a mesma página HTML (no meu caso minhapagina.html) utilizando o raciocínio do método GET:

1
2
3
4
5
6
7

<!-- 
estrutura de link para cada folha de estilo,
onde a variável "estilo" é igual ao nome
do arquivo a ser carregado
-->
<a href="minhapagina.php?estilo=folha01.css">Estilo 01</a>
<a href="minhapagina.php?estilo=folha02.css">Estilo 02</a>

Estando a variável “estilo” com o nome da folha a ser carregada, essa passa o nome do arquivo para a variável “padrão” que será responsável em informar, através daquela primeira linha de código que vimos, qual folha de estilo será carregada.

Então é isso, espero que tenha ajudado a quem possa interessar.

Até a próxima!

Reginaldo Lima
Equipe Alvo Web

O Conteúdo do Alvo Web Developers está licenciada sob uma Creative Commons Atribuição-Uso Não-Comercial-Compartilhamento pela mesma Licença 2.5 Brasil License.

Tema: Customizando botões utilizando o CSS.
Dificuldade: básico.
Recomendações: para um bom aproveitamento deste artigo, é necessário ter conhecimento básico em HTML, CSS e Photoshop.
Testado e Aprovado: IE6.0 IE7.0 FireFox2 e Opera 9.0

Arquivos:
1 arquivo HTML que contem o seu formulário;
1 arquivo css;
1 Imagem do seu botão customizado (Jpg ou Gif)

Fala pessoal!
Sabe aquele botão “enviar” com a cara do Windows, que a gente esta cansado de ver nos formulários? Podemos usar imagens de botões customizados e deixar seu projeto com uma cara muito mais interessante.

Primeiro crie o seu botão no seu editor de imagens preferido, nós utilizamos o Photoshop CS3.
Salve a imagem do seu botão, sem deixar margem. Caso você queira deixar margem, salve no modo Gif com plano de fundo transparente para não comprometer o visual do seu layout.
Vejamos alguns exemplos abaixo.

Download deste exemplo (PSD) 400kb

Abra a sua folha de estilo CSS
iremos inserir o seguinte código:

.enviar { background-image:url(images/bt_enviar.gif); height: 34px; width: 35px; border:0px; }

No item “background-image:url(images/bt_enviar.gif);” você deve informar o endereço da imagem do botão.

Obs: Repare que as coordenadas de altura e largura estão um pouco exageradas pois a imagem do meu botão tem 35px de largura (width) e 21px de altura (height). Porem, por algum motivo que ainda não descobrimos, sabemos que essas dimensões foram necessárias para uma correta visualização do botão.
Salve seu documento css.

Abra seu formulario.html no seu editor preferido e localize o código referente ao botão submit.

<input name="botao" type="button" value="Enviar">

Vamos trocar esse código pelo código abaixo. Sobrescreva.

<button type="submit" class="enviar"> </button>

Salve o documento HTML e teste.

Veja um exemplo finalizado:

Qualquer dúvida, e esclarecimento mande um comentário, até a próxima.

Felipe Alencar
Next4.com.br
Equipe Alvo Web

O Conteúdo do Alvo Web Developers está licenciada sob uma Creative Commons Atribuição-Uso Não-Comercial-Compartilhamento pela mesma Licença 2.5 Brasil License.

Vamos aprender nesse tutorial a fazer uma área overflow usando CSS. Essa técnica é muito utilizada para apresentar contratos, informações técnicas, sem ocupar muito espaço na tela de deixar o usuário livre para escolher se deseja ler ou não o conteúdo.

A técnica do overflow é bem parecida com um iframe, apesar de não ser um e ainda ter muitas vantagens, como por exemplo, um código limpo e leve.

Veja o exemplo:

Os códigos utilizados na folha de estilo CSS:

div #overflow {
    backgroung-color:#ffffff;
    width: 450px;
    height: 125px;
    Overflow: scroll;
}

Na sua página HTML você insere:

<div id="overflow">
 Conteúdo aqui
</div>

Felipe Alencar
www.next4.com.br

Equipe AlvoWeb

No arquivo HTML

<body> <div id="centro"> Conteúdo do site </div> </body>

No arquivo CSS

1
2
3
4
5
6
7
8

/* centraliza no Firefox */ body { text-align:center; } /* centraliza no IE */ 
#centro {
	margin:0px auto;
    width:770px; border: 0;
    vertical-align:top;
    position:relative;
    background-color:#ffffff;
}

Obs.: não esqueça de chamar o arquivo CSS na página HTML.
Entre as tags <head> da sua página HTML você deve adicionar a seguinte linha:

<link href="seuArquivo.css" rel="stylesheet" type="text/css" />

Equipe AlvoWeb