A transformação de um layout (desenho) em código é uma das mais importantes fases de desenvolvimento de um website. É um passo que determina como o site será visualizado pelo usuário. Para esta fase do desenvolvimento utilizamos uma “linguagem” chamada CSS (Cascading Style Sheets ou Folha de Estilo em Cascata).

No entanto os diversos navegadores disponíveis no mercado (Internet Explores, Firefox, Opera, Safari…) interpretam ou não todos os códigos disponíveis no CSS, atualmente na versão 2.1. A maior dor de cabeça dos profissionais de webdesign é o Internet Explorer, que chega a ocupar aproximadamente 80% do mercado, e é entre os principais navegadores o que menos interpreta propriedades do CSS.

Para ajudar a entender, e saber o que funciona ou não no IE, a Microsoft disponibilizou uma tabela com estas informações para as diversas versões de seu navegador. Incluindo ainda a previsão para o CSS 3.0 e o IE 8.0 ambos não lançados oficialmente.

Link: http://msdn.microsoft.com/en-us/library/cc351024.aspx

Certamente quem desenvolve HTML/XHTML ou tem trabalhado com CSS usa com muita frequencia as cores representadas por hexadecimais.

Algus certamente já se perguntaram como é formado esse código, pois bem segue a explicação.

É de conhecimento da maioria o sistema de cores RGB, que é a abreviação do sistema de cores aditivos R - Red (vermelho), G - Green (verde) e B - Blue (azul).

(more…)

Rogério Lino, Estudante do curso de Ciência da Computação, curioso na área da Web e seu desenvolvimento. Escreve um blog sobre internet e afins.

Encontrei vários artigos interessantes.

• Javascript: Image Preloader
• CSS: Loading Image
• Javascript: Tooltip
• Flash e CSS: Banner Flutuante
• Flash: SWF com Fundo transparente
• Flash: Tag Object
• Javascript: Draggable Window
• CSS: Position Fixed IE
• CSS: Centralizar Horizontal e Vertical
• Javascript: setTimeout() e setInterval()
• Pullquote
• Tutorial Caixa de Contrato
• Escrevendo o Primeiro XHTML
• XHTML - O que é?
• Entre outros

Mais andança pela net! Esta dica vem em boa hora, eu já estava fazendo gambiarra para corrigir o problema que descrevo abaixo.

Quando dentro de um DIV temos algum (ou alguns) elemento utilizando a propriedade FLOAT, acontece algo muito ruim (principalmente para sites dinâmicos que o usuário atualiza o conteúdo), o DIV não assume o tamanho do conteúdo que possui a propriedade Float, como acontece no exemplo.

O site Pinceladas da Web da a dica e repasso aqui.

#box {
min-height:128px;
height:auto !important;
height:128px;
padding:5px;
}
#box img {
float:left;
}

A propriedade min-height estabelece uma altura mínima para o elemento, esta propriedade não funciona no Internet Explorer, sendo que ele interpreta o atributo height como min-height, por isso estabeleci height:128px;. Agora paras os browsers que interpretam corretamente a propriedade height e min-height, não tenham uma altura fixa, por isso foi utilizado height: auto !important, estabelhecendo-lhe uma altura automática, dando-lhe uma maior prioridade a esta declaração fazendo o uso de !important, que não é interpretada pelo Internet Explorer.

Aqui o exemplo funcionando corretamente.

Ps: para os curiosos que querem saber qual gambiarra eu estava usando neste caso, fiquem esperando sentados ou vasculhem os códigos de sites já no ar, porque eu não vou falar. Tenho vergonha.

Pullquote é um efeito utilizado em jornais (revistas) para destacar uma certa parte do texto. Um exemplo aqui.

Esses efeitos podem ser criados na sua página usando CSS, há quem use também Javascript. Nesse exemplo usaremos apenas CSS.

Crie um novo arquivo HTML. O texto que receberá um destaque ficará assim, dentro da tag blockquote:

<blockquote class="pull">Texto aqui dentro</blockquote>

No CSS definimos o tamanho (largura) da caixa, uma borda em cima e em baixo, texto alinhado ao centro. E pronto.

blockquote.pull {
width: 170px;
border-top: 3px solid #CC0099;
border-bottom: 3px solid #CC0099;
text-align: center;
float: right;
margin: 0px 20px;
padding: 15px;
}

Aí como podemos ver a caixa irá flutuar para a direita, podendo ser alterado como prefirir (left/right).

O exemplo final desse tutorial você confere aqui: pullquote.

Veja mais sobre:

Pullquote apenas com CSS:

http://www.sitepoint.com/test/pullquote.htm (inglês)
http://www.brpoint.net/arquivo/css/pull-quotes.html (português)

Pullquote com Javascript:

http://www.fiftyfoureleven.com/sandbox/weblog/2004/jun/javascript-pullquote/ (inglês)

Há algum tempo eu fiz um script de uma tooltip (aquela caixa que abre ao passar o mouse sobre algum link). Infelizmente o código não é dos menores, o que deixaria muito grande o post e sua explicação.

Mas não está difícil de entender. Qualquer dúvida é só deixar um comentário que eu comento logo abaixo explicando.

O seu funcionamento é bem simples. No HTML é adicionado uma div com position absolute com display igual a none. Com o document.onmousemove a posição do mouse é guardada em uma variável então ao passar o mouse sobre qualquer link o display da div (tooltip) muda para block e sua posição (x,y) é setada pela do mouse.

Para ver o exemplo clique aqui.

obs: o código (javascript) está junto com o HTML e o CSS.

Fonte: Rogério Lino

Rogério Lino escreveu uma função muito legal para gerar gráficos com javascript/css.

Você cria um novo objeto Gráfico (sem acento mesmo - new Grafico(n); ) passando o número de barras como parâmetro e então a partir dele com set’s e get’s você gera o seu gráfico.

Clique aqui para vê-lo funcionando.
Clique aui para baixar oarquivo js

O código que gerou o gráfico da imagem acima é o seguinte:

var grafico = new Grafico(11);
grafico.setSize("200px");
grafico.setTitle("Grafico de Barras");
grafico.setSource("Fonte: Fictícia");
grafico.setBarraSize(0, "80%");
grafico.setBarraLabel(0, "manga");
grafico.setBarraSize(1, "30%");
grafico.setBarraLabel(1, "banana");
grafico.setBarraSize(2, "50%");
grafico.setBarraLabel(2, "maracuja");
grafico.setBarraSize(3, "100%");
grafico.setBarraLabel(3, "melancia");
grafico.setBarraSize(4, "70%");
grafico.setBarraLabel(4, "maracuja");
grafico.setBarraSize(5, "76%");
grafico.setBarraLabel(5, "pera");
grafico.setBarraSize(6, "30%");
grafico.setBarraLabel(6, "uva");
grafico.setBarraSize(7, "47%");
grafico.setBarraLabel(7, "melao");
grafico.setBarraSize(8, "25%");
grafico.setBarraLabel(8, "laranja");
grafico.setBarraSize(9, "90%");
grafico.setBarraLabel(9, "abacaxi");
grafico.setBarraSize(10, "10%");
grafico.setBarraLabel(10, "kiwi");

Estive pesquisando algumas coisinhas na Net para solucionar uns detalhes em um projeto, ai me deparei com dicas que podem ser úteis:

Scrollbar no Firefox

Quando fazemos um site cuja a Home é pequena e não utiliza a barra de rolagem, o FF não cria (ou reserva, como preferirem) o espaço para a barra. Neste mesmo site se uma página interna passa a necessitar da barra de rolagem, o leiaute da um salto para o lado, o que pode incomodar o usuário (acho que incomoda mais a gente que produz o site, mais tudo bem). Para resolver isso com CSS, é necessário somente uma linha:

html {overflow: -moz-scrollbars-vertical;}

Básico, mais ajuda. Li esta dica no Revolução.etc.

Link externo

Quando estava procurando aquela imagenzinha que o pessoal(Wikipédia, Revolução, etc) usa para identificar os links que são externos ao seu site, achei um artigo que fala como implementar com CSS este recurso. No entanto o código abaixo não funciona no IEca 6, ai só fazendo com uma classe mesmo.

HTML:
a href="http://www.site_externo_ao_meu.com.br" rel="external"

CSS:

* [rel~=external] {
background:url(”external.gif”) right 2px no-repeat;
padding-right:13px;
}


Para o IEca 6, basta utilizar uma classe no link externo e utilizar as mesmas propriedades CSS citadas acima. Esta dica tirei de outro artigo do Revolução.etc.

Moldura usando border

Outra dica que passo, eu achei testando variações de bordas no CSS:

border: #000 ridge thick;

Este código cria a aparência de uma moldura com sombra, pode ser interessante para algum leiaute.

Free - Agência de Publicidade do Vale do Itajaí
www.free.art.br
Simplicidade e beleza.

Secuoyas
www.secuoyas.com
Atenção para área de localização e menus.

Plan your Yellowstone National Park
www.yellowstonepark.com
Contexto como um todo.

Skype
www.skype.com
Skype dá show.

O Css Creator trata a CSS como uma ferramenta de altíssima usabilidade.
Neste site foi criado um sistema onde você pode avaliar e testar a capacidade do código em suas páginas web, alem de fazer o layout de seu site em css.
Além disso, possui um fórum exclusivo onde trata-se única e exclusivamente da linguagem.

Abaixo os links direto.
[Site]
http://www.csscreator.com/

[CSS Layout Generator - Você cria layout CSS com HTML ou XHTML.]
http://www.csscreator.com/version2/pagelayout.php

[CSS Creator - você gera o CSS e pode ver como fica em sua página.]
http://www.csscreator.com/version1/index.php

[Propriedades e atributos do CSS alem de ver quais os Browser suportam]
http://www.csscreator.com/attributes/

Fonte: http://www.phpavancado.net/