Como estilo de texto com CSS 3
Quando você cria CSS 3 para um site de iPhone ou iPad, você não apenas desfrutar dos benefícios de fontes personalizadas e sombras, mas também ganhar o desafio de dimensionamento de texto em telas com dimensões diferentes. Não se preocupe mais: descobrir a melhor forma de gerir o dimensionamento de texto e, em seguida, descobrir as alegrias de texto estilo usando CSS 3.
Ajustar o tamanho do texto
Para ajudar a torná-lo mais fácil de ler texto no iPhone, estabelecendo o padrão para o text-size-adjust regra é auto: O texto é dimensionada automaticamente para a tela.
No iPad, o padrão é Nenhum porque a tela maior não requer texto a ser redimensionada automaticamente. Em muitos sites, esse ajuste torna a página mais fácil de ler, mas se você projetou cuidadosamente suas páginas e alvejado seus estilos especificamente para o iPhone ou iPad, você pode querer evitar o redimensionamento automático.
Aqui estão três exemplos de como você pode usar esta opção:
-webkit-text-size-adjust: auto - webkit-text-size-adjust: none; -webkit-text-size-adjust: 80% -
Aqui está o exemplo de código com a adição do webkit-text-size-adjust conjunto de regras Nenhum- incluindo este trecho de código no estilo para todas estas tags ao mesmo tempo faz com que nenhum texto nas tags redimensionar automaticamente:
/ * Este estilo ajuda a navegadores mais antigos entendem HTML5 e redefine tags comuns a 0 * / artigo, de lado, rodapé, cabeçalho, menu, nav, seção, detalhes, corpo, H1, H2, H3, p, ul, li, {border: 0-margin: 0-padding: 0-display: block - / * pára WebKit texto redimensionamento * / - webkit-text-size-adjust: none;}Adicionar sombras de texto
Usando CSS 3, você pode adicionar sombras em texto e em qualquer elemento de nível de bloco, como uma tag.
Uma maneira útil para aumentar o contraste entre o texto eo fundo é para adicionar uma sombra de texto. Sombras de texto não só fazer seus desenhos de páginas mais interessante, mas também tornar o texto muito mais legível, especialmente se o seu projeto tem um fundo complexo ou as cores do primeiro plano e não tem muito contraste.
Aqui está a sintaxe para as sombras do texto para navegadores WebKit:
text-shadow: Horizontal Vertical cor- borrão raio
Veja como preencher esses espaços reservados afeta a sombra do texto:
horizontal e vertical - Os dois primeiros valores, que especificam os deslocamentos horizontais e verticais, são necessários. Eles especificar a distância a sombra se estende abaixo e à direita do texto.
raio de desfoque - O terceiro cenário, que especifica a quantidade de desfoque na sombra, é opcional. Se você não incluir um raio de desfoque, o padrão é 0, o que faz com que a cor especificada aparecer como uma cor sólida.
cor - Especifique uma cor utilizando o seu código hexadecimal de cor (os tradicionais códigos de cores de 6 caracteres) ou seu código de cor RGBa, que permite que você especifique entre vermelho, verde e azul, assim como a opacidade. (Mais sobre RGBa em um momento.)
A seguinte linha de código adiciona uma sombra de texto para a tag. Os números especificar que a sombra de texto estende-se dois pixels para a direita e abaixo do texto com um borrão 3-pixel. Este exemplo usa uma cor cinza especificado com o código de cor hexadecimal # 999.
h1 {text-shadow: 2px 2px 3px # 999-}Se você especificar a cor como uma cor RGBa, você pode definir uma cor parcialmente transparente. cores RGBA são definidas por uma série de números que especificam a quantidade de vermelho, azul ou verde que você deseja. O intervalo de números é de 0 a 255.
O quarto número define a quantidade de opacidade ou transparência. (O intervalo é de 1 para a completa opacidade para 0 para transparência total.) Por exemplo, a .6 no exemplo a seguir indica um nível de opacidade de 60 percentagem de 40 por cento da cor subjacente brilha.
O estilo definido para a marca anterior se aplica a qualquer texto formatado com o 1 Tag do título. O estilo abaixo é um estilo de classe (indicado pelo ponto antes do nome). estilos de classe são mais versátil e pode ser aplicado a qualquer texto em uma página.
.sombra {text-shadow: .2em .2em .3em rgba (153.153.153, 0,6) -}Em CSS, tamanhos podem ser especificados em muitas medidas diferentes, incluindo pixels, porcentagens e a opção em usado no exemplo anterior.