Simples Idéias.

Se você usa o Textmate ou o E Text Editor (para Windows) pode usar um snippet que criei e que é muito útil. Ao arrastar uma imagem para uma regra CSS, ele cria a regra a seguir automaticamente:

span {
    background: url(image.png) no-repeat;
    height: 60px;
    width: 60px;
}

O mais legal é que a largura e altura são preenchidas baseadas no tamanho da imagem. Para isso, usei a função getimagesize do PHP. Bacana, né?

Acesse o menu "Bundles › Bundle Editor › Show Bundle Editor" e crie um "Drag Command" para CSS. Adicione o seguinte código:

echo $TM_DROPPED_FILE | php -r '$f = fopen("php://stdin", "r"); $file = trim(fread($f, 512)); list($width, $height) = getimagesize($file); echo "background: url($file) no-repeat;\nheight: ${height}px;\nwidth: ${width}px;";'

Lembre-se de definir o escopo para scope.css. É assim que ele deve ficar:

Tenho o costume de zerar todos os espaçamentos dos elementos HTML para uniformizar entre os browsers. Na prática, tenho uma regra CSS como a seguinte:

* {
    margin: 0;
    padding: 0;
}

Isso causa um problema que afeta os campos "select" no Firefox. Os campos ficam com um tamanho reduzido, dificultando a visualização de seus valores, um problema principalmente para o date_select:

Como o problema é no Firefox, a solução é bem simples e puramente em CSS:

/* day */
select[name*="1i"] {
	min-width: 4.2em;
}
 
/* month */
select[name*="2i"] {
	min-width: 7.2em;
}
 
/* year */
select[name*="3i"] {
	min-width: 3.2em;
}

Ainda bem que foi com o Firefox! ;)

Neste post, expliquei como eu estava querendo aplicar um fundo a elemento button. Eu e o Rapha aqui do UOL descobrimos ontem uma maneira de fazer isso no elemento input.

Olha que fácil. No markup:

<input type="button" value="Um botão" />

E o CSS:

input {
    border: none;
    background: url(http://m.simplesideias.com.br/document-save-as.png) no-repeat;
    content: ""; /* opera */
    display: inline-block; /* opera */
    height: 32px;
    line-height: 0; /* ie */
    text-indent: -9999px;
    width: 32px;
}

O melhor de tudo é que funciona até no Opera, coisa que não tinha conseguido fazer antes! ;)

Veja o resultado nos navegadores IE6 Standalone, IE7, Firefox 2 e Opera 9: