Buna Neden İhtiyacın Olur
Bunun karşına çıktığı birkaç yaygın durum:
- Sosyal medya için kod parçaları — güzelce stillendirilmiş bir kod bloğu, tasarım aracı açmadan paylaşıma hazır.
- Alıntı kartları — bir alıntı al, bir kere stille, görsel olarak dışa aktar.
- Tasarımcısız dinamik grafikler — temel CSS biliyorsan, görsel bir editörle boğuşmak yerine bir kartı, rozeti ya da bandı direkt kodla yerleştirebilirsin.
- Tutarlı marka kimliği — stili bir kere yaz, sadece yazıyı değiştirerek her yeni görsel için aynı şablonu tekrar kullan.
Temel Fikir
Normal HTML'i satır içi CSS ile (ya da bir style bloğuyla) yazıyorsun — bir web sayfasında herhangi bir şeye stil verdiğin gibi. Bunu bir sayfa olarak yayınlamak yerine, belirttiğin piksel boyutlarında render edilip tek bir sabit görsel olarak yakalanıyor.
Basit Bir Örnek
Gradyan arka planlı, bir başlıklı, bir alt başlıklı ortalanmış bir kutu gibi bir şey — düz HTML ve satır içi stillerle yazılmış — tarayıcıda görüneceği gibi tam olarak render ediliyor, sonra indirip her yere paylaşabileceğin bir PNG olarak dışa aktarılıyor.
Neler İyi Çalışıyor
CSS'in normalde yapabildiği her şey — gradyanlar, özel yazı tipleri, flexbox düzenleri, kenarlıklar, gölgeler — dışa aktarılan görsele aynen taşınıyor, çünkü bu, basitleştirilmiş bir yaklaşım değil, gerçek CSS'in gerçek bir render'ı.
Aklında Tutman Gerekenler
Çıktı düz, sabit boyutlu bir görsel olduğu için, etkileşime dayanan hiçbir şey (hover durumları, animasyon, video) aktarılmıyor — etkileşimli versiyonu değil, tek bir sabit anı yakalıyorsun.
Dene
HTML'ini yapıştır, yazdıkça canlı önizlemeyi gör, çıktı boyutunu ayarla, dışa aktar. Hiçbir şey yüklenmiyor — render işlemi tarayıcında gerçekleşiyor.
Şimdi dene — hiçbir şey sunucuya yüklenmez.
convertci'yi Aç