Clubepc » CSS

Diferença entre class e id no CSS

Thales RB — Wed, 02 Jan 2008 04:07:57 +0000

Algo que pode ser visto com muita frequencia e pode dar um pouco de duvida é a diferença entre class e id no css, mas a diferença entre eles é simples.

O id serve como um identificador único, ou seja em todo o seu HTML só pode ser usado esse id uma vez, ele é mais usado para menus, e em javascript. Para ser criado um id no arquivo css deve ser colocado um # na frente do nome ex:

#teste{

color: #fff;

}

e para usa-lo:

Já o class pode ser usado quantas vezes se quizer, o que permite se atribuir um layout a muitas partes. Para ser criado uma class no arquivo css deve ser colocado um . (ponto) na frente do nome ex:

.teste{

color: #fff;

}

e para usa-lo:

Coletanea de melhores sites feitos com CSS

Thales RB — Thu, 20 Dec 2007 09:13:11 +0000

O site webdesignerwall fez uma lista dos sites mais bonitos, baseados em XHTML e CSS, vale a pena dar uma olhada, nessa lista pra tirar algumas ideias, e como não são feitos em flash dá pra copiar algum efeito, ou aprender como é efeito. Eu pelo menos sempre usei essa ideia, qualquer efeito ou função, que eu ache legal eu olho o fonte, e tento usá-lo.

Só num vá me copiar o site inteiro e dizer que é seu hein.

É tudo em ingles, a listagem: http://www.webdesignerwall.com/trends/best-of-css-design-2007/

Mostrando conteudo em abas

Thales RB — Thu, 20 Dec 2007 06:02:30 +0000

Hoje eu estava procurando algum sistema de abas, pra usar no meu CMS, e no trajeto achei varios interessantes, vou fazer uma lista deles. Mas todos eles são de sites em ingles

Esse usa algumas imagens nas abas deixando um efeito bem legal:

http://dhtmlx.com/docs/products/dhtmlxTabbar/index.shtml

esse usa ajax para caregar o conteudo, só tomem cuidado com o SEO :

http://20bits.com/2007/05/23/dynamic-ajax-tabs-in-20-lines/

esse é legal por que, não é preciso clicar na aba é só passar o mouse em cima:

http://www.kollermedia.at/archive/2007/07/10/easy-tabs-12-now-with-autochange//

Esse é interessante pois cada aba tem um link(o que eu estava procurando) ou seja com esse link ele já abre na aba desejada:

http://phrogz.net/JS/Tabtastic/index.html

Achados em: http://www.linksweb.com.br/

Adicionando o efeito de neve ao seu site

Thales RB — Fri, 07 Dec 2007 02:52:23 +0000

Para entrar no espírito de natal é legal adicionar algo no site, mudar o layout ou criar um logo de natal, mas isso pode dar trabalho, algo bem facil de se fazer é colocar um efeito de neve caindo. Por isso vou postar um script em javascript que faz isso.

Um exemplo de como ficará pode ser visto aqui.

Ele usa uma imagem de neve então copie essa imagem aqui(ou qualquer uma a sua escolha)

o link para essa imagem é http://i12.tinypic.com/6uscqjq.gif

para usa-lo é bem simples simplesmente copie todo o conteudo a seguir e cole após o de seu site.

para ele funcionar é preciso alterar:

//Configure below to change URL path to the snow image
var snowsrc=”snow.gif”

para o endereço de onde se encontra a imagem, caso ela esteja na mesma pasta que a pagina pode deixar como está.

Também é possivel alterar os seguintes itens
// Configure below to change number of snow to render
var no = 10;
Irá alterar o numero de “flocos” de neve que irão aparecer

// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;

Irá alterar o tempo que o “flocos” seram exibidos na tela, 0 é infinito(ele irá até o fim da sua pagina e comecará do topo novamente)

// Configure how much snow should drop down before fading (“windowheight” or “pageheight”)
var snowdistance = “pageheight”;

Altera o tempo que os flocos iram cair, pageheight é até o fim da sua pagina(se tiver uma pagina grade isso não será bom), e windowheight é até o fim da tela(resolução do monitor).

Para manter a organizaçãse o do codigo fonte de seu site você pode salvar esse script em um arquivo .js como snow.js e em seu codigo fonte(também depois do ) colocar apenas

alterando o src=”" para o local do arquivo no caso dele não estar na mesma pasta.

Um aviso importante: esse efeito de neve, usa bastante o processador!!!, com 5 abas dele abertas no firefox, ele estava usando 70% do meu processador(turion 64 – 2Ghz), então é melhor, colocar esse efeito, só na pagina inicial de seu site, para que ele não apareça em todas as paginas.

Se alguem quizer um outro script que não usa imagem(irá aparecer pontos) pode pedir que eu disponibilizo.

Update: olhando as origens das visitas achei no site http://www.agitonoite.com/index.php algo muito interessante, ao invez de usar a imagem de neve, colocaram um gif de fogos de artificios, ficou muito legal.

Fica ai a ideia pra quem quizer usar esse efeito agora depois do natal =D

Gostou desse script?, quer saber como ele funciona. Então veja o preço de alguns livros no Já cotei

Fixando um conteudo na tela usando CSS

Thales RB — Thu, 06 Dec 2007 23:38:11 +0000

Como eu já havia falado antes o Internet Explorer 6 não reconhece o comando position: fixed(o IE7 já reconhece) então para podermos fixar um conteudo na tela precisamos usar um hack.

Veja aqui um exemplo de como é um conteudo fixo

Vejamos então como fazer isso.

Nos navegadores descentes(qualquer um que não seja o IE), usamos os seguintes atributos do CSS para fixar um conteudo na tela:




Algum conteudo aqui

Sendo o left e top as distancias que o conteudo irá ficar em relação a tela.

Como o IE 6 ou anterior não reconhece esse comando precisamos usar o seguinte hack:




Algum conteudo aqui

O * html é um hack que indica que o conteudo só será executado no IE 5 ou 6, e para alterar a altura que o conteudo ficará na tela é só mudar o numero em body.scrollTop+100+”px”

Como eu havia explicado no post anterior você pode colocar o dois css #meudiv que o segundo só será executado no IE e o primeiro em todos os outros navegadores

Mas com esse hack o conteudo fixo, fica um pouco estranho no IE, pois ao mover a tela, é como se o conteudo o se movesse também, e ele retorna para posição fixa, principalmente se for algo grande(muitas linhas), veja o exemplo para saber do que estou falando.

E no fórum tem um exemplo de uso disso na imagem de ir ao topo(irei colocar algo parecido aqui no blog)

Mudando o layout dos formulários HTML

Thales RB — Tue, 04 Dec 2007 08:50:39 +0000

Os comandos html para formulários(input, button, etc) tem um layout que não pode ser mudado com CSS, mas existe alguns scripts em javascript que permitem alterar esse layout um deles é o niceform. Veja só a diferença:

o normal: usando o niceform:

bem melhor não ??

Para usa-lo é simples, primeiro faça o download dele aqui, ele vem com um arquivo de exemplo para poder dar uma olhada, mas para aplica-lo em suas paginas é só adicionar:

e em seu formulário coloque class=”niceform” ex:

Tornando uma imagem transparente com CSS usando o filtro alpha

Thales RB — Fri, 23 Nov 2007 04:50:28 +0000

Um atributo bem interessante que é possivel alterar é o efeito alpha, ele serve para tornar uma imagem transparente, exatamente como pode ser visto aqui no site.

Para usar esse efeito se usa os seguintes atributos:

Para internet explorer:

opacity:.50;filter: alpha(opacity=50);

Para firefox:
-moz-opacity: 0.5;

No caso o 50 e o 0.5 é a porcentagem de transparencia, sendo 100 ou 1.0 a imagem normal, e 10 ou 0.1 extremamente transparente(quase invisivel).

Para usa-lo e só adicionar no css ligado a imagem. Nem vou adicionar um exemplo pois o site todo é um exemplo disso =D
Qualquer dúvida é só perguntar.

Update: eu criei um exemplo para entender melhor como fica esse efeito, aqui

Obs: eu nunca testei esse efeito em outros navegadores como o opera se alguem puder testar e falar se funciona vai ajudar bastante.

CSS Hacks o que são e pra que servem?

Thales RB — Wed, 21 Nov 2007 03:00:29 +0000

CSS Hacks não são mais do que “gambiarras”, no código que abusam de erros de renderização dos navegadores. Eles são códigos CSS que fazem funcionar ou não, um certo código em um determinado browser.

É extremamente comum, após criar o layout do site, ele ficar certinho em um navegador, e em outro ter alguma coisa errada ~~ou tudo errado~~, principalmente no terrível, Internet Explorer 6 ou anterior, que para alegria e satisfação geral adota os seus proprios padrões do CSS.

Para resolver isso foi criado os CSS hacks, que permitem corrigir, algo, no navegador desejado, podendo ocultar ou adicionar alguma classe ou atributo.

Como os problemas acontecem na maioria das vezes, no Internet Explorer, a maioria dos hacks são feitos somente para ele.

Então vejamos alguns hacks:

Adicionar um _(underline) a frente do seletor. Este hack fará com o que certo código CSS funcione apenas no IE5 ou 6 os outros browsers vão ignorar. Ex:

div {
width:300px;
_width:100px;
}

Todo browser decente não entenderá essa propriedade e a ignorará.

Mas por algum motivo bizarro, o Internet Explorer aceita isso.
Logo, no Internet Explorer, a largura dos divs terão 100 pixels de largura.

Atenção.
Esse hack deve vir depois da propriedade correta. Se vir antes, o IE aceitará a última propriedade que vier, ela sobrescreverá a propriedade underline e dará prioridade para a propriedade que está sem underline.

E Esse hack faz seu CSS não ser validado pelo W3C.

Esse é util se houver alguma coisa fora do lugar, ou com tamanho errado, ou seja pouca coisa, mas e se muita coisa, ou todo o layout, ficar desconfigurado no IE o que fazer?. Nesses casos, existe as conditional comments, que é como um comando de programação if(se então), podendo definir um bloco, a ser executado.

Vejamos a sua sintaxe:

HTML = para ser executado o CSS desejado.

HTML = para não ser executado o CSS desejado

no [if condition] temos os seguintes atributos:

[if IE] o padrão e quer dizer se for o Internet explorer então…

[if IE X] o X quer dizer a versão do Internet Explorer, como 5, 6, 7.

[if !IE] ! quer dizer se não for o Internet Explorer, ou seja qualquer outro navegador.

[if lt IE X] lt quer dizer se for menor que tal versão, o X quer dizer a versão do Internet Explorer.

[if gt IE X] gt quer dizer se for maior que tal versão, o X quer dizer a versão do Internet Explorer.

[if (gt IE 5)&(lt IE 7)] & é 0 operador logico E(AND), ou seja se IE maior que 5 e menor que 7 entao…

[if (IE 6)|(IE 7)] | é 0 operador logico OU(OR), ou seja se IE é 6 ou 7 entao…

mais informaçoes sobre conditional comments: http://msdn2.microsoft.com/en-us/library/ms537512.aspx

Com isso é possivel fazer muitas coisas como: executar algumas classes do css, criar um arquivo .css só pra ele(em casos extremos), exibir mensagens(irei adicionar uma mensagem aqui no clubepc, para baixar o firefox =D ), executar scripts ~~encher de propaganda~~, e o que mais você conseguir imaginar.

E é logico que existem varios outros hacks para o Internet Explorer, em ingles é possivel achar muita coisa.

Eu postei um que ensina a como vizualizar imagens .PNG transparente, e em breve irei colocar mais 2: como tornar uma imagem transparente( usando o efeito alpha), e como fixar um conteudo na tela(já que o IE não reconhece o position:fixed)

Eu só gostaria de salientar que esses hacks são feitos principalmente para o IE 6 ou inferior. o IE 7 já está muito melhor e aparentemente resolveu adotar os padrões do w3c, mas como o IE7 ainda é pouco usado(19.22% do mercado segunda o w3counter) ainda é preciso usar esses hacks.

então vamos lá, 3 vivas para a M$ e ao seu otimo navegador IE6, todo mundo que faz site comigo: ipi ipi uhaa, ipi….

Visualizar imagens .PNG transparentes no IE 6

Thales RB — Sun, 18 Nov 2007 01:26:01 +0000

Um dos tantos problemas do Internet Explorer 6 é o das imagens .PNG com fundo transparente, que ele não reconhece e por isso adiciona um fundo claro a elas.
Mas existe um jeito de corrigir isso, veja como fazer esse hack:

Aviso, este código abaixo funciona apenas para visualização na tela. Quando este documento for impresso, o bug voltará.
O CSS Hack Abaixo faz o código rodar apenas no IE. Sendo que os outros browsers como, Firefox, Opera e Safari já tem a transparencia de PNG nativo.
Primeiro faca uma imagem transparente chamada blank.png pode ser com 1×1px e entao adicione o seguinte codigo em seu css:

Com esse simples comdigo o problema será resolvido.

Tem dúvidas tecnicas sobre esse tópico? obtenha a resposta facilmente em nosso fórum aqui.

Quer fazer o seu site realmente funcionar no IE?. Então veja o preço de alguns livros no Submarino.

Listagem de comandos do HTML

Thales RB — Tue, 30 Oct 2007 21:15:33 +0000

Aqui tem um lista com quase todos os comandos HTMLs existentes elas estao divididas por funcionalidade para facilitar

As TAGs Principais

tags de inicio e fim de um doc html;

Identificadores do cabeçalho ;

Meta informação (reside entre os tags ;

atualiza a pag corrente a cada X segundos;

atualiza a pag corrente a cada X segundos e vai para uma próxima página ;

comunica as palavras chaves e envia para os mecanismos de busca;

comunica a descrição para os mecanismos de busca;

Identifica o título da página ;

inicia e finaliza o corpo do documento html;

coloca um fundo em uma pagina;

coloca uma cor de fundo na página;

especifica a cor padrão de um texto ;

especifica a cor padrão de um link;

especifica a cor padrão de um link visitado;

especifica a cor padrão de um link ativo;

especifica distância da margem esquerda, direita e topo da página ;

coloca as margens esquerda e superior em 0 no Netscape 4.0 + ;

especifica a iniciação de um evento do script quando o doc html é carregado

As Tags de fontes e tipos

Estabelece um tamanho padrão de fonte de 1-7 onde size o padrão é 3;

Cabeçalho de 1-6 ( em outras palavras

texto

;

Negrita um texto;

Similar ao negrito;

Itálico;

Sublinhado;

texto tachado;

texto subscrito;

texto sobrescrito;

Texto teletipo (largura fixa);

texto menor;

texto maior;

tamanho da font onde x tamanho;

Especifica o nome da fonte, exemplo, verdana, arial etc…;

Atribui cor a uma fonte.

As Tags de Layout

desloca o bloco de texto;

insere qubra de linha que limpa;

centraliza objetos;

Divide página em seções lógicas;

Alinha os dados dentro de uma seção div;

atribui uma class a uma seção div;

Insere uma régua horizontal ao longo da página

especifica o tamanho de espessura horizontal da régua em px;

especifica o tamanho da largura da régua em px;

especifica uma régua em preto;

evita quebra de linha;

Cria parágrafos;

alinha texto do paragrafo;

As Tags de Link

Teste Faz um link de texto ou imagem com uma url;

Teste Faz um link de texto ou imagem com uma url dentro de uma nova janela do navegador totalmente nova;

Teste Faz um link de texto ou imagem com uma url dentro de um frame;

Teste Faz um link de texto ou imagem com uma url dentro do frame que o link foi acionado ou seja, nele mesmo;

Teste Faz um link de texto ou imagem com uma url dentro de um FRAMESET gerador do documento;

Teste Faz um link eliminando o frameset dentro da mesma janela do browser.

As Tags de Imagens

Apresenta uma imagem;

Alinha a imagem em relação a base do texto;

Alinha imagem em relação a página ou frame;

mostra descritivo;

especifica largura e altura;

retira as bordas da imagem;

especifica espaçamentos vertical e horizontal;

especifica o carregamento inicial de uma imagem de baixa resolução antes da imagem verdadeira seja carregada;

Nomeia a imagem para uso com JavaScript.

As Tags de Listas

Inicia / termina um título de definição;

Inicia / termina definição;

Inicia / termina termo de definição;

Inicia / termina lista ordenada;

Cria uma lista ordenada compactada;

Cria uma lista ordenada, especifica por tipo(A para letras maiúsculas ,a para minúsculas, I para numerais romanos, i para numerais romanos pequenos e1 para números padrão;

Item de lista padrão;

controla o formato de uma lista;

inicia /termina Lista não ordenada;

cria lista não ordenada compactada;

As Tags de Tabela

Tags de Frames

Define os elementos do frame;

Define as colunas dos frames em px ou %;

Define as linhas dos frames em px ou %;

define a borda 1,2,3 quando valor “0″ desligada;

define espaçamento entre frames;

especifica a url a ser carregada;

especifica nome do frame;

não permite que o frame seja redimensionado;

determina se vai ter barra de rolagem ou não

Finalmente as Tags de Formulários

Inicia term form e define parâmetros;

Especifica campos de entrada. senha, caixa de marcação, rádio, envio, limpa imagem;

Campo oculto;

define o nome de um campo no form;

Marca de seleção ativada;

tamanho do campo;

cria um menu no form ;

Identifica os dados reunidos no menu;

Cria uma caixa de entrada</p> <p><textarea wrap> especifica o retorno automático de um texto.

Eu achei esse site aqui um listagem de todos os comandos e com exemplos e definicoes de cada comando mas está em ingles
http://www.htmlcodetutorial.com/quicklist.html.

Quer aprender mais sobre HTML?. Então veja o preço de alguns livros no Submarino.

Alterar a cor da barra de rolagem do IE

Thales RB — Tue, 30 Oct 2007 21:05:14 +0000

No Internet Explorer é possivel mudar a cor da barra de rolagem. E isso só funciona no IE no firefox ou opera ele não irá funcionar. Para fazer isso é só usar o seguinte css

Table Layout Vs. Tableless

Thales RB — Fri, 26 Oct 2007 03:54:42 +0000

Porque usar tabelas para layouts é estupidez?

Esse é o título de um artigo que de forma bem humorada demonstra todos os prós de um layout Tableless e os contras de uma Table Layout.

Com linguagem simples e objetiva (e alguns quadrinhos), esse artigo:
- Mostra o que é um layout Tableless.
- Faz uma comparação entre Tableless e Table Layout.
- Apresenta os bastidores de uma Table Layout
- Possui exemplos práticos e bem humorados sobre a transição de modelos
- E também mostra onde é melhor a utilização de tabelas ao invés de Tableless

Curioso? Então acesse e perca o medo de redesenhar seus layouts.
http://www.plasmadesign.com.br/stupidtables/index.html


evita quebra de linha dentro de uma celula;	especifica o numero de colunas;	especifica o número de linhas;	especifica o tamanho da celula ;

evita quebra de linha dentro de uma celula;

especifica o numero de colunas;

especifica o número de linhas;

especifica o tamanho da celula ;