CSS Geçiş Oluşturucu
Renkler girer, bir bildirim çıkar.
Örnekler girdiyi ve ayarları geçici olarak değiştirir. Önceki çalışmanızı geri yükleyebilirsiniz.
0 karakter
Çıktı
Sonucu burada görmek için yukarıya yapıştırın veya yazın.
Dosyalarınız cihazınızda kalır
Bu araç tamamen tarayıcınızda çalışır. Yapıştırdığınız içerik cihazınızda işlenir ve asla bir sunucuya gönderilmez; bu yüzden token'lar, anahtarlar ve yayımlanmamış metinlerle güvenle kullanabilirsiniz.
Örnek
Uygulamalı örnek — CSS Geçiş Oluşturucu
Girdi satırlarını sırayla girip aşağıdaki ayarları kullanın. Sonucu çıktı satırlarıyla karşılaştırın.
| Öğe | Değer |
|---|---|
| Girdi 1 | #ff0000 |
| Girdi 2 | #0000ff |
| Tür | Doğrusal |
| Açı (derece) | 90 |
| Yinelenen | Kapalı |
| Çıktı 1 | background: #ff0000; |
| Çıktı 2 | background: linear-gradient(90deg, #ff0000, #0000ff); |
| Çıktı 3 | background-image: linear-gradient(90deg, #ff0000, #0000ff); |
90 derecelik doğrusal geçiş solda kırmızıdan sağda maviye gider. Düz kırmızı bildirimi yedek arka plandır.
Nasıl çalışır
- Her satıra bir renk. Her CSS rengi olur — hex, rgb(), hsl(), renk adı.
- Bir rengi sabitlemek için ardına konum yazın: “#000 80%”.
- Doğrusal, ışınsal ya da koniği seçin; sonra açıyı ya da merkezi.
- Bildirimi kopyalayın.
Sık sorulan sorular
- Neden önce düz bir renk var?
- O yedektir. Geçişi okuyamayan her şey — eski bir tarayıcı, bir e-posta istemcisi, bir PDF işleyici — ilk bildirimi alır, ikinciyi atlar. O olmadan bu okuyucular hiç arka plan alamaz.
- 180deg nereyi gösterir?
- Aşağıyı. CSS’te 0deg yukarıyı gösterir ve açı saat yönünde ilerler; bu, eski -webkit- sözdiziminin ve çoğu tasarım aracının tersidir. Burada en sık ters bilinen şey budur.
- Neden sürüklenen bir tuval değil de metin?
- Çünkü bir tuvali kod incelemesine yapıştıramazsınız. Buradaki çıktı bir bildirimdir: karşılaştırılabilir, sürüm denetimine girer ve dosyayı açacak bir sonraki kişi tarafından okunabilir.
- Bir sunucuya bir şey gönderiliyor mu?
- Hayır. Tarayıcıda çalışır; yapıştırdığınız şey bilgisayarınızda kalır.