CSS’de ‘Karanlık Materyalleri’ Logosunu Yeniden Oluşturma

Faydalı Alternatif Metin Yazma

yeniyi seviyorum BBC uyarlaması Philip Pullman’ın Karanlık Malzemeleri roman üçlemesi. Ayrıca takdir edilecek oldukça güzel bir grafik tasarım var. Güzel bir başlık dizisi için enayiyim (ilk jeneriği izlemem gerek Game of Thrones tam olarak, her seferinde) ve bu kesinlikle faturaya ve çarpıcı logoya uyuyor. Yakın zamanda bir bölümü izledikten sonra, bu logoyu CSS ile yeniden yaratmayı deneyeceğimi düşündüm!

CSS ile oluşturulan logomun sürümü

tipografi

Esasen düz metin bir logo olmasına rağmen, web için oluşturma söz konusu olduğunda paketten çıkarılacak çok şey var. Logo, iki yazı tipi ağırlığından oluşur ve en önemlisi, ortasından çapraz bir eğik çizgi ile iki parçaya “kırılır”. Kırığın solundaki metin, ilk kelime (“His”) dışında normal bir yazı tipi ağırlığından oluşur. Sağdaki metin ve ilk kelime, aynı yazı tipinin kalın bir varyantını kullanır.

Logoda kullanılan asıl yazı tipinin ne olduğunu bilmiyorum, ancak Twitter’daki birkaç kişi bunun olabileceğini öne sürdü. nötr yüzey Ev Endüstrileri tarafından. Eğlenceli bir demo amacıyla 125$ ödememeye karar verdim, bu yüzden bunu Google Fonts’tan edinebileceğiniz Josefin Sans ile değiştirdim.

HTML

Logoyu herhangi bir arka planda çalışmasını sağlayacak şekilde oluşturmak istedim – yani arka plan logonun şeffaf alanlarından görünür olacaktı – bu yüzden siyah gradyanlar veya sahte öğeler içeren şeyleri gizlemek hayır-hayırdı. .

Bu sadece eğlenceli bir alıştırma olsa da, mümkünse HTML’yi kopyalamaktan kaçınmak istedim. Bir (muhtemelen daha kolay) yol, içinde aynı metinle iki yayılma kullanmak ve <h1>bunun gibi:

<h1>
<span>His Dark Materials</span>
<span aria-hidden="true">His Dark Materials</span>
</h1>

sonra kullanabilirim position: absolute ilk öğenin üzerine bindirmek için ikinci öğeye basın ve bunları bağımsız olarak stillendirin. Doğuştan hiçbir şey yok yanlış bunun hakkında – aria-hidden metnin bir ekran okuyucu tarafından iki kez okunmamasını sağlar – ancak mümkünse onu tek bir metin öğesinde tutmayı tercih ettim. Sahte öğeleri kullanmaya karar verdim (::before ve ::after) ve kullanın content bunun yerine mülk.

Kullanabiliriz CSS özel özellikleri metin içeriğini sözde öğelere kopyalamak için:

<h1 style="--text: 'His Dark Materials'">His Dark Materials</h1>
h1::before,
h1::after
{
content: var(--text);
}

Bu bize (etkili bir şekilde) üzerinde çalışmamız için metnimizin iki “kopyasını” verir. Bunu tersine çevrilmiş virgüllere koydum çünkü bunlar aslında HTML’nin kopyaları değil, yalnızca metin içeriği – ve seçilemezler veya bu nedenle kendi başlarına erişilebilir değiller. Ama sorun değil, çünkü metin içeriğimiz hala erişilebilir biçimde <h1>.

Bunları mutlak olarak konumlandırırsak, orijinal başlığın üzerine binecekler ve onları ayrı ayrı şekillendirebiliriz.

h1::before,
h1::after
{
content: var(--text);
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
color: white;
z-index: -1;
}

CSS

şimdi kullanabiliriz clip-path() kırılma efekti oluşturmak için sözde elemanlarda:

h1 {
--high: 80%;
--low: 20%;
--gap: 0.5rem;
}

h1::after {
-webkit-clip-path: polygon(
calc(var(--high) + var(--gap)) 0,
100% 0,
100% 100%,
calc(var(--low) + var(--gap)) 100%
);
clip-path: polygon(
calc(var(--high) + var(--gap)) 0,
100% 0,
100% 100%,
calc(var(--low) + var(--gap)) 100%
);
}

h1::before {
font-weight: 400;
-webkit-clip-path: polygon(
calc(var(--high) - var(--gap)) 0,
calc(var(--low) - var(--gap)) 100%,
0 100%,
0 0
);
clip-path: polygon(
calc(var(--high) - var(--gap)) 0,
calc(var(--low) - var(--gap)) 100%,
0 100%,
0 0
);
}

bu ::before sözde öğe çapraz olarak kırpılır, böylece yalnızca sol kısım görünür olur ve ::after tersi görünür olacak şekilde kırpılır ve o zaman arasında küçük bir boşluğa izin verilir (bu, eğik çizgi efekti oluşturur). Bazı tarayıcılar hala klip yolunun önüne eklenmesini gerektirdiğinden, genel kodumuzu azaltmak için özel özelliklerden yararlanabiliriz:

h1 {
--high: 80%;
--low: 20%;
--gap: 0.5rem;

--clipLeft: polygon(
calc(var(--high) - var(--gap)) 0,
calc(var(--low) - var(--gap)) 100%,
0 100%,
0 0
);

--clipRight: polygon(
calc(var(--high) + var(--gap)) 0,
100% 0,
100% 100%,
calc(var(--low) + var(--gap)) 100%
);
}

h1::before {
font-weight: 400;
-webkit-clip-path: var(--clipLeft);
clip-path: var(--clipLeft);
}

h1::after {
-webkit-clip-path: var(--clipRight);
clip-path: var(--clipRight);
}

Orijinal metin, kırpılan sözde öğelerin altında hala görünür durumda, bu yüzden rengi saydam olarak ayarlıyorum. Sözde öğeler ayrıca daha düşük bir z-endeksine sahiptir – bu şekilde metin hala seçilebilir olacaktır, ancak izleyici yalnızca aşağıdaki kırpılmış metni görecektir.

h1 {
color: transparent;
}

Son olarak, eğik çizginin solundaki metnin çoğu normal yazı tipi ağırlığındayken, ilk kelimenin kalın olması gerekir. Maalesef bunu kullanarak ayrı bir varlık olarak biçimlendiremiyoruz contentbu nedenle, ilk kelimeyi seçmemize izin vermek için işaretlemeyi değiştirmenin yanı sıra biraz korsanlığa ihtiyacı var (bir ::first-word seçici!):

<h1 style="--text: 'His Dark Materials'"><span>His</span> Dark Materials</h1>

Şimdi ilk kelimenin metnini görünür hale getirebilir ve yazı tipi ağırlığını kalın olarak ayarlayabilirim, bu da karşılık gelen sözde öğe içeriğini etkili bir şekilde gizler:

h1 > span {
font-weight: 700;
color: white;
}

Çok sınırlı olduğu için bu çözüme meraklı değilim. İlk kelimenin farklı bir yazı tipinde veya daha hafif bir ağırlıkta stillendirilmesi gereken bir durumumuz olsaydı, sözde öğe içeriğini gizlemek işe yaramazdı. Ama bu sefer amacımız için yeterince iyi.

Tam demoya göz atın:

Kalemi Gör CSS ile His Dark Materials TV dizisi logosu Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.