⭐ 0
🔍
Metin Görsel PDF ve Belgeler Ses Müzik Elektronik Zaman Faydalı Araçlar Doğrulayıcılar Ezoterizm Oyunlar

CSS Metin Efektleri Oluşturucu

Kendi metninizi yazın ve gerçek matematik ve kopyalanabilir bir CSS bloğu tarafından hesaplanan parametrelerle gerçek neon parıltı, 3D ekstrüzyon, tipo baskı, anahatlı ve degrade dolgulu CSS efektlerinin canlı ön izlemesini yapın.

İşleniyor... 0%

Sonuç

Çoğu CSS metin efekti galerisi size sabit bir ön ayar sunar: bir neon parıltı, bir 3D ekstrüzyon, ister alın ister bırakın. Bu oluşturucu, CSS'yi gerçekte yazdığınız metin yerine parametrelerinizden oluşturur. Efekt seçiminden neon parıltı, 3D ekstrüzyon, tipo baskı/kabartma, anahatlı veya degrade dolguyu seçin, bu efektin kendi kontrollerini ayarlayın ve canlı önizleme ve altındaki kopyalanabilir CSS bloğu her değişiklikte güncellenir.

3D-ekstrüzyon efekti, anlaşılmaya değer bir efekttir: seçilen bir derinlik (yığılmış katman sayısı) ve açı için, katman i yatay olarak i × cos(açı) ve dikey olarak i × sin(açı) ile dengelenir, JavaScript'te gerçek trigonometrik işlevlerle hesaplanır - önceden ayarlanmış açıların bir arama tablosundan okunmaz. 45 derecede yatay ve dikey sapmalar her katman için eşit çıkar çünkü 45°'lik kosinüs ve sinüs aynı değerdir; açı kaydırıcısını döndürün ve "metin-gölge" katmanlarının tüm yığınının gerçek zamanlı olarak harflerin etrafında salınmasını izleyin; her biri, aydınlatılmış bir 3D yüzü taklit etmek için bir öncekinden biraz daha fazla karartılmıştır.

Neon parıltı, isteğe bağlı bir titremeyle, seçtiğiniz renkte artan bulanıklık yarıçapına sahip dört "metin gölgesi" katmanını biriktirir: onu açın ve rastgele bir opaklık düşüşü dizisine sahip bir "@anahtar kareler" kuralı oluşturulur ve canlı olarak canlandırılır ve bir karıştırma düğmesi, tek bir ana kareyi elle yazmanıza gerek kalmadan deseni yeniden yuvarlamanıza olanak tanır. Ana hatlarıyla belirtilen metin, onu destekleyen tarayıcılar için "-webkit-text-stroke" uygular, desteklemeyenler için ise dürüst bir 8 yönlü "text-shadow" geri dönüşü uygular; her iki satır da kopyalanan CSS'de bunun nedeni hakkında bir notla birlikte gönderilir. Degrade dolgusu, eski motorlar için eski "-webkit-" ön ekli satırını koruyan, artık geniş desteğe sahip standart bir özellik olan "background-clip: text" ile metin şekline "doğrusal bir degrade" klipsler.

Her şey tarayıcınızda yerel olarak işlenir; yazdığınız hiçbir metin hiçbir zaman hiçbir yere gönderilmez. Efektin gerektirdiği durumlarda "@keyframes" kuralı da dahil olmak üzere tamamlanmış CSS bloğunu doğrudan stil sayfanıza kopyalayın.

🛡️
Tarayıcıda Çalıştırıldı

Dosyalarınız ve girdileriniz bu cihazdan asla ayrılmaz. İşlem tamamen çevrimdışı çalışır. %100 Güvenli.

Kabul Edilen Formatlar ve Kurallar

  • Beş gerçek efekt - neon parıltı, 3D-ekstrüzyon, tipo baskı/kabartma, anahatlı ve degrade dolgu - her biri kendi parametre kontrollerine (renkler, derinlik/açı kaydırıcıları, degrade durakları) sahiptir.
  • Neon parıltısı, CSS'ye elle dokunmadan yeniden karıştırabileceğiniz, rastgele "@keyframes" opaklık desenine sahip isteğe bağlı bir titreme animasyonu içerir.
  • 3D-extrude, derinliği (katman sayısı) ve açıyı bağımsız olarak sürüklemenize olanak tanır; her katmanın piksel dengesi ve giderek koyulaşan gölge, canlı olarak yeniden hesaplanır.

Temel Faydalar

✓ 3D ekstrüzyon derinliği gerçek trigonometriden hesaplanır - her katmanın ofseti cos(açı) ve sin(açı) çarpı mesafesidir - yani açının değiştirilmesi tüm ekstrüzyonu tam olarak gerçek 3D harflerde olduğu gibi döndürür.
✓ Her efekt, yazdığınız metin üzerinde gerçek zamanlı olarak önizleme yapar, böylece herhangi bir şeyi kopyalamadan önce okunabilirliği ve kontrastı değerlendirebilirsiniz.
✓ Kopyalanabilir çıktı, tarayıcı desteği konusunda dürüst kalır: anahat ve degrade dolgu efektlerinin her ikisi de, WebKit'e özgü özelliğin yanı sıra, nedenini açıklayan bir notla birlikte standartlara dayalı bir geri dönüş çizgisi sunar.

Kullanım Durumları

  • • Açılış sayfası başlığını bulmak için bir neon tabela çevirin, rastgele titreşim animasyonunu değiştirin ve bitmiş metin gölgesi artı @keyframes bloğunu kopyalayın.
  • • Büyük bir izometrik logo uygulaması için 3D ekstrüzyon derinliğini 8'e ve açıyı 30 dereceye ayarlayın, ardından hesaplanan metin gölgesi yığınını doğrudan stil sayfanıza kopyalayın.
  • • Hem -webkit-text-stroke çizgisini hem de onun text-shadow geri dönüşünü içeren anahatlı başlık metni oluşturun, böylece anahat, kontur desteği olmayan tarayıcılarda görünmeye devam eder.