Aprenda a usar CSS para criar capas iniciais extravagantes para seus parágrafos. Existe até uma técnica de substituição de imagem simples para usar uma imagem gráfica para o seu limite inicial.
Estilos Básicos de Tampas Iniciais
Existem três estilos básicos de limites iniciais em documentos:
- Levantado - o mais comum, em que a primeira letra é maior e está na mesma linha do texto atual.
- Desistiu - também bastante comum, onde a primeira letra é maior e caiu 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 design da Web.
Os limites iniciais ou capitulares são muito familiares. Eles são uma ótima maneira de vestir períodos longos e chatos de texto. E com a propriedade CSS: first-letter, você pode definir facilmente como tornar suas primeiras letras mais sofisticadas.
Criar um limite inicial simples
Tudo o que você precisa fazer para criar um limite inicial simples é aumentar a primeira letra do seu parágrafo com o pseudoelemento da primeira letra:
p: primeira letra {font-size: 3em; }
Mas muitos navegadores veem que a primeira letra é maior do que o restante do texto na linha, de modo que eles são iguais ao que faria sentido para a primeira letra, não para o resto da linha. Felizmente, isso é fácil de corrigir com o pseudoelemento de primeira linha e a propriedade line-height:
p: primeira letra {font-size: 3em; }
p: primeira linha {line-height: 1em; }
Jogue com a altura da linha dentro do seu documento até encontrar o tamanho certo para o seu texto.
Jogar com o seu boné inicial
Depois de entender como criar um boné inicial, você pode vesti-lo com roupas extravagantes para destacá-lo. Brinque com cores, cores de fundo, bordas ou o que mais lhe agradar. Um estilo bastante simples é inverter as cores da sua fonte e cor de fundo apenas para a primeira letra:
p: primeira letra {
tamanho da fonte: 300%;
cor de fundo: # 000;
cor: #fff;
}
p: primeira linha {line-height: 100%; }
Outro truque é centrar a primeira linha. Isso pode ser complicado com CSS, já que o meio da linha de texto pode ser diferente se o layout for flexível. Mas com alguns brincando com os valores, você pode recuar sua primeira linha o suficiente para fazer a primeira letra parecer estar no meio. Apenas brinque com a porcentagem no texto-recuo do parágrafo até que pareça certo:
p: primeira letra {
tamanho da fonte: 300%;
cor de fundo: # 000;
cor: #fff;
}
p: primeira linha {line-height: 100%; }
Tampas Iniciais Adjacentes São Difíceis Com CSS
Tampas iniciais adjacentes podem ser difíceis com CSS porque os diferentes navegadores exibem as fontes de maneira diferente. A idéia por trás da criação de um limite adjacente no CSS é usar a propriedade text-indent na primeira linha para empurrar para fora (à esquerda) um valor negativo. Você também precisará alterar a margem esquerda desse parágrafo em um determinado valor. Brinque com esses números até que o parágrafo pareça bom.
p {
recuo de texto: -2.5em;
margem esquerda: 3em;
}
p: primeira letra {font-size: 3em; }
p: primeira linha {line-height: 100%; }
Obtendo Bonés Reais Realmente Bonitos
A melhor maneira de criar um limite inicial sofisticado é alterar a fonte para uma família de fontes mais decorativa. Se você usar uma série de fontes seguidas por uma fonte genérica, isso ajudará a garantir que seu limite inicial seja exibido de maneira que seus clientes possam vê-lo, sem entrar em problemas de acessibilidade e usabilidade.
p: primeira letra {
tamanho da fonte: 3em;
font-family: "Script Edwardian ITC", "Script Brush MT", cursivo;
}
p: primeira linha {line-height: 100%; }
E, como de costume, você pode reunir todas essas sugestões para criar um limite inicial de estilo de anúncios para o seu parágrafo.
Usando uma capa inicial gráfica
Se, depois de tudo isso, você ainda não gostar de como os seus limites iniciais aparecem na página, você pode recorrer a gráficos para obter o efeito exato que está procurando. 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 o limite inicial e talvez não vejam 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 adicionam ao 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 pareça estranho.
- É muito difícil automatizar essa opção, já que você precisa saber exatamente qual é a primeira letra para poder usar o gráfico correto. Portanto, toda vez que o parágrafo for editado, talvez seja 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". Nós fizemos isto enorme - 300pt em tamanho. Em seguida, cortamos a imagem até o mínimo em torno da letra e anotamos a largura e a altura da imagem.
Então criamos uma classe "capL" para o nosso parágrafo. É aqui que definimos qual imagem usar, a entrelinha (altura da linha) e assim por diante.
Você precisa usar a largura e a altura da imagem para definir o recuo de texto do parágrafo e a parte superior do preenchimento. Para nossa imagem L, precisávamos de recuo de 95px e preenchimento de 72px.
p.capL {
altura da linha: 1em;
imagem de fundo: url (capL.gif);
background-repeat: sem repetição;
recuo de texto: 95px;
topo de enchimento: 72px;
}
Mas isso não é tudo. Se você deixá-lo lá, a primeira letra será duplicada no parágrafo, primeiro com o gráfico e depois no texto. Então, adicionamos um intervalo em torno desse primeiro elemento com a classe "initial" e informamos ao navegador para não exibir essa letra:
span.initial {display: nenhum; }
E o gráfico é exibido corretamente. Você pode brincar com o recuo de texto no parágrafo para que o texto seja ajustado até a letra, no entanto, você deseja exibi-lo.
