A propriedade initial-letter do CSS facilitará muito tudo.
Suporte ao navegador
Onde você pode experimentar o initial-letter? Ele está disponível no Safari e no Chrome 110. No Safari, a propriedade precisa do prefixo -webkit-. Há um problema aberto para que ele seja implementado no Firefox.
Teste a compatibilidade com initial-letter com:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
Soluções atuais
Como você pode estilizar um limite máximo no CSS atualmente?
O pseudoelemento ::first-letter ajuda nisso.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
No entanto, você provavelmente terá que usar propriedades como "flutuante" ao calcular um tamanho para a primeira letra.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
float: left;
line-height: 1;
margin-right: 0.25rem;
}
O lançamento de novas unidades de CSS, como o lh, pode aliviar um pouco esse problema. No entanto, eles também têm suporte limitado (no momento, o lh só é compatível com o Chrome).
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 3lh;
float: left;
line-height: 1;
margin-right: 0.1lh;
}
Apresentação da carta inicial
A propriedade initial-letter oferece um controle mais preciso sobre esse estilo de limite de soltar. São necessários dois valores separados por espaço:
p::first-letter {
initial-letter: 3.5 3;
}
- O primeiro argumento define o tamanho da letra e quantas linhas ela ocupará. A letra será escalonada verticalmente, mantendo a proporção. Não é possível usar um valor negativo, mas você pode usar valores decimais.
- O segundo argumento define o coletor de letras. Pode ser entendido como o deslocamento de onde a letra será posicionada. O segundo valor é opcional e não pode ser negativo. Se não estiver presente, ele vai presumir o valor do tamanho da letra mínimo para o número inteiro mais próximo. Isso é equivalente a usar a palavra-chave "drop". O coletor também aceita outro valor de palavra-chave, "aumentar", que equivale a um coletor de 1.
Confira esta demonstração em que é possível mudar os valores para saber como isso afeta o estilo da limitação de soltar.
Combine com ::first-line para ter algo assim.
p::first-line {
font-variant: small-caps;
font-weight: bold;
font-size: 1.25rem;
}
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
text-shadow: 0.25rem 0.25rem #be4bdb;
}
Ou dê um border. Observe como o exemplo a seguir usa a palavra-chave "drop", que seria o padrão se omitido e equivale a 3:
css
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 drop;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
border: 0.25rem dashed #be4bdb;
padding: 0.5rem;
border-radius: 5px;
}
Talvez adicione background ou box-shadow:
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: var(--surface-1);
background: #be4bdb;
padding: 0.5rem;
border-radius: 5px;
box-shadow: 0.5rem 0.5rem 0 #3b5bdb;
}
Ou corte o plano de fundo para o texto:
p::first-letter {
background: linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: transparent;
-webkit-background-clip: text;
padding: 0.5rem;
}
Há inúmeras possibilidades!
E aí está, um controle mais preciso sobre a estilização da barra de ação com o initial-letter. Você adicionaria letras maiúsculas à tipografia? Como você pode estilizá-los? Conte para nós.