CSS initial-letter özelliği işinizi kolaylaştırır.
Tarayıcı desteği
initial-letter ürününü nerede deneyebilirsiniz? Safari'de ve Chrome 110'da kullanılabilir. Safari'de mülk için -webkit- öneki gerekir. Firefox'ta uygulanmasına ilişkin açık bir sorun var.
initial-letter desteği için test edin:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
Mevcut çözümler
Bugün CSS'de düşüş için nasıl bir stil belirleyebilirsiniz?
::first-letter sözde öğesi bizi yolun bir parçası haline getiriyor.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
Ancak daha sonra ilk harf için bir boyut hesaplarken muhtemelen "kayan" gibi mülklere ulaşmanız gerekir.
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 sıkıntıyı 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 harf kullanıma sunuldu
initial-letter özelliği, bu düşme sınırı stili üzerinde daha hassas kontrol sahibi olmanızı sağlar. Boşlukla ayrılmış iki değer kullanılır:
p::first-letter {
initial-letter: 3.5 3;
}
- İlk bağımsız değişken, harfin boyutunu ve kaç satır kaplayacağını tanımlar. Harf, en boy oranı korunarak büyütülür. Negatif değer kullanamazsınız, ancak ondalık değerler kullanabilirsiniz.
- İkinci bağımsız değişken harf havuzunu tanımlar. Bu, mektubun yerleştirileceği konumu belirlemek için düşünülebilir. İkinci değer isteğe bağlıdır ve negatif olamaz. Yoksa, harf boyutunun en yakın tam sayıya dökülen değerini varsayar. Bu, "düşme" anahtar kelimesini kullanmaya eşdeğerdir. Havuz, 1'lik havuza denk gelen başka bir anahtar kelime değeri olan "yükseltme"yi de kabul eder.
Değerleri değiştirebileceğiniz ve açılır başlık stilini nasıl etkilediğini görmek için bu demoya göz atın.
::first-line ile birleştirdiğinizde şuna benzer bir elde edersiniz
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;
}
Veya border verebilirsiniz. Aşağıdaki örnekte, atlanırsa varsayılan olan ve 3'e eşit olan "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;
}
Veya arka planı metne uyacak şekilde kırpın:
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;
}
Birçok olasılık elde edersiniz!
Artık initial-letter ile başlık stilinizi daha hassas bir şekilde kontrol edebilirsiniz! Yazı tipografinize büyük harf ekler miydiniz? Onların stilini nasıl belirleyebilirsiniz? Bunu bize bildirin!