Düz renkler çok geçen yıl. Gradyanlar içeride! Ama onları CSS’de nasıl yaratırsınız?
En iyi web tasarım trendleri ve standartlarında güncel kalmak, bir tasarımcı veya geliştirici için çok önemlidir. Şu anda, arka plan gradyanları modern web sitelerinde yaygın olarak kullanılmaktadır.
Bu arka plan gradyan örneklerini bir sonraki CSS tasarımınız için ilham kaynağı olarak kullanın.
CSS Kullanarak Arka Plan Gradyanları
CSS gradyanı, iki veya daha fazla belirtilen rengi kullanarak yumuşak bir geçiş görüntüler. CSS gradyanı, Adobe Illustrator gibi araçları kullanarak oluşturabileceğiniz bir gradyanın gerçek bir görüntü dosyasını kullanarak daha iyi kontrol ve performans sağlar . Degradeleri arka plan olarak bildirmek için background-image CSS özelliğini kullanın .
Üç tür degrade vardır: doğrusal ( lineer-gradient() işleviyle oluşturulur), radyal ( radyal-gradient() işleviyle oluşturulur) ve konik ( conic-gradient() işleviyle oluşturulur). Yinelenen-linear-gradient() , yinelenen-radyal-gradient() ve yinelenen-konik-gradient() işlevleriyle yinelenen degradeler de oluşturabilirsiniz .
MDN Docs bu işlevleri şu şekilde tanımlar:
linear-gradient() : linear-gradient() CSS işlevi, düz bir çizgi boyunca iki veya daha fazla renk arasında aşamalı geçişten oluşan bir görüntü oluşturur. Bunun sonucu, <image> türünün özel bir türü olan <gradient> veri türünün bir nesnesidir .
radial-gradient() : radial-gradient() CSS işlevi, bir orijinden yayılan iki veya daha fazla renk arasında aşamalı geçişten oluşan bir görüntü oluşturur. Şekli bir daire veya elips olabilir. İşlevin sonucu, özel bir <image> türü olan <gradient> veri türünün bir nesnesidir .
conic-gradient() : conic-gradient() CSS işlevi, renk geçişlerinin bir merkez noktası etrafında döndürüldüğü (merkezden yayılmak yerine) bir degradeden oluşan bir görüntü oluşturur. Örnek konik gradyanlar, pasta grafiklerini ve renk tekerleklerini içerir. conic-gradient() işlevinin sonucu, özel bir <image> türü olan <gradient> veri türünün bir nesnesidir .
Yinelenen-doğrusal-gradient() : Yinelenen-doğrusal-gradyan() CSS işlevi, yinelenen doğrusal gradyanlardan oluşan bir görüntü oluşturur. Gradyan/doğrusal-gradyan() işlevine benzer ve aynı argümanları alır, ancak tüm kapsayıcısını kapsayacak şekilde renk duraklarını her yönde sonsuz olarak tekrarlar. İşlevin sonucu, özel bir <image> türü olan <gradient> veri türünün bir nesnesidir .
Yinelenen-radyal-gradient() : Yinelenen-radyal-gradient() CSS işlevi, bir orijinden yayılan yinelenen degradelerden oluşan bir görüntü oluşturur. Gradyan/radyal-gradyan() işlevine benzer ve aynı argümanları alır, ancak renk duraklarını tüm kapsayıcısını kapsayacak şekilde gradyan/tekrarlayan-doğrusal-gradyan()’a benzer şekilde tüm yönlerde sonsuz olarak tekrarlar. İşlevin sonucu, özel bir <image> türü olan <gradient> veri türünün bir nesnesidir .
Yinelenen-konik-gradient() : Yinelenen-konik-gradient() CSS işlevi, renk geçişlerinin bir merkez noktası etrafında döndürüldüğü (merkezden yayılmak yerine) yinelenen bir degradeden (tek bir degrade yerine) oluşan bir görüntü oluşturur.
Bu yazıda kullanılan kod MIT Lisanslıdır .
İşte her bir degrade türünün resmi sözdizimi.
Doğrusal Gradyanların Resmi Sözdizimi
linear-gradient(
[ <angle> | to <side-or-corner> ]? ,
<color-stop-list>
)
<side-or-corner> = [to left | to right] || [to top | to bottom]
Radyal Gradyanların Resmi Sözdizimi
radial-gradient(
[ <ending-shape> || <size> ]? [ at <position> ]? ,
<color-stop-list>
);
Konik Gradyanların Resmi Sözdizimi
conic-gradient(
[ from <angle> ]? [ at <position> ]?,
<angular-color-stop-list>
)
İşte web sitenizin kullanıcı arayüzünü bir üst seviyeye çıkarabilecek harika arka plan gradyan örnekleri.
1. Tozlu Çim
Yukarıdaki degradeyi oluşturmak için aşağıdaki CSS’yi kullanın:
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
2. Kumdan Maviye
Yukarıda gösterilen degradeyi oluşturmak için aşağıdaki CSS kodunu kullanın:
background-image: linear-gradient(to right, #DECBA4, #3E5151);
3. Kye Meh
Yukarıdaki doğrusal gradyan arka planını oluşturmak için aşağıdaki CSS kodunu kullanın:
background-image: linear-gradient(to right, #8360c3, #2ebf91);
4. Amin
Yukarıdaki degradeyi oluşturmak için aşağıdaki CSS’yi kullanın:
background-image: linear-gradient(to right, #8e2de2, #4a00e0);
5. Rahatlatıcı Kırmızı
Yalnızca tek bir CSS kodu satırıyla web sitenize güzel, göz alıcı bir arka plan gradyanı ekleyebilirsiniz:
background-image: linear-gradient(to right, #fffbd5, #b20a2c);
6. Yüce Işık
Degrade bir arka plan oluşturmak için bu CSS’yi kullanmayı deneyin. Kullanımı kolaydır ve sitenize bir stil dokunuşu katacaktır:
background-image: linear-gradient(to right, #fc5c7d, #6a82fb);
7. Megatron
3 renkli bir degrade oluşturmak için aşağıdaki CSS’yi kullanın:
background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
8. Mavi Ahududu
Basit bir mavimsi doğrusal gradyan arka planı oluşturmak için aşağıdaki CSS’yi kullanın:
background-image: linear-gradient(to right, #00b4db, #0083b0);
9. Premium Karanlık
Bu doğrusal degrade CSS koduyla yukarıda gösterilen degrade görünümünü elde edin:
background-image: linear-gradient(to right, #434343 0%, black 100%);
10. Kristal
Yukarıdaki degradeyi oluşturmak için aşağıdaki CSS’yi kullanın:
background-image: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%);
11. Lavrenyum
Yukarıdaki degradeyi oluşturmak için aşağıdaki CSS’yi kullanın. Bu kodu, farklı renklerde başka degradeler oluşturmak için de kullanabilirsiniz.
background-image: linear-gradient(to right, #0f0c29, #302b63, #24243e);
12. Ohmutluluk
Bu kullanımı kolay CSS gradyan arka planıyla sitenize bir stil dokunuşu katın:
background-image: linear-gradient(to right, #00b09b, #96c93d);
13. Gerilme
Web sitenize biraz pizzazz eklemek mi istiyorsunuz? Degrade bir arka plan oluşturmak için bu CSS’yi kullanmayı deneyin:
background-image: linear-gradient(to right, #870000, #190a05);
14. Sarı Mango
Yukarıdaki radyal degrade arka planını oluşturmak için aşağıdaki CSS’yi kullanın:
background-image: radial-gradient(circle farthest-side, #fceabb, #f8b500);
15. Sulu Çim
Bu CSS koduyla HTML öğelerinizi bir çırpıda dönüştürün:
background-image: radial-gradient( circle 759px at -6.7% 50%, rgba(80,131,73,1) 0%, rgba(140,209,131,1) 26.2%, rgba(178,231,170,1) 50.6%, rgba(144,213,135,1) 74.1%, rgba(75,118,69,1) 100.3% );
16. Pembe Balık
Yukarıdaki doğrusal degrade arka planını oluşturmak için aşağıdaki CSS’yi kullanın:
background-image: linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114));
17. Deniz Lordu
Yukarıdaki degradeyi oluşturmak için aşağıdaki CSS’yi kullanın:
background-image: linear-gradient( 109.6deg, rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1% );
18. Kiraz Çiçeği
Bu CSS kodu, kiraz renginde bir gradyan oluşturacaktır. Farklı renklerde başka degradeler oluşturmak için de kullanabilirsiniz:
background-image: linear-gradient(25deg,#d64c7f,#ee4758 50%);
19. Temiz Hava
Yukarıda gösterilen degradeyi oluşturmak için aşağıdaki CSS kodunu kullanın:
background-image: linear-gradient( 95.2deg, rgba(173,252,234,1) 26.8%, rgba(192,229,246,1) 64% );
20. Yıldız
Dikkat çekeceğinden emin bir mavi gradyan oluşturmak için aşağıdaki CSS’yi kullanın:
background-image: radial-gradient( circle farthest-corner at 22.4% 21.7%, rgba(4,189,228,1) 0%, rgba(2,83,185,1) 100.2% );
21. Öğleden Alacakaranlığa
HTML öğelerinizi tek bir CSS kodu satırıyla dönüştürün ve kolaylıkla güzel bir arka plan gradyanı ekleyin:
background-image: linear-gradient(to right, #ff6e7f, #bfe9ff);
22. Gündoğumu
Web siteniz, yalnızca bir satır CSS kodu ekleyerek gün doğumu gradyanına sahip olabilir:
background-image: linear-gradient(to right, #ff512f, #f09819);
23. Orman
Yukarıdaki degradeyi oluşturmak için aşağıdaki CSS’yi kullanın. Bunu, farklı renklerle başka degradeler oluşturmak için de kullanabilir ve sitenizi özelleştirmek için size sonsuz olanaklar sağlayabilirsiniz.
background-image: linear-gradient(to right, #5a3f37, #2c7744);
24. Süpermen
Bu doğrusal degrade CSS koduyla yukarıda gösterilen degrade görünümünü elde edin:
background-image: linear-gradient(to right, #0099f7, #f11712);
25. Derin Deniz Uzayı
Arka planın profesyonel ve gösterişli görünmesini sağlamak için aşağıdaki CSS’yi kullanın:
background-image: linear-gradient(to right, #2c3e50, #4ca1af);
26. Kraliyet
Yukarıdaki doğrusal degrade arka planını oluşturmak için aşağıdaki CSS’yi kullanın:
background-image: linear-gradient(to right, #141e30, #243b55);
27. Turuncu Mercan
Yukarıdaki degradeyi oluşturmak için aşağıdaki CSS’yi kullanın:
background-image: linear-gradient(to right, #ff9966, #ff5e62);
28. Eski Şarap
Aşağıdaki CSS kodunu kullanarak koyu pembe bir degrade stili oluşturabilirsiniz:
background-image: linear-gradient(to right, #33001b, #ff0084);
29. Sabah Gökyüzü
Açık bir sabah gökyüzü gradyanı oluşturmak için aşağıdaki CSS’yi kullanın:
background-image: linear-gradient(to right, #b6fbff, #83a4d4);
30. Karamel
Bu CSS doğrusal gradyan arka planıyla arka planınızı öne çıkarın:
background-image: linear-gradient(to right, #FFD194, #D1913C);
Gradyanlarla Web Sayfanızı Zarif Hale Getirin
Degradeleri, web sayfanızın arka plan, kenarlıklar, simgeler, düğmeler, metin, alt çizgi, liste madde işaretleri vb. gibi çeşitli öğeleriyle birlikte kullanabilirsiniz. Sitenizin tasarımını yeni zirvelere taşıyın.
Web sayfanızın bazı mülayim öğelerine hayat eklemek istiyorsanız, box-shadow CSS özelliğini deneyebilirsiniz. Bu, elemanlara modern bir görünüm verecektir.