CSSCursos WebHTMLTutoriais

Efeitos de texto CSS3

Com CSS3 Text Effects você pode adicionar vários novos efeitos em textos como text-shadow, wordwrap, @font-face, column, entre outros.

Text Shadow

Text shadow (sombra de texto) é usada para dar sombra ao texto dos elementos.

Sintaxe  

Word Wrap

Word Wrap (Quebra de linha) é usado para evitar que as palavras longas se expandam para fora da caixa e se encaixem nas palavras longas da caixa.


Sintaxe  

word-wrap:break-word;

Não existe outro valor além de break-word.

@font-face

A @font-face permite incorporar fontes com regras na folha de estilo sem que elas estejam instaladas no computador do usuário.

No CSS3 esta propriedade vem com mais força graças aos esforços para criar licenças de utilização que beneficiem não somente os desenvolvedores, mas também as empresas que criam as fontes.

Os formatos de fonte aceitos são TrueType(.ttf) e Opentype(.otf). Para utilizar a fonte, primeiro precisamos apontar o caminho do arquivo da fonte, escolher o nome que usaremos para referenciá-la e em seguida usar normalmente.

@font-face(font-family:’aller’ src: url(‘aller.ttf’);}
p(font-family:’aller’);

Você olha essas duas linhas e lembra o quanto já sofreu para poder usar uma fonte não padrão e fica com a certeza de que um mundo melhor é possível.

É facultativa a utilização do format na declaração para informar o tipo da fonte, se é ‘truetype’ ou ‘opentype’. Uma boa prática é utilizar o local na declaração para que antes de baixar a fonte do servidor, o navegador verifique se ela já não existe no computador do usuário.

@font-face{font-family:’aller’ src: local(‘Aller’), url(‘aller.ttf’) format(‘truetype’);}

Da forma como foi declarada, a fonte só pode ser usada regularmente. Para aplicar negrito e itálico é preciso incluir o arquivo da fonte bold.

@font-face{font-family:’aller’ src: local(‘Aller’), url(‘aller.ttf’) format(‘truetype’);}
@font-face{font-family: ‘aller’; font-weight:bold; src: url(‘aller-bold.ttf’);}

Um cuidado importante ao usar uma fonte incorporada pelo @font-face é listar outras alternativas caso haja algum problema no download da fonte.

@font-face(font-family:’aller’ src: url(‘aller.ttf’);}
p{font-family:'aller', Arial, sans-serif;}

column

Disponibilizar o texto em colunas sempre exigiu muito trabalho com divs. No CSS3 temos à disposição uma propriedade especial para organizar o texto em colunas. O, porém é que os navegadores implementaram ao seu modo. Então para funcionar em alguns, é preciso adicionar o prefixo do navegador.

Antes de criar o código vejamos as opções:

column-count – Número de colunas criadas ;

column-gap – Distancia entre as colunas;

column-rule – Separador entre as colunas:

column-width – Largura do separador;

column-style – Estilo do separador;

column-color – Cor do separador.

column-width – Determina a largura das colunas;

Outras propriedades para trabalhar com colunas, mas que não foram implantadas por nenhum navegador podem ser conferidas na documentação do W3C.

Wendell Rodrigues

Administrador e editor do site TecForest , estudante de sistemas de informação pela Estácio de Sá, apaixonado por tecnologia e inovação.

Artigos relacionados

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Verifique também
Fechar
Botão Voltar ao topo