@font-face{
	font-family:"28 Days Later";
	src:url("28_days_later.ttf");
}

Na linha 2 declaramos o nome da fonte e na linha 3 declaramos a url, ou seja onde hospedamos a fonte.

Agora basta utilizar a nova fonte normalmente.

h1{
	font-family:"28 Days Later",Verdana, Arial;
}

Temos um pequeno problema! Internet Explore(por essa você não esperava) ele só aceita font OET então é preciso converter a fonte para esse formato. Isso pode ser feito pelo site TTF to EOT Font Converter. Mas confesso que com a fonte que utilizei ficou um pouco bugado.

<style type="text/css">
	h1{
		font-family:"28 Days Later";
	}
	@font-face{
		font-family:"28 Days Later";
		src: url("28_days_later.ttf"); /*somente para o IE*/
	}
</style>
<!--[if IE]>
<style type="text/css">
	@font-face {
		font-family: "28 Days Later";
		src: url("28_days_later.eot");
	}
</style>
<![endif]-->

Veja um exemplo pronto.

Bom era isso, T++ .

Como ainda não existe compatibilidade é recomendada a utilização da prorpiedade somente para fins estéticos onde não irá afetar a usabilidade do site, então atenção ao utilizá-la.

A declaração oficial para bordas arrendondadas é radius-border, mas existem declarações derivadas que veremos mais adiante.

border-radius:10px;

Como as propriedades margin e padding podemos definir valores diferentes para cada canto:

border-radius: 10px 20px;
border-radius: 10px 20px 30px 40px;

Ou também definir cada canto separadamente:

border-radius-topleft:10px;
border-radius-topright:10px;
border-radius-bottomright:10px;
border-radius-bottomleft:10px;

Também temos as declarações derivadas asseguir;

-o-border-radius: 9px; /* Opera */
-icab-border-radius: 9px; /* iCab */
-khtml-border-radius: 9px; /* Konqueror */
-moz-border-radius: 9px; /* Firefox */
-webkit-border-radius: 9px; /* Safari */

Com o tempo os browsers irão utilizar a declaração oficial do W3C e não será mais necessário a utilização das declarações derivadas.

Bom era isso até mais e obrigado pelos peixes!

Hoje gostaria de apresentar a propriedade text-shadow que é simplesmente a sombra do texto, e já esta disponível para a maior parte dos navegadores.

seletor{
	text-shadow: medida1 medida2 medida3 cor;
}

Onde:

Medida 1: é o deslocamento a direita(com valores negativos a sobra irá para esquerda).

Medida 2: é o deslocamento para baixo(com valores negativos a sombra irá para cima).

Medida 3: é o raio para o efeito de blur na sombra.

Cor: é a cor da sombra.

Para ficar mais claro veja o exemplo das propriedade text-shadow.

Se você não está utilizando um navegador com suporte a propriedade veja abaixo como deve ser mostrado.

Um recurso que também é interesssante é a possibilidade de colocar várias sombras em um texto apenas adicionando mais valores separados por virgula.

seletor{
	text-shadow: 10px -10px #CCC, 20px -20px #F00, 30px -30px #00F;
}

Deve ser visualizada assim:

[Baseado no artigo do Maujor]

Bom, ai que entra o zen-coding que não se trata de uma nova IDE, mas sim de um plugin, ou melhor, uma coleção de scripts, disponível para uma grande quantidade de IDEs. Ele utiliza um padrão lógico para construir sentenças que, com o pressionar de uma tecla de atalho, transforma-se em trechos enormes de código, prontos e indentados.

Um exemplo seria a criação de uma lista somente em uma linha, com o Zen-Coding ficaria assim:

div#menu>div.BotecoDigital+ul#opcoes>li*5>a

E ele gera o seguinte código:

<div id="menu">
        <div class="BotecoDigital"></div>
        <ul id="opcoes">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

Vejam um vídeo disponibilizado pelos desenvolvedores demonstrando o Zen-Coding:

No site oficial, estão disponíveis vários plugins para os principais editores HTML do mercado, cada um com instruções de instalação anexas. Aqui, testei com o Notepad++, e correu tudo bem.

Se você trabalha com HTML, o Zen-Coding merece uma chance. Pode demorar um pouquinho para aprender a sintaxe e pegar o jeito, mas com algum tempo de prática, o ganho em tempo é enorme.

Para quem quiser em uma melhor resolução pode baixar aqui. E para quem quiser os arquivos do layout esta aqui

Espero que perdoem o pequeno deslize no seletor body que coloquei como background(que burro dá zero pra ele!!).

[UPDATE]
Links para baixar o video e os fontes.
[/UPDATE]

Para aqueles que não conseguirem ver pelo youtube ou acharem a resolução muito baixa podem fazer o download do Vídeo-Tutorial.

Um sprite é um objeto gráfico, normalmente uma imagem, que se move numa tela sem deixar rastros, foi muito utilizado nos jogos 2D há um tempo atrás, o pessoal deve estar lembrando do mugen não?

Bom então como isso funciona na web? Todos sabemos que quanto maior o numero de imagens que utilizamos em um site, maior é o número de requisições que um browser deve fazer para exibi-la, certo? Então quando precisamos fazer uma animação, por javascript ou mesmo um simples :hover, em um site que precise de várias imagens, seria interessante que quando a animação começasse já estivessem todas as imagens carregadas, ou poderia pular alguns quadros alterando o efeito desejado. Isso pode ser feito carregando todas as imagens necessárias dentro de um único arquivo de imagem e quando necessário, mudar a posição da imagem para mostrar somente a parte necessária para o usuário.

Como diria um antigo colega “show me the code“!

<ul>
	<li><a class="botao" href="#">Botão 1</a></li>
	<li><a class="botao" href="#">Botão 2</a></li>
	<li><a class="botao" href="#">Botão 3</a></li>
	<li><a class="botao" href="#">Botão 4</a></li>
</ul>

Nosso HTML é bem simples, apenas uma lista de links que pertencem a class .botao para ficar mais fácil definir as regras.

Primeiro vamos ver como deve ficar nossa imagem. Se quisermos um botão de 40px de altura com uma troca a imagem deve ter 80px de altura e obviamente deve conter dois botões.

Código CSS

*{
    list-style:none;
    font-weight:bold;
    font-size:14px;
    text-decoration:none;
    color:#415FAF;
}

.botao{
    background:url(botao.jpg) no-repeat;
    width:200px;
    height:20px;
    display:block;
    text-align:center;
    padding:10px 0;
}
.botao:hover{
    background-position: 0 -40px;
}

Como este é apenas um exemplo, comecei utilizando uma regra para definir as propriedades que me interessavam de um modo bem geral.

Como podem ver das linhas 1 à 7, tiramos os marcadores da lista(linha 2), colocamos o texto em negrito(linha 3), definimos a fonte(linha 4), retiramos o sublinhado padrão do link(linha 5) e definimos a cor do texto(linha 6).

A partir da linha 9 é que nos interessa, definimos a imagem como background na linha 10, e o tamanho do botão nas linhas 11 e 12, como nosso botão é um link, que por padrão tem a propriedade display como inline, deve ser alterado para block para respeitar as as medidas que definimos. Nas linhas 14 e 15 utilizamos para centralizar o texto do botão.

Para fazer nossa mágica utilizaremos o a pseudo-classe :hover, como podemos ver na linha 18, para que quando passarmos o mouse pelo link mudamos o posicionamento do background, para isso utilizamos a propriedade background-postion que move o background no eixo x e y respectivamente.

Segue o link para baixar o exemplo, que também mostra como usar várias imagens ao mesmo tempo.