Aprenda a usar CSS para criar maiúsculas iniciais para seus parágrafos. Existe até uma técnica simples de substituição de imagem para usar uma imagem gráfica para sua tampa inicial.
Estilos básicos de bonés iniciais
Existem três estilos básicos de limites iniciais em documentos:
- Criado – o mais comum, onde a primeira letra é maior e na mesma linha do texto atual.
- Desistiu – também bastante comum, onde a primeira letra é maior e fica abaixo da primeira linha do texto. O texto a seguir flutua em torno dele.
- Adjacente – onde a primeira letra está em uma coluna ao lado do resto do texto. Isso é mais comum na impressão do que no web design.
Tampas iniciais ou capitulares são muito familiares Eles são uma ótima maneira de vestir extensões de texto longas e enfadonhas. E com a propriedade CSS: first-letter, você pode definir facilmente como tornar suas primeiras letras mais extravagantes.
Crie um limite inicial simples
Tudo que você precisa fazer para criar uma tampa inicial em relevo simples é aumentar o tamanho da primeira letra do seu parágrafo com o pseudo-elemento da primeira letra: p: first-letter {font-size: 3em; }
Mas muitos navegadores veem que a primeira letra é maior do que o resto do texto na linha, então eles tornam o início igual ao que faria sentido para a primeira letra, não o resto da linha. Felizmente, isso é fácil de corrigir com o pseudo-elemento de primeira linha e a propriedade line-height: p: first-letter {font-size: 3em; }
p: primeira linha {altura da linha: 1em; }
Brinque com a altura da linha dentro do seu documento até encontrar o tamanho certo para o seu texto.
Brinque com seu boné inicial
Depois de entender como criar um boné inicial, você pode vesti-lo com roupas elegantes para fazê-lo se destacar. Brinque com cores, cores de fundo, bordas ou o que mais lhe agradar. Um estilo bastante simples é inverter as cores da fonte e da cor de fundo apenas para a primeira letra: p: primeira letra {
tamanho da fonte: 300%;
cor de fundo: # 000;
cor: #fff;
}
p: primeira linha {altura da linha: 100%; }
Outro truque é centralizar a primeira linha. Isso pode ser complicado com CSS, pois o meio da linha de texto pode ser diferente se o seu layout for flexível. Mas, brincando com os valores, você pode recuar a primeira linha o suficiente para fazer a primeira letra parecer estar no meio. Apenas brinque com a porcentagem no recuo do texto do parágrafo até que pareça certo: p: primeira letra {
tamanho da fonte: 300%;
cor de fundo: # 000;
cor: #fff;
}
p: primeira linha {altura da linha: 100%; }
p {indentação do texto: 45%; }
Caps iniciais adjacentes são difíceis com CSS
Os limites iniciais adjacentes podem ser difíceis com CSS porque os diferentes navegadores exibem as fontes de maneira diferente. A ideia por trás da criação de um limite adjacente em CSS é usar a propriedade text-indent na primeira linha para empurrá-lo (para a esquerda) em um valor negativo. Você também precisará alterar a margem esquerda desse parágrafo em alguma quantidade. Brinque com esses números até que o parágrafo pareça bom. p {
recuo do texto: -2,5em;
margem esquerda: 3em;
}
p: primeira letra {tamanho da fonte: 3em; }
p: primeira linha {altura da linha: 100%; }
Obtendo bonés iniciais realmente extravagantes
A melhor maneira de criar uma tampa inicial sofisticada é alterar a fonte para uma família de fontes mais decorativa. Se você usar uma série de fontes seguidas de uma fonte genérica, ajudará a garantir que sua tampa inicial seja exibida bem para que seus clientes possam vê-la, sem entrar em problemas de acessibilidade e usabilidade. p: primeira letra {
tamanho da fonte: 3em;
família de fontes: “Edwardian Script ITC”, “Brush Script MT”, cursiva;
}
p: primeira linha {altura da linha: 100%; }
E, como de costume, você pode colocar todas essas sugestões juntas para criar um limite inicial de estilo de anúncio para seu parágrafo.
Usando um Limite Inicial Gráfico
Se, depois de tudo isso, você ainda não gosta da aparência dos seus limites iniciais na página, pode recorrer aos gráficos para obter o efeito exato que procura. Mas antes de decidir ir direto para os gráficos, você deve estar ciente das desvantagens desse método:
- Os clientes sem imagens não verão a tampa inicial e podem não ver o texto oculto que a imagem está substituindo. Isso pode tornar o parágrafo inacessível ou, na melhor das hipóteses, difícil de ler.
- As imagens sempre aumentam o tempo de download de uma página. Se você tiver muitos limites iniciais, poderá aumentar significativamente o tempo de download de algo que muitas pessoas considerariam insignificante.
- Alguns navegadores exibirão a primeira letra oculta e a imagem, o que pode fazer com que o texto do parágrafo pareça estranho.
- É muito difícil automatizar esta opção, pois você tem que saber exatamente qual é a primeira letra para poder usar o gráfico correto. Portanto, toda vez que o parágrafo for editado, pode ser necessário criar um novo gráfico.
Primeiro, você precisa criar o gráfico da primeira letra. Usamos o Photoshop para criar a letra L com a fonte “Edwardian Script ITC”. Fizemos isso enorme – 300pt de tamanho. Em seguida, cortamos a imagem até o mínimo em torno da letra e observamos a largura e a altura da imagem. Em seguida, criamos uma classe “capL” para nosso parágrafo. É aqui que definimos qual imagem usar, a principal (altura da linha) e assim por diante. Você precisa usar a largura e altura da imagem para definir o recuo do texto e o preenchimento do parágrafo. Para nossa imagem L, precisamos de recuo de 95px e preenchimento de 72px. p.capL {
altura da linha: 1em;
imagem de fundo: url (capL.gif);
repetição de fundo: sem repetição;
recuo de texto: 95px;
acolchoamento superior: 72px;
}
Mas isso não é tudo. Se você deixar assim, a primeira letra será duplicada no parágrafo, primeiro com o gráfico, depois no texto. Portanto, adicionamos um intervalo ao redor do primeiro elemento com a classe “inicial” e informamos ao navegador para não exibir essa letra: span.initial {display: none; }
O gráfico então é exibido corretamente. Você pode brincar com o recuo do texto no parágrafo para que o texto fique bem próximo à letra, da maneira que quiser que ele seja exibido.
Formato mla apa chicago Sua Citação
Kyrnin, Jennifer. “CSS Initial Caps.” ThoughtCo, maio. 14 de 2021, thinkingco.com/css-initial-caps-3466212.
Kyrnin, Jennifer. (2021, 14 de maio). CSS Initial Caps. Obtido em https://www.thoughtco.com/css-initial-caps-3466212
Kyrnin, Jennifer. “CSS Initial Caps.” ThoughtCo. https://www.thoughtco.com/css-initial-caps-3466212 (acessado em 7 de junho de 2021).
