CSS initial-letter özelliği, işleri çok daha kolaylaştırır.
Tarayıcı desteği
initial-letter ürününü nerede deneyebilirsiniz? Bu uygulamayı Safari'de ve Chrome 110'da bulabilirsiniz. Safari'de mülkün -webkit- öneki olmalıdır. Firefox'ta uygulanmasıyla ilgili açık bir sorun var.
initial-letter desteğini şu cihazlarla test edin:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
Mevcut çözümler
Günümüzde CSS'de büyük harflerle başlayan metinlerin stilini nasıl belirleyebilirsiniz?
::first-letter sözde öğesi, bu yolda bize yardımcı olur.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
Ancak bu durumda, ilk harfin boyutunu hesaplarken "float" gibi özelliklere başvurmanız gerekebilir.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
float: left;
line-height: 1;
margin-right: 0.25rem;
}
lh gibi yeni CSS birimlerinin kullanıma sunulması bu sorunların bir kısmını hafifletebilir. Ancak bu sürümler de sınırlı destek almaktadır (lh şu anda yalnızca Chrome'da desteklenmektedir).
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 3lh;
float: left;
line-height: 1;
margin-right: 0.1lh;
}
Baş harfi özelliğini kullanıma sunduk
initial-letter özelliği, bu düşüş sınırı stili üzerinde daha hassas kontrol sunar. Boşlukla ayrılmış iki değer alır:
p::first-letter {
initial-letter: 3.5 3;
}
- İlk bağımsız değişken, harf boyutunu ve kaç satır kaplayacağını tanımlar. Harf, en boy oranını koruyarak büyütülür. Negatif bir değer kullanamazsınız ancak ondalık değerler kullanabilirsiniz.
- İkinci bağımsız değişken, harf sızıntısını tanımlar. Bu, harfin oturacağı yer için ofset olarak düşünülebilir. İkinci değer isteğe bağlıdır ve negatif olamaz. Bu anahtar yoksa harf boyutu değeri, en yakın tam sayıya yuvarlanır. Bu, "düşüş" anahtar kelimesini kullanmaya eşdeğerdir. Havuz, 1 harcamaya eşdeğer olan "yükselt" anahtar kelime değerini de kabul eder.
Değerleri değiştirebileceğiniz bu demoya göz atarak tasarımda kullanılan stilin nasıl etkilendiğini görebilirsiniz.
::first-line ile birleştirerek şuna benzer bir elde edebilirsiniz
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;
}
Dilerseniz bir border verebilirsiniz. Aşağıdaki örnekte, atlanırsa varsayılan olarak kullanılacak ve 3'e eşit olacak "drop" anahtar kelimesinin nasıl kullanıldığına dikkat edin:
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;
}
background veya box-shadow ekleyebilirsiniz:
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;
}
Alternatif olarak, arka planı metne kırpabilirsiniz:
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;
}
Başarabileceğiniz çok sayıda olasılık var.
İşte bu kadar. initial-letter ile stoksuz e-ticaret stilinizi daha iyi kontrol edebilirsiniz. Yazı tipinize büyük harf eklemek ister misiniz? Bunları nasıl biçimlendirebilirsiniz? Bunu bize bildirin!