Drop caps, estilizando a primeira letra do texto com CSS
.jpg)
Já viu aqueles textos onde a primeira letra (letra capitular) é estilizada e maior que resto do texto? Essas são as "Drop caps", muito utilizadas em revistas, vamos fazer isso usando CSS !
Ta aí o nosso parágrafo em HTML onde será aplicado o CSS.
<p class="estilizado">
Esse aqui é um parágrafo estilizado com a pseudo-classe
first-letter, que deixa a primeira letra do texto estilizada.
Esse aqui é um parágrafo estilizado com a pseudo-classe
first-letter, que deixa a primeira letra do texto estilizada.
</p>
Vamos usar a pseudo-classe first-letter para fazer esse efeito na primeira letra do parágrafo.
p.estilizado:first-letter{
font-size: 100px;
float: left;
color: #000099;
}
Resultado:
Fonte: #CSS {O}rbit
Be the first to comment
All comments are read and moderated before published.
For every comment
- ALL CAPS or grammatical errors will not be tolerated;
- Do not promote other blogs or websites;
- Do not add unnecessary links in the content of your comment;
- If you want to leave your URL, use the OpenID;
- Promote your e-mail only if really needed;
- Threats, insults or attacks are not allowed;
- Your comment must be related to the subject of the article;
Questions?
- Read all the answers;
- Ask if you can not find the answer;
Comments should contain only the following topics:
- Questions;
- Suggestions;
- Thanks;
- Tips related;
Every comment is a personal opinion of the reader. The authors are not responsible for the content of any comments made by the commenter(s). The authors are also not responsible for knowing whether the content of Your comment is breaking the law in other countries or jurisdictions.