-
Grupo iMasters
- FÓRUNS
- BANCO DE CURRÍCULOS
- AGENDA DE EVENTOS
- SHOPPING
- BLOGS
- VEJA TODOS
- Seções deste canal:
- .Net
- ActionScript
- ASP
- ColdFusion
- Delphi
- Java
- Javascript
- Perl
- PHP
- Ruby on Rails
- UML
- V. Basic
- XHTML
- XML
Seções relacionadas:
Efeito DropCap com CSS
Objetivo
Detalhar a obtenção do efeito DropCap com uso de CSS. Ao final da leitura deste artigo, você estará capacitado a construir o efeito DropCap nos parágrafos de seus documentos web.
O que é dropcap?
Diz-se que foi utilizado um efeito dropcap em um parágrafo ou uma frase quando o tamanho da primeira letra da fase é aumentado e/ou estilizado.
Veja os exemplos a seguir:
Exemplo 01
Nesta frase utilizei o efeito dropcap, aumentando o tamanho da letra "ene", que inicia a frase e mudando a cor, mas note que o efeito está diferente ao da frase seguinte.
Exemplo 02
Nesta frase utilizei o efeito dropcap, aumentando o tamanho da letra "ene", que inicia a frase e mudando a cor, mas note que o efeito está diferente ao da frase anterior.
No exemplo 01, a frase alinha-se na parte inferior da primeira letra e segue com a segunda linha abaixo dela, primeira letra.
No exemplo 02, a frase alinha-se na parte superior da primeira letra e segue com a segunda linha ao lado dela, primeira letra e somente na terceira ocupa a posição abaixo da primeira letra.
São efeitos dropcap diferentes, obtidos com aplicação de regras CSS diferentes.
Aplicando o estilo inline para obter o efeito do exemplo 1
Recordando: Estilo
inline é aquele aplicado diretamente no elemento HTML.
Estilo inline tem a desvantagem de dificultar a manutenção,
pois quando você tiver que alterar estilos terá que
mudar diretamente no elemento HTML, nos documentos em que foram
aplicados.
Assim, estilo inline é recomendado para
ser aplicado somente em um ou poucos documentos.
Prefira sempre aplicar estilos, via folhas
externas de estilo.
HTML tem uma tag específica e muito apropriada para se destacar de um elemento, uma parte dele. É a tag span. Usaremos esta tag para destacar a primeira letra da frase e aplicaremos estilo em span.
A seguir o HTML:
Nesta
frase utilizei o efeito dropcap, aumentando o tamanho da letra
"ene", que inicia a frase.
Nosso objetivo é aumentar o tamanho da letra
"ene". Vamos acresentar mais o seguinte:
mudar a cor para vermelho e inclinar o "ene".
Abaixo a regra CSS inline a ser aplicada na tag span:
style="font-size:200%;
font-style:italic; color:#FF0000;">Nesta
frase utilizei o efeito dropcap, aumentando o tamanho da letra
"ene", que inicia a frase, mudando sua cor para vermelho
e inclinando-a.
Este é o efeito desta regra:
Nesta frase utilizei o efeito dropcap, aumentando o tamanho da letra "ene", que inicia a frase, mudando sua cor para vermelho e inclinando-a.
A regra CSS para aplicação do estilo incorporado ou externo
Se o estilo vai ser aplicado via uma folha de estilos incorporada ou externa a sintaxe é conforme abaixo:
Nota: Criei uma classe clamada .drop para ser aplicada na tag que contém a primeira letra a estilizar. E o HTML ficaria assim:
class="drop">Nesta
frase utilizei o efeito dropcap, aumentando o tamanho da letra
"ene", que inicia a frase, mudando sua cor para vermelho
e inclinando-a.
Aplicando o estilo inline para obter o efeito do exemplo 2
O efeito dropcap do exemplo2 você obtém usando a propriedade float. Abaixo a regra CSS aplicada inline:
"font-size:3.0em;
color:#FF0000; font-style:italic; float:left;">Nesta
frase utilizei o efeito dropcap, aumentando o tamanho da letra
"ene", mudando sua cor e inclinando-a. E, aqui usei
a propriedade CSS float.
Este é o efeito desta regra:
Nesta frase utilizei o efeito dropcap, aumentando o tamanho da letra "ene", mudando sua cor e inclinando-a. E, aqui usei a propriedade CSS float.
A regra CSS para aplicação do estilo incorporado ou externo
Se o estilo vai ser aplicado via uma folha de estilos incorporada ou externa a sintaxe é conforme abaixo:
Nota: Criei uma classe clamada .dropf para ser aplicada na tag que contém a primeira letra a estilizar. E o HTML ficaria assim:
class="dropf">Nesta
frase utilizei o efeito dropcap, aumentando o tamanho da letra
"ene", mudando sua cor e inclinando-a. E, aqui usei
a propriedade CSS float.
O pseudo elemento :first-letter
As especificações CSS1 normatizam o pseudo-elemento :first-letter que é específico para estilização da primeira letra de um elemento HTML.
A sintaxe geral para este pseudo elemento é: seletor:first-letter {propriedade: valor}
Ou se você quiser criar uma classe: seletor .classe:first-letter {propriedade: valor}
Obtendo o efeito dropcap com o pseudo elemento :first-letter
Observe abaixo a sintaxe da regra CSS e o HTML correspondente para obter o efeito dropcap com uso do pseudo elemento :first-letter
.....................
Nesta frase utilizei
o efeito dropcap, aumentando o tamanho da letra "ene",
que inicia a frase, mudando sua cor para vermelho e inclinando-a.