Com todas as novas coisas de borda CSS3 acontecendo (-webkit
, ...) é agora possível adicionar uma borda à sua fonte? (Como a borda branca sólida ao redor do logotipo azul do Twitter). Se não, há algum hack não muito forte que irá fazer isso em CSS/XHTML ou eu ainda preciso ligar o Photoshop?
Você poderia talvez emular um texto-stroke, utilizando o css text-shadow
(ou -webkit-text-shadow
/-moz-text-shadow
) e um borrão muito baixo:
#element
{
text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
-moz-text-shadow: 0 0 2px #000;
-webkit-text-shadow: 0 0 2px #000;
}
Mas embora isso esteja mais disponível que a propriedade `-webkit-text-stroke', eu duvido que ela's esteja disponível para a maioria de seus usuários, mas isso pode não ser um problema (degradação graciosa, e tudo mais).
Uma vez tentei fazer aqueles cantos redondos e deixar cair as sombras com o css3. Mais tarde, descobri que ainda é pouco suportado (Internet Explorer(s), é claro!)
Eu acabei tentando fazer isso em JS (HTML canvas com IE Canvas), mas isso impacta muito o desempenho (mesmo na minha máquina C2D). Em resumo, se você realmente precisa do efeito, considere as bibliotecas JS (a maioria delas deve ser capaz de rodar no IE6) mas don't over do fazê-lo devido a problemas de desempenho; se você ainda precisa de uma alternativa... você poderia usar o SFiR, então o PS e o SFiR. O CSS3 está't pronto hoje.