Nasıl kullanılır
- Gradyan veya Düğme sekmesini seçin.
- Denetimleri ayarlayın ve canlı önizlemeyi izleyin: gradyan için renkler, açı ve tür; düğme için metin, renkler, dolgu ve köşe yarıçapı.
- Kod bloğunun üstündeki kopyala simgesine tıklayın ve CSS'i stil dosyanıza yapıştırın.
Gradyan sekmesi iki renkten bir arka plan oluşturur. Doğrusal ve dairesel gradyan arasında seçim yapabilirsiniz. Doğrusal gradyanlar için 0 ile 360 derece arasında bir açı kaydırıcısı vardır. Dairesel seçenek, birinci renkten ikinciye dairesel bir gradyan üretir. Önizlemenin altındaki kod, örneğin bir açı ve iki renk durağı içeren bir linear-gradient gibi, yapıştırmaya hazır tek bir background bildirimidir.
Düğme sekmesi, custom-button adlı bir sınıf için eksiksiz bir kural üretir. Önizleme için etiket metnini, arka plan rengini, metin rengini, yatay ve dikey dolguyu (her biri 0 ile 100 px arası) ve köşe yarıçapını (0 ile 50 px arası) ayarlarsınız. Üretilen CSS; seçtiğiniz renkleri, dolguyu ve yarıçapı, ayrıca kenarlık olmamasını, işaretçi imlecini, orta yazı tipi kalınlığını, kısa bir opaklık geçişini ve opaklığı hafifçe düşüren bir hover kuralını içerir.
Renkler renk denetimiyle seçilebilir veya metin olarak yazılabilir. Çıktı, tedarikçi öneki ve çerçeve içermeyen düz CSS'tir; bu yüzden her projede kullanabilir ve daha sonra düzenleyebilirsiniz. İkiden fazla renk durağı olan gradyanlar bu araçta desteklenmez.
Hiçbir şey bir sunucuya gönderilmez. Önizleme ve kod, siz yazdıkça tarayıcınızda üretilir.
Sık sorulan sorular
Üç veya daha fazla renkli bir gradyan yapabilir miyim?
Hayır. Bu araç iki renk kullanır. Kopyaladığınız CSS'i düzenleyerek daha fazla durak ekleyebilirsiniz.
Açı denetimi ne işe yarar?
Doğrusal gradyanlar için yönü derece cinsinden belirler. Her zaman dairesel olan dairesel gradyanlarda gizlenir.
Düğme CSS'indeki sınıf adı nedir?
Üretilen kural custom-button sınıfını kullanır; bunu projenize uyacak şekilde yeniden adlandırabilirsiniz.
Düğmeye hover stili ekler mi?
Evet. Kopyalanan CSS, opaklığı 0.9 yapan bir hover kuralı içerir.
Girdilerimden herhangi biri yükleniyor mu?
Hayır. CSS tarayıcınızda oluşturulur.