Korkutucu CSS Şablonları

Korku Stili İçin Özelleştirilebilir Korkutucu CSS Şablonları

Korku hissi küçük görsel kararlarda gizlidir: bir başlığın kenarlarının nasıl yırtıldığı, bir kartın karanlığa nasıl gömüldüğü ya da bir butonun imlece tepki vermesinden önceki o yarım saniye. Korku temalı CSS şablonları bu kararları yeniden kullanılabilir tek bir kural kümesinde toplar; böylece bir kampanya, gelecek yılın ekim ayında birinin çözmek zorunda kalacağı tek seferlik geçersiz kılmalar yığınına dönüşmez.

Yeniden Kullanılabilir Sınıflar Görsel Dili Şekillendirir

Kullanışlı bir korku seti zihinde tutulabilecek kadar derli toplu kalır ve genellikle adlandırılmış beş veya altı sınıf tüm bir kampanyayı taşımak için yeterlidir:

• .fog-overlay, karanlık görsellerin üzerinde yavaşça süzülen bir sözde öğe gradyanı;
• .glitch-title, keyframe'lerle yönetilen iki adet kaydırılmış kopyaya sahip bir başlık;
• .flicker-text, arızalı bir ampul gibi zamanlanmış bir opaklık animasyonu;
• .distressed-card, yırtık maske kenarına ve yoğun bir iç gölgeye sahip bir tanıtım bloğu.

Adlandırılmış kurallar her yere kolayca uyarlanır. Aynı eskitilmiş kart; bir oda açıklaması, bir oyuncu tanıtımı veya bir ürün vitrini olarak hizmet verebilir ve renkleri, boşlukları ile yazı boyutları küçük bir değişken kümesi kullanılarak değiştirilebilir.

Titreme, Sis, Glitch: Korunmaya Değer Efektler

Ölçülü olmak, atmosfer ile baş ağrısı arasındaki farkı belirler. Ekran başına iki veya üç hareketli bileşen gayet yeterlidir; bunun ötesinde göz hiçbir şeyi ayırt edemez hale gelir ve dikkat çekmesini istediğiniz öğe sessizce etkisini yitirir.

Dönüşümler (transforms) ve opaklık ekonomik araçlardır; çünkü bunlara uygulanan geçişler eski telefonlarda bile akıcı kalırken, hareketli gölgeler ve filtreler çok daha fazla kaynak harcar. Gradyanlar ve maskeler, tek bir ek görsel dosyası bile gerektirmeden sis, nemli taş ve yırtık kağıt dokusu oluşturur. Keyframe'ler ne yaptıklarını belirten isimleri hak eder; çünkü flicker ve drift bir yıl sonra bile anlamını korurken anim2 hiçbir zaman koruyamaz. Azaltılmış hareket tercihleri de gözetilmelidir; zira sisteminden animasyonları sakinleştirmesini isteyen bir ziyaretçi, titremeler olmadan da karanlık mod deneyimini alabilmelidir.

Dar Genişliklerde Duyarlı Kurallar

Dar ekranlar ilk olarak aşırı süslemeleri cezalandırır. Üç sütunlu tanıtım kartı ızgarası tek sütuna çöker, cömert boşluklar kaybolur ve bir monitörde taşa oyulmuş gibi duran yırtık başlık görsel bir gürültüye dönüşür. Efektler sütunlarla birlikte küçülmelidir; bu da genellikle daha az hareketli parça, daha küçük bir tipografi ölçeği ve setteki en koyu arka plana göre denetlenmiş kontrast anlamına gelir.

Nicepage bu gereksinimlerin büyük kısmını görsel kontrollerle çözer; hedeflenen kurallar ise standart özelliklerin karşılayamadığı durumları yönetir. Özel CSS kılavuzu, sınıfların ve özel kuralların öğe, sayfa veya site düzeyinde nasıl uygulanacağını açıklamaktadır.

Bir korku seti, yeni bir istisna tanımlanmasına gerek kalmadan yeni bir bileşeni bünyesine alabildiği sürece değerlidir. Onu bir bilet bloğuna ekleyin, mevcut kart ve buton sınıflarını atayın; artık karanlığın bir parçası gibi görünmeye hazır olacaktır.