Código HTML

A tag BUTTON tem uma maior capacidade de personalização que usando input type=submit.
Esta tag foi introduzido com a versão 4.01 do HTML e permite, por exemplo, que sejam adicionadas imagens dentro dele.

Fica aqui algumas referencias úteis:

• http://particletree.com/features/rediscovering-the-button-element/
• http://www.htmlhelp.com/reference/html40/forms/button.html
• http://www.w3schools.com/tags/tag_button.asp

Sem dúvida que a grande vantagem da TAG BUTTON é a sua capacidade de ter conteúdo e é essa capacidade que vou explorar.

<button><span><em>Texto Botão</em></span></button>

O objectivo com este código é criar um botão que permita ter um comprimento variável adaptando-se ao seu conteúdo de forma a que não seja necessário editar o CSS cada vez que quero criar um novo botão.

Após o código HTML é necessário criar uma imagem suficientemente larga para que independente da largura do botão ela se adapte sem quebras. De preferência crio sempre uma imagem com a largura do contentor onde o texto se encontra. Por exemplo se o texto tiver dentro de um DIV com 550 pixels de largura crio uma imagem com 550 pixels. Desta forma sei que por mais longo que o texto seja não irá quebrar.

Imagem usada no tutorial:

CSS

Em seguida vamos aplicar a imagem. A TAG BUTTON irá funcionar como contentor, o elemento SPAN e EM ficam com um estilo geral:

button {
border:none;
background:none;
padding:0;
margin:0;
width:auto;
text-align:center;
height:40px;
}


button span, button em{
display:block;
margin:0;
height:40px;
font:9pt Helvetica, Verdana, Arial, sans-serif;
color:#000000;
}

Em seguida aplicamos a imagem como background do SPAN, a imagem ficará da esquerda para a direita mostrando o canto esquerdo e o fundo do centro do botão:

button span{
padding-left:20px; /* mostrar canto esquerdo arredondado */
background:url(btn_bg.png) no-repeat 0 0;
}


Agora o elemento EM a onde se encontra o texto:

button em{
padding-right:20px;
background:url(btn_bg.png) no-repeat 100% 0; /* os 100% serve para adaptar a largura do botão */
line-height:38px;
}

Este código foi testado em Firefox 2, Internet Explorer 7 e 8 em Windows XP. Agradeço se alguém testar nos outros browsers e sistemas operativos.

Referência: http://www.alistapart.com/articles/slidingdoors/

O Acid3 testa primariamente especificações para aplicações dinâmicas, assim como alguns gráficos e web fonts.
Infelizmente todos os browsers actuais falham o teste incluindo o Internet Explorer 8 embora ainda em fase beta. Curiosamente os melhores resultados parecem vir dos browsers usados no sistema operativo Ubuntu.

Referências & leituras interessantes:
BrowserShots.org Acid3 Test
http://en.wikipedia.org/wiki/Acid3
http://ejohn.org/blog/acid3-tackles-ecmascript/
http://www.drunkenfist.com/temp/acid3.html
Win XP IE 8 Acid 3 Test Screenshot

Performance is everything

Breve descrição

A secção extensível é composta por 2 partes:

1. O cabeçalho
2. O conteúdo

O cabeçalho

O cabeçalho é composto por um <span> e por uma de cabeçalho (h2) que ambos serão estilizados com CSS.
Ao clicar no cabeçalho irá mostrar ou ocultar o conteúdo.

O conteúdo

O conteúdo terá um texto de exemplo e um link que permitirá ocultar todo o conteúdo.

Primeiro Passo, o código HTML:

O link chama uma função em javascript chamada cabracega que mostra ou oculta o conteúdo do div com a ID de noticias. Este código pode ser usado para mais de uma secção extensível. Para tal basta atribuir nomes diferentes as secções. (noticias1, noticias2, noticias3…)
Caso contrário poderá causar algum conflito.

Segundo Passo: Código CSS

Terceiro Passo: Código Javascript

O JavaScript vai buscar a ID da secção através de um link:

Resultado final