Önemli noktalar
- 01Üç CSS degrade türü — doğrusal, radyal ve konik — canlı önizleme ile desteklenir.
- 02Altıya kadar renk durağı ekle, her biri bağımsız konum ve renge sahip.
- 03Çıktı herhangi bir stil sayfasına yapıştırmaya hazır tam bir arka plan bildiridir.
- 04Kaydolma yok, yükleme yok ve hiçbir şey yüklenmiyor — her şey tarayıcınızda çalışır.
Neden Görsel Degrade Üreteci Kullanmalı?
CSS degradelerini elle yazması hızla sıkıcı hale gelir. Sözdizimi bildiğin zaman okunabilir, ancak görsel önizleme olmaksızın tam duraklama konumlarını ve renklerini seçmek basit bir tasarım kararını DevTools'ta deneme-yanılmaya çevirir. Bir üreteci sonucunu gerçek zamanda görüp koda temiz bir şekilde dışa aktarmanızı sağlar.
Bu araç tüm üç modern degrade türünü destekler. Doğrusal, kahraman arka planları ve düğmeleri için kullanacağınız klasik yöndeki esneme. Radyal noktadan dışa doğru yayılır — spot aydınlatma efektleri ve vinyetler için harika. Konik merkez etrafında döner, bu nedenle pasta grafik segmentleri, renk tekerleği ve dönerci göstergelerinin gitişi'dir. Yerleşik ön ayarlardan birinden (Lime Swiss, Sunset, Sky, Aurora) başlayın veya sıfırdan tasarla.
CSS Degradesi Nasıl Oluşturulur
Tüm süreç bir dakikanın altında alır.
- 01
Degrade türünü seç
Tür seçicisinden Doğrusal, Radyal veya Konik'i seçin. Doğrusal için açıyı da ayarlayın. Önizleme anında güncellenir.
- 02
Renk duraklarını ekle ve konumlandır
Duraklama Ekle'ye tıkla yeni bir duraklama ekle, sonra kaydırıcısını sürükle veya konumlandırmak için bir yüzde yaz. Altıya kadar durağa izin verilir — durağlar konum ile otomatik olarak yeniden sıralalanır.
- 03
Her durağın rengini seç
Sistem renk seçiciyi açmak için renk örneğine tıkla veya doğrudan bir hex değeri yaz. RGB ve hex biçimleri çalışır.
- 04
Gerçek zamanda önizle
Önizleme paneli tarayıcının yerli degrade motoru kullanarak degradeni render eder, bu nedenle sonuç CSS'nin üretimde üretecekleriyle tam olarak eşleşir.
- 05
CSS bildirisini kopyala
Tam arka plan: doğrusal-degrade(...) bildirisini almak için Kopyala'ya tıkla. Stil sayfasına, stillendirilmiş bileşene veya bg-[<değer>] gibi Tailwind isteğe bağlı değerine yapıştır.
Yaygın Degrade Kullanım Durumları
Her degrade türü farklı bir senaryoda mükemmeltir.
- 01Kahraman bölümü arka planları — modern diagonal sweep için 135° açıda doğrusal degrade.
- 02Düğme gezinme durumları — derinlik için hafif iki duraklama doğrusal degrade.
- 03Radyal spot hafif veya vinyetası — görüntü kaplamasında koyu-şeffaf radyal.
- 04Pasta grafikler ve ilerleme halkaları — sert duraklama ile konik degrade.
- 05Renk tekerleği seçici önizlemeleri — tam yelçek konik degrade.
- 06Metin degradeleri — degradeyi arka plana uygula, ardından arka plan-klip kullan: metin.
Tamamen Tarayıcınızda Çalışır
Degrade üreteci %100 istemci tarafında çalışır — sunucu içine hiçbir veri gönderilmez. Önizleme tarayıcınızın kendi CSS motoru tarafından render edilir, bu da gördüğünüz şey herhangi bir ziyaretçinin tarayıcısının aynı CSS ile render edeceği şey eşleştiğini anlama gelir.
Pratik not: e-posta istemcileri CSS degradeleri için hala lekeli destek içerir. Oluşturulan CSS'yi bir HTML e-posta şablonuna yapıştırıyorsanız, eski istemcilerdeki alıcılar makul bir şey göreceği şekilde degrade bildirisinden önce solid arka plan-rengi yedeklemesi ekleyin.
CSS Degrade Üreteci SSS
Doğrusal, radyal ve konik degradeler arasında fark nedir?
Doğrusal degradeler belirli bir açıda düz bir çizgi boyunca geçiş yapar. Radyal degradeler merkez noktasından dışa doğru yayılır — vurgular ve spot efektleri için kullanışlı. Konik degradeler bir merkez gibi çerçeve el gibi çerçeve — pasta segmentleri ve renk tekerleği için ideal.
Bunu Tailwind CSS projeleri için kullanabilir miyim?
Evet. Oluşturulan değeri kopyala ve onu Tailwind isteğe bağlı değeri olarak kullan, örneğin: bg-[doğrusal-degrade(135deg,#ff6b6b,#4ecdc4)]. Tailwind bunu çıktı stil sayfanıza içerir.
Önizleme tam olarak canlı sitede göreceğim şeyle eşleşir mi?
Evet — önizleme canlı CSS'nizi render edecek aynı tarayıcı degrade motoru tarafından render edilir, bu nedenle çıktı piksel-doğru.
CSS degradelerini e-posta şablonlarında kullanabilir miyim?
Çoğu e-posta istemcisi CSS degradelerini güvenilir bir şekilde desteklemez. Her zaman yedek olarak degrade bildirisinden önce solid arka plan-rengi ekleyin.
Renk duraklarının sayısında sınır var mı?
Üreteci altıya kadar duraklama destekler. Çoğu tasarım için iki ila dört yeterli; altıdan fazlası netlik eklemek yerine azalt.