Tag Archives: style

Javascript: Fade in, Fade out

Ver post no novo domínio: http://rogeriolino.com/2008/01/15/javascript-fade-in-fade-out/

Um efeito muito legal de transição é o fade, aonde o objeto surge gradativamente (in) ou some (out). Com o auxílio do CSS, definido pelo próprio javascript, usando opacity (alpha) conseguimos montar um exemplo.

Passando dois parâmetros a gente define o alvo (id do elemento HTML) e o tempo de demora da execução do efeito.

Ex.:

fadeOut(id, time)

fadeIn(id, time)

Exemplo em funcionamento aqui.

Javascript: Image Preloader

Ver post no novo domínio: http://blog.rogeriolino.com/2007/03/21/javascript-image-preloader/

Conforme prometido aqui um exemplo de preloader de imagem feito em Javascript:

Clique aqui para visualizar

var bgColor = “#FFFFFF”;
var bgImage = “http://www…/loading.gif”;
var bgRepeat = “no-repeat”;
var bgPosition = “center center”;
var borderWidth = “3px”;
var borderStyle = “solid”;
var borderColor = “#3366FF”;
//
var loadImage = function(w, h, url, target) {
var img = new Image(w, h);
img.src = url;
img.style.visibility = “hidden”;
var molde = document.createElement(“div”);
molde.setAttribute(“id”, “molde”);
var style = molde.style;
style.border = borderWidth+” “+borderStyle+” “+borderColor;
style.background = bgColor+” url(“+bgImage+”) “+bgRepeat+” “+bgPosition;
style.width = img.width+”px”;
style.height = img.height+”px”;
document.getElementById(target).appendChild(molde);
molde.appendChild(img);
img.onload = function() {
this.style.visibility = “visible”;
molde.style.background = bgColor;
}
}

Nesse caso ao invéz de aplicar o background na tag img, apliquei numa div que funciona como uma moldura. Esta de fácil personalização alterando as variáveis globais.

O código é de fácil entendimento, deixa-se a imagem transparente e quando ela carregada (onload) ela “volta” a ser visível.

Para usar coloque isso no HTML:

<script type=”text/javascript”>
var imagem = new loadImage(largura, altura, url, alvo);
</script>

largura, altura: largura e altura em pixel da imagem;
url: caminho completo da imagem, incluindo extensão;
alvo: id da tag aonde deverá ser adicionada a imagem.

Qualquer dúvida ou sugestão só comentar.

CSS – O que é?

CSS (Cascading Style Sheet) são folhas de estilo em cascata.

Pra que servem?

Servem para definir um estilo para o seu documento Web (HTML, XHTLM, por exemplo). Ao invez de você ter que toda hora definir dentro da tag usada os atributos desejados, basta fazer isso uma vez pelo CSS.

Ex.: Se você quer que toda a tag <p> tenha a fonte de cor azul, Verdana e tamanho 12px. Basta configurar ela no CSS dessa maneira:

p {
font: 12px Verdana;
color: blue;
}

E assim todas as tag <p> terão essa mesma característica. Caso você não queira que isso se aplique a todas mas sim em apenas algumas tag <p>, você pode definir uma classe com tais características e depois dentro da tag chamar essa classe.

Ex.:

.minhaclasse {
font: 12px Verdana;
color: blue;
} repare que para definir uma classe é necessário começar com um ponto.

e na tag:

<p class=”minhaclasse“> Meu parágrafo aqui </p>

Como que eu uso o CSS?

Há duas maneiras de aplicar uma folha de estilo em seu documento, uma é definir na própria página, ou chamar um arquivo externo de extensão .css. A segunda opção posibilita muito mais flexibilidade, devido a que você não irá precisar mudar os estilos página por páginas, caso venha querer mudar a “cara” do seu documento, e sim só alterar uma vez o próprio arquivo .css.

Sintaxe:

A sintaxe do CSS é muito simples. Primeiro coloca o nome da tag que queira definir o estilo abra “{” coloca os atributos e depois fecha “}”.

Os nomes das classes devem ser iniciados com um “.” e dos ID com “#“.

Ex.:

body {
background: black;
}

.minhaclasse {
color: #FF0000;
}

#meuDiv {
width: 100px;
height: 200px;
}

mais aqui

A diferença primordial entre class e id, é que a mesma classe você usa mais de uma vez em tags diferentes, enquanto o id é usado uma única vez – por uma <div> por exempo – pois o nome declarado no id serve para identificar aquela tag (exclusiva), como era feito pelo atributo name.

Definindo o estilo pela própria página:

Se você não ver porquê criar um arquivo externo ou que só vai precisar usá-lo em uma página, basta colocar o código do CSS dentro da tag <style> que por sua vez deve ficar dentro da tag <head> passando o atributo type como text/css.

Ex.:

<html>
<head>
<title>Meu Título</title>
<style type=”text/css”>
<!–
.minhaclasse {
font: 12px Verdana;
color: blue;
}
–>
</style>
</head>
<body>
<p class=”minhaclasse“> Meu parágrafo aqui </p>
</body>
</html>

Repare que o CSS propriamente dito vem dentro de um comentário ( <!– –> ), isso acontece para evitar bugs de alguns browser antigos, mas será ignorados pelos browsers mais novos.

Definindo o estilo através de um arquivo externo:

Pode-se chamar um arquivo externo de duas maneiras, uma já utrapassada e pouco usada e a mais semânticamente correta usando a tag <link> – tag na qual adiciona informações externas na página.

Primeira:

<style type=”text/css”>
<!–
@import: url(arquivo.css);
–>
</style>

Segunda, e recomendada:

<link rel=”stylesheet” href=”style.css” type=”text/css”/>

Para entender um pouco mais do porquê de tanto atributos vamos analisar um-por-um :

href: igual ao da tag <a>, define o caminho.

rel: vem do ingles relationship (relacionamento), com o atual arquivo especificado no href.

A tag <link> também deverá estar contida na tag <head>.

Alguns dos atributos mais utilizados:

background: cor; /* cor do fundo da página */
color: cor; /* cor da fonte */
font: familia; /* ex.: Verdana, Arial, Tahoma */
margin: top right bottom left; /* margin e os sentidos */
padding: top right bottom left; /* espaçamento dentro e os sentidos */
width: valor /* largura */
height: valor /* altura */
text-align: valor /* alinhamento do texto – center, left, right, justify */
border: largura tipo cor /* largura, tipo (solid, dotted, dashed), cor */

mais sobre:

Maujor.com
Maujor.com Tutorial
W3.org
W3.org Use Link
W3schools.com
W3schools.com examples
Wikipedia.org