Tasarımcı şapkası sanatı yüzlerce, hatta binlerce yıl önce başlamıştır. Baskı stillerinde yeni bir bölümün veya bölümün başlangıcını belirtmek için kullanılması tarihteki anlaşılabilir. Ancak dijital çağda tarzınızı yansıtmak her zaman sorunlu olmuştur. Daha önce hiç "temiz" bir çözüm olabilir.
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!