CSS Gradyan Nasıl Oluşturulur (ve Temiz Kod Nasıl Kopyalanır)

Düz bir renk iş görür, ama iyi ayarlanmış bir gradyan, bir hero bölümünü, bir düğmeyi ya da bir kartı bitmiş hissettiren şeydir. Sorun şu ki, gradyan söz dizimini ezberden el yordamıyla yazmak zahmetlidir ve tek bir yanlış değer, yumuşak bir geçiş yerine size sert bir çizgi verir. Bu rehber, CSS gradyanlarının gerçekte nasıl çalıştığını ve birini görsel olarak nasıl oluşturup ardından stil dosyanıza doğrudan yapıştırabileceğiniz temiz kodu nasıl kopyalayacağınızı anlatıyor.

En çok kullanacağınız iki gradyan

CSS’in birkaç gradyan türü var ama ikisi neredeyse her şeyi kapsar:

• Doğrusal gradyan, renkleri düz bir çizgi boyunca harmanlar. Açıyı (veya to right gibi bir anahtar sözcüğü) belirlersiniz ve renkler bunun üzerinde akar. Arka planlar, düğmeler ve afişler için ilk tercihinizdir.
• Dairesel gradyan, bir merkez noktasından bir daire veya elips içinde dışa doğru harmanlar. Spot ışıkları, parıltılar ve yumuşak odak arka planları için kusursuzdur.

Her ikisi de renk duraklarından oluşur: bir renk listesi ve isteğe bağlı olarak her birinin çizgi boyunca nerede durduğu.

Tarayıcınızda bir gradyan nasıl oluşturulur

Ücretsiz CSS Gradyan Oluşturucu, birini gözünüzle tasarlamanıza izin verir ve kodu size verir, böylece söz dizimini asla tahmin etmek zorunda kalmazsınız.

1. Aracı açın ve gradyan türünüzü, doğrusal ya da dairesel, seçin.
2. Renklerinizi seçin ve harman doğru görünene kadar durakları sürükleyin.
3. Açıyı veya konumu zevkinize göre ayarlayın.
4. Oluşturulan CSS’i kopyalayın ve stil dosyanıza yapıştırın.

Canlı önizlemede gördüğünüz şey, yayına çıkanın tam olarak kendisidir, dolayısıyla sonradan tarayıcının geliştirici araçlarında deneme yanılma yapmanıza gerek kalmaz.

Size verdiği kodu okumak

Basit bir doğrusal gradyan şöyle görünür:

background: linear-gradient(90deg, #2b59ff, #7c3aed);

Bu şöyle okunur: maviden mora, soldan sağa (90 derece) harmanla. Üçüncü bir renk ekleyin ya da durakları kaydırın, böylece her geçişin tam olarak nerede gerçekleşeceğini siz denetlersiniz. Dairesel sürüm anahtar sözcüğü değiştirir:

background: radial-gradient(circle, #2b59ff, #1a1a2e);

Çıktı sade CSS olduğu için, kütüphane ya da derleme adımı olmadan tüm modern tarayıcılarda çalışır.

Profesyonel görünen gradyanlar için ipuçları

• Tonları akraba tutun. Komşu renkler arasındaki harmanlar (maviden mora, turuncudan pembeye) yumuşak görünür. Birbirine taban tabana zıt renkler ortada bulanık bir hâl alabilir.
• Açıya dikkat edin. İncelikli bir köşegen (135 derece civarı) çoğu zaman düz bir yukarıdan aşağıya dolgudan daha doğal hissettirir.
• Bir niyetle kullanın. Bir düğmedeki gradyan artı arka planda uyumlu bir gradyan, tasarımı birbirine bağlar. Uyumlu bir gölgeye ihtiyacınız varsa, Box Shadow Oluşturucu onu aynı şekilde oluşturur.

Renkleri başka bir biçimde mi istiyorsunuz?

Gradyanlar varsayılan olarak hex ile yazılır, ama bir tasarım sistemi ya da bir framework için aynı renkleri RGB veya HSL olarak isteyebilirsiniz. Renk Dönüştürücü, biçimler arasında anında çeviri yapar, böylece değerleri projenizin beklediği yere bırakabilirsiniz. Bir gradyanı Border Radius Oluşturucu ile gelen yuvarlatılmış köşelerle eşleştirin, birkaç dakika içinde modern bir kartın tüm görünümüne sahip olun.

Neden bir tarayıcı aracı söz dizimini ezberlemekten iyidir

Gradyan kodunu azıcık yanlış yapmak kolaydır ve küçük bir hata bantlı, çirkin bir sonuç üretir. Onu görsel olarak oluşturmak, doğru görünene kadar ayarlamanız ve ardından önizlemeyle eşleşeceği garanti olan bir kodu kopyalamanız anlamına gelir. Her şey kendi cihazınızda sayfa içinde çalışır, dolayısıyla hesap yok, yükleme yok ve kurulacak bir şey yok.

CSS gradyanını zahmetsiz yoldan oluşturmak için: türü seçin, renklerinizi ve duraklarınızı ayarlayın, açıyı ince ayarlayın ve kodu kopyalayın. Ücretsiz ve anlık olmalı, ki CSS Gradyan Oluşturucu tam da bunun içindir.