CSS initial-letter özelliği bu işlemleri ç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ı için açık bir sorun vardır.
initial-letter desteğini şununla test edin:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
Mevcut çözümler
Bugün CSS'de düşüş sınırı stilini nasıl belirleyebilirsiniz?
Sözde ::first-letter öğesi, bizi yolun bir parçası haline getiriyor.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
Ama o zaman büyük olasılıkla "kayan", ilk harf için bir boyut hesaplarken.
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 tanıtılması bu sorunun bir kısmını hafifletebilir. Ancak bunlar da sınırlı şekilde desteklenmektedir (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;
}
İlk harfin tanıtımı
initial-letter özelliği, bu düşüş sınırı stili üzerinde daha hassas kontrol sunar. Boşlukla ayrılmış iki değer gerekir:
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ı korunurken ölçeklendirilir. Negatif bir değer kullanamazsınız ancak ondalık değerler kullanabilirsiniz.
- İkinci bağımsız değişken harf havuzunu tanımlar. Bu, mektubun duracağı yer için ofset olarak düşünülebilir. İkinci değer isteğe bağlıdır ve negatif olamaz. Aksi takdirde, en yakın tam sayıya yuvarlanan harf boyutunun değerini varsayar. Bu, "düşüş" anahtar kelimesini kullanmaya eşdeğerdir. Havuza başka bir anahtar kelime değeri de kabul edilir; bu değer, 1 harcamaya eşdeğerdir.
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 border verebilirsiniz. Aşağıdaki örnekte, atlanması durumunda varsayılan olacak ve 3'e denk gelen "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. Tipografinize büyük harf ekler miydiniz? Bunları nasıl biçimlendirebilirsiniz? Bunu bize bildirin!