Desenvolvimento - CSS
Como aplicar o efeito DropCap
Veja neste artigo como aplicar o efeito de DropCap utilizando a pseudo-classe :first-letter.
por Ricardo ArrigoniOlá pessoal, nesse artigo vou mostrar como fazer o efeito DropCap usando somente css para isso. Antes de começarmos a ver um monte de código, vamos primeiro descobrir, o que afinal é esse DropCap ?
Você já deve estar bastante acostumado a ver em revistas e jornais quando a primeira letra do parágrafo é maior do que todas as outras não é mesmo? Então, esse é o efeito o qual estamos falando.
Figura 1: Exemplo de DropCap
Como fazer?
Existem alguns meios de se aplicar esse efeito, um deles é utilizando uma tag span somente na primeira letra e estilizar essa tag via css. Mas para esse tutorial, vou utilizar a pseudo-classe :first-letter, essa classe é usada para fazer exatamente o que queremos, estilizar a primeira letra do parágrafo.
Chega de bla bla bla e vamos ao código? Primeiro vamos preparar o nosso HTML do exemplo.
Listagem 1: índex.html
<html> <head> <title>Tutorial de efeito dropcap</title> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <p class="eXe">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio quam, vulputate eu vehicula non, cursus nec dui. In hac habitasse platea dictumst. Nulla quis lorem quis felis tempus facilisis sed in elit. Donec a quam sem. Nunc enim mi, lacinia non tincidunt a, pellentesque sit amet enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vulputate pulvinar condimentum. Donec consectetur posuere turpis, eu sagittis ipsum blandit quis.</p> </body> </html>
Como podemos ver, coloquei um texto dentro de uma tag <p /> e inserimos uma classe chamada “eXe”, essa é a classe que vamos estilizar por css usando a pseudoclasse :first-letter.
Agora vamos criar o arquivo inserir o código css do exemplo.
Listagem 2: Arquivo estilo.css
p.eXe:first-letter {
font-size:16px;
font-weight: bold;
color: #f00;
}
No código acima mostramos como estilizar a primeira letra na primeira linha, como mostra a figura 2.
Figura 2: Primeira letra estilizada.
Como podemos ver, só a primeira letra na primeira linha está mexida, e se a gente quisesse fazer com que a primeira letra ocupasse mais linhas e não só a primeira? É bem simples, basta utilizar o float:left; que ele faz isso :)
Listagem 3: Primeira letra ocupando mais linhas
p.eXe:first-letter {
font-size:60px;
float: left;
font-weight: bold;
color: #f00;
}
Como resultado vemos:
Figura 3: Primeira letra ocupando mais linhas.
Como falei no início do artigo, a intenção inicial era mostrar a pseudo-classe :first-letter, além dessa solução mostrada do artigo, é possível fazer o mesmo por meio de <span >.
Espero que tenham gostado e até o próximo artigo.
Ricardo Arrigoni - Desenvolvedor Front-end
Ricardo Arrigoni - Especialista em SEO com mais de 7 anos de experiência. Para consultorias em SEO visite meu site: www.ricardoarrigoni.com.
