Gradyan Jeneratörü Nedir ve Nasıl Çalışır?
Gradyan Jeneratörü, web tasarımlarınız için özel CSS gradyanları oluşturmanızı sağlayan kullanışlı bir araçtır. Bu araç sayesinde gradyan türünü seçebilir, yönünü veya şeklini ayarlayabilir ve sekiz adede kadar renk durağı ekleyebilirsiniz. Siz araç üzerinde değişiklikler yaptıkça, gradyanın canlı bir önizlemesini anlık olarak görebilir ve oluşturulan CSS kodunu tek bir tıklamayla kopyalayabilirsiniz.
Araç ilk açıldığında, başlangıç olarak #6366f1 %0 ve #ec4899 %100 değerlerine sahip iki renk durağı içeren varsayılan bir gradyanla yüklenir. Bu başlangıç noktası üzerinden değişikliklerinizi yapmaya başlayabilirsiniz.
Gradyan Türleri ve Özellikleri
Farklı görsel efektler elde etmek için araçta üç ana gradyan türü sunulmaktadır:
- Doğrusal: Renkleri düz bir çizgi boyunca birbirine karıştırır. Bu doğrusal hattın yönü, belirleyeceğiniz bir açı değeri ile kontrol edilir.
- Radyal: Renkleri merkezden dışarıya doğru dairesel veya eliptik bir biçimde yayar.
- Konik: Renkleri, bir renk çarkında olduğu gibi merkezi bir noktanın etrafında süpürerek döndürür.
Giriş Parametreleri ve Ayarlar
Gradyanınızı özelleştirmek için aşağıdaki giriş alanlarını ve kontrolleri kullanabilirsiniz:
- Gradyan türü: Tasarımınızın temel yapısını belirlemek için Doğrusal, Radyal veya Konik seçeneklerinden birini seçin.
- Açı: Doğrusal veya konik gradyanlar için yönü belirleyen sayısal bir değerdir. Açı kaydırıcısı ile yön ayarlanır; burada 0° yukarıyı, 90° ise sağı gösterir. Radyal gradyanlar açı kullanmazlar.
- Şekil: Radyal gradyanlar için açı yerine şekil seçimi yapılır. Burada Elips veya Daire seçeneklerini kullanabilirsiniz.
- Renk durakları: Gradyan üzerinde en fazla sekiz adet renk durağı tanımlayabilirsiniz. Her bir renk durağı şu iki bileşenden oluşur:
- Durak rengi: Belirlemek istediğiniz renk değeri.
- Konum: Rengin gradyan hattı üzerinde duracağı, %0 (başlangıç) ile %100 (bitiş) arasında değişen yüzde değeri. Yeni eklenen renk durakları varsayılan olarak %50 konumunda oluşturulur.
Çıktılar ve CSS Kodunu Almak
Yaptığınız tüm ayarlar anında işlenerek size iki temel çıktı olarak sunulur:
- Önizleme: Gradyanın görsel olarak nasıl göründüğünü canlı bir şekilde gösteren dinamik alan.
- CSS: Gradyan tasarımınızın web sitelerinde doğrudan kullanılabilmesi için üretilen CSS kodudur.
Oluşturulan kodu kullanmak için CSS Kopyala butonuna tıklamanız yeterlidir. Butona tıkladıktan sonra, işlemin tamamlandığını belirtmek için butonun durumu "Kopyalandı" olarak değişir.
Kurallar ve Sınırlar
Gradyan oluştururken aracın uymakta olduğu belirli kurallar ve sınırlar mevcuttur:
- Her bir renk durağı, gradyan çizgisi üzerinde belirli bir konuma iğnelenmiş bir rengi temsil eder. Bu doğrultuda %0 başlangıç noktasını, %100 ise bitiş noktasını ifade eder.
- Tasarımınızda en fazla sekiz adet renk durağı kullanmanıza izin verilir.
- Arayüzde sekiz adet renk durağına ulaşıldığında, daha fazla ekleme yapılmasını önlemek için Durak ekle butonu devre dışı bırakılır.
Gizlilik ve Veri İşleme
Güvenliğiniz ve gizliliğiniz bizim için önemlidir. Oluşturduğunuz her gradyan doğrudan kendi web tarayıcınızda işlenir ve oluşturulur. Araç içinde yaptığınız hiçbir ayar veya girdi BroBroGo sunucularına yüklenmez.
Kimler İçin Uygundur?
Bu araç, farklı seviyelerdeki ihtiyaçlara yanıt verecek şekilde tasarlanmıştır:
- Web siteleri için hızlıca bir CSS arka planı oluşturmak isteyen herkes.
- Sadece iki renk ve bir yön belirleyerek hızlıca basit bir gradyan ayarlamak isteyen kullanıcılar.
- Gradyanın türünü, konumunu ve çoklu renk duraklarını detaylıca ayarlayarak profesyonel tasarımlar geliştirmek isteyen tasarımcılar ve ön uç (front-end) geliştiriciler.
Sıkça Sorulan Sorular (SSS)
Doğrusal, radyal ve konik gradyanlar arasındaki fark nedir? Doğrusal (linear) gradyan, renkleri bir açı ile belirlediğiniz düz bir çizgi boyunca karıştırır. Radyal (radial) gradyan, renkleri merkezden dışarıya doğru bir daire veya elips şeklinde yayar. Konik (conic) gradyan ise renkleri bir renk çarkı gibi merkezin etrafında süpürür.
Renk durakları (color stops) nedir? Her renk durağı, gradyan boyunca belirli bir konuma sabitlenmiş bir renktir — başlangıçta %0, bitişte %100. Rengin zirve yaptığı yeri kaydırmak için bir durağı hareket ettirin veya daha zengin bir karışım için daha fazla durak ekleyin. En fazla sekiz adet kullanabilirsiniz.
Yönü nasıl kontrol ederim? Doğrusal (linear) veya konik (conic) bir gradyan için açı kaydırıcısı yönü belirler — 0° yukarıyı, 90° sağı gösterir. Radyal (radial) gradyanın açısı yoktur; bunun yerine yayılma şeklini değiştirmek için daire veya elips şeklini seçin.