Compatibilidade complexa de text-shadow e navegador cruzado

StackOverflow https://stackoverflow.com/questions/1164064

Pergunta 

<html>
<body>
    <style type='text/css'>
        body {
            font: 100% myriad, arial, sans-serif;
            font-size: 12px;
            color:white; 
            font-weight:bold;
        }
        .shadowtext {
            text-shadow:-0.1em 0 0.1em #626262, 0.1em 0 0.1em #626262, 0 -0.1em 0.1em #626262, 0 0.1em 0.1em #626262;
        }
        .shadowtext_text {
            text-shadow:0 0 0.3em #000
        }
    </style>
    <DIV class="shadowtext">0 %</DIV>   
    <DIV class="shadowtext">10 %</DIV>  
    <DIV class="shadowtext">25 %</DIV>  
    <DIV class="shadowtext">95 %</DIV>  
    <DIV class="shadowtext">0123456789</DIV> <br>
    <DIV class="shadowtext_text">0 %</DIV>  
    <DIV class="shadowtext_text">10 %</DIV> 
    <DIV class="shadowtext_text">25 %</DIV> 
    <DIV class="shadowtext_text">95 %</DIV> 
    <DIV class="shadowtext_test">0123456789</DIV>   
</body>
</html>

Estou tentando fazer com que o ShadowText_test imite a aparência da sombra de texto do ShadowText, sem a longidade complicada demais. Alguém tem alguma ideia?

Além disso ... eu quero que ele pareça o mesmo em todos os navegadores, ou pelo menos IE7, IE8 e Firefox mais velho. Alguém sabe a melhor maneira de abordar isso. Não vi uma maneira fácil de fazer vários borrões/sombras/brilhos no IE usando o filtro.

Foi útil?

Solução

Acredite em mim, seria melhor se você seguir em frente com isso plugin jQuery (Link não é mais válido.). Porque, tentamos fazê -lo da maneira CSS, e estávamos quase mortos tentando fazê -lo funcionar da mesma forma em IE6/IE7/IE8/FF2/FF3/Safari: Doh:

Editar

Como um nota, nós não éramos 100% bem -sucedido Ao fazer isso funcionar usando CSS e Html Tweaks em todos os navegadores; (então, de acordo comigo, o script é um caminho a percorrer. Você pode experimentar a biblioteca jQuery que mencionei ou pode usar o mencionado por Alexander & Jason.

Outras dicas

Primeira pergunta:

Você está realmente à mercê do navegador para determinar como a sombra é renderizada e, como o navegador está concentrando a maior parte da cor bem nos números, não há muito que você possa fazer facilmente para escurecê -lo. Sua abordagem inicial é provavelmente a mais direta. Se alguma coisa, eu seria um pouco mais detalhado para garantir que o brilho do texto fosse distribuído uniformemente:

text-shadow: #777 0 0 0.1em, #777 0 1px 0.1em, #777 1px 1px 0.1em, #777 0 1px 0.1em, #777 -1px 1px 0.1em, #777 -1px 0 0.1em, #777 -1px -1px 0.1em, #777 0 -1px 0.1em, #777 1px -1px 0.1em;

Segundo:

A propriedade CSS2-Shadow-Shadow não é suportada em vários navegadores, incluindo IE ou Firefox (antes de 3,5). Existem hacks para fazer com que funcione nesses navegadores, mas eles nem sempre são bonitos.

Você pode usar uma propriedade do filtro IE para adicionar suporte ao IE; Aqui está um tutorial decente: http://kilianvalkhof.com/2008/design/alem-cross-browser-text-hadow/

O suporte para versões mais antigas do Firefox é muito mais complicado, pois qualquer solução alternativa que você criou precisaria estar escondida do Safari. Se isso for um problema, eu poderia sugerir algo.

Aqui está uma lista de suporte ao navegador para as propoertarias CSS, se isso o ajudaria a tomar sua decisão: http://www.quirksmode.org/css/contents.html

A solução jQuery que Alexander Corotchi vincula para implementar as soluções CSS disponíveis sem recorrer a hacks.

Editar:

Eu tenho pensado mais sobre isso; Aqui estão pensamentos adicionais:

O verdadeiro problema é que você está tentando usar a propriedade de Shadow Text para recriar o efeito da propriedade de linha de texto CSS3-Spec (que ainda não foi implementada por nenhum dos navegadores). Qualquer solução que você encontrar provavelmente será menos do que o ideal, a menos que você possa aguardar a propriedade de linha de texto.

Pode ser possível, no entanto, criar um PNG de canal alfa e, em seguida, usar uma marcação adicional (ou javascript) para torná-lo o plano de fundo para cada caractere. Você teria que controlar cuidadosamente as dimensões do seu texto, mas essa pode ser uma possível solução de navegador cruzado (exceto o IE6, o que não suporta muito bem a transparência da Alpha).

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top