Tag Archives: CSS

jun200825

Diego Couto

0

Transparência com CSS em qualquer Browser

Levei algum tempo pesquisando até encontrar uma maneira para controlar o nível de transparência que realmente funcionasse, mas esta busca me retornou um resultado muito simples e útil.

Para os indivíduos que desejam adquirir o mesmo efeito, estas são as propriedades:

filter:alpha(opacity=50);
moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

Deste modo você estará definindo uma transparência de 50%, para aumentar ou diminuir a transparência, basta editar os valores destacados.

Para facilitar a utilização, preferi adicionar as propriedades em uma classe, podendo assim, utilizá-las em quantos elementos desejar.

.transparencia {
filter:alpha(opacity=12);
-moz-opacity:0.12;
-khtml-opacity: 0.12;
opacity: 0.12;
}

jun200824

Diego Couto

0

Alterarando a cor do texto selecionado

A cor padrão dos textos selecionados é bastante neutra, em certo ponto é bom, por se adaptar bem a qualquer tipo de layout, mas se você prefere algo mais “personalizado”, elas com certeza deixam muito a desejar.

A modificação é realizado com o auxílio do CSS, e como era de se esperar, não funciona no Internet Explorer (o que funciona nele afinal?).

/*Firefox*/
::-moz-selection{
background:#F84; /*Cor de fundo*/
color:#FFF; /*Cor do Texto*/
}
/*Safari*/
::selection {
background:#F84;
color:#FFF;
}

mar200823

Diego Couto

0

O que é e como aplicar CSS

CSS significa Cascading Style Sheets, o que traduzindo para o português ficaria algo como folhas de estilo em cascata.

Sua finalidade é estilizar e formatar páginas web,sendo de grande importância para que os web standards sejam obedecidos, mesmo que parcialmente.

Aplicação

<html>
<head>
<title>Aplicando CSS</title>
<style type="text/css">
body { margin:0; Background-color: #CCCCCC; }
#quadrado { height:300px; width:400px;
margin: 20px 0 0 40px; border: 3px solid #0066FF; }
.estilo { background-color: #000000; }
</style>
</head>
<body>
<div id="quadrado" class="estilo"></div>
</body>
</html>


Read more

mar200822

Diego Couto

0

Aplicando Z-Index

No desenvolvimento de seu website você gostaria de sobrepor uma imagem, seja para o motivo que for, mas sempre que insere a imagem ela aparece “por baixo” da que deveria ser sobreposta, por quê ?

Devido a uma má ou inexistente configuração do Z-Index, que pode ser solucionado facilmente.

Vamos supor que são apenas duas images, a imagem 1 deve ficar em baixo e, obviamente, a imagem 2 deve ficar em cima.

Adiciona-se ao CSS:

<style type="text/css">
#imagem_1 {
margin:0;
z-index: 1;
}

#imagem_2 {
margin: 20px 0 0 20px;
z-index: 2;
}
</style>

Pronto, suas imagens estarão sobrepostas corretamente agora, como pode notar, o maior valor é o que ficará no topo.

Não sabe nada de CSS ?

Então acesse este artigo.

mar200820

Diego Couto

0

Crie um Menu com CSS Online

Izzymenu

Se você gosta de menus em CSS no maior estilo web 2.0, mas não tem tempo ou paciência para se dedicar ao estudo de CSS, com certeza você vai gostar muito do izzyMenu.

Com ele, você pode criar belos menus sem carecer de conhecimento sobre CSS. É só selecionar opções como imagem de fundo, fonte, espaçamentos, borda… e está pronto.

mar200805

Diego Couto

0

Tabelas ou Tableless?

Como um antigo desenvolvedor de “websites tabelados”, recomendo que todos busquem a acessibilidade, e no mínimo uma utilização parcial de web standards inicialmente.

No começo pode parecer complicado, pois o modo de pensar em sua estrutura em tableless é totalmente diferente do modo que planejava seu site em tabelas.

Como assim diferente?

Muitas coisas que eram feitas com simplicidade através de tabelas, ficam um pouco mais complexas, como por exemplo a utilização de bordas arredondadas.

Não conheço nenhum desenvolvedor web que nunca tenha tipo problemas com o Internet Explorer, seja em posicionamentos, bordas, margens…

Mas como eu começo?

Sempre, antes de criar qualquer layout pegue um papel, uma caneta e começar por ali mesmo.

Desenhe suas idéias, espalhe-as pela folha e após, vá juntando-as pouco a pouco, mudando de posição para ver onde fica melhor; estude-o, pense em como ele será estruturado sem a utilização das antigas tabelas.

Se já possui um website em tabelas, antes de tentar refazê-lo, vá realizando pequenas alterações, ajustanto posicionamento, deletando as tabelas do topo e refazendo através de div’s, com isso você vai pegando prática e a “lógica”.

Pra que desenvolver em tableless?

Você está desenvolvendo um website para o cliente, no princípio, o cliente queria o menu na direita, você fez todo o layout dele em tabelas e no último momento ele decidi colocar o menu na esquerda.

Dependendo de como foi organizado seu layout, isso pode virar uma tarefa muito desgastante e trabalhosa para algo tão simples.

Em tableless, independentemente de sua organização essa tarefa é realizada em poucos minutos, ajustando um posicionamento aqui e outro lá.