Web Sitesi Öğelerini CSS Arka Plan Gradyanıyla Stillendirin

İnternette birkaç dakikadan fazla kaldıysanız, bir CSS gradyanı ile karşılaşmanız olasıdır. CSS arka plan özelliği, bir dizi farklı stil oluşturmak için kullanılabilir ve en ilgi çekici türlerden biri degrade değeriyle neler yapabileceğidir.

Farklı CSS gradyanlarının nasıl tasarlanacağını ve oluşturulacağını bilmek, herhangi bir yazılım tasarımcısı veya geliştiricisi için bir varlıktır. Bu makaleden, projelerinize CSS gradyanlarını dahil etmeye başlamak için bilmeniz gereken her şeyi öğreneceksiniz.

CSS Gradyanı Nedir?

Bir CSS gradyanı, temelde birinden diğerine sorunsuz geçiş yapan iki veya daha fazla rengin birleşimidir. Bir CSS gradyanının geçiş durumu, kullanılan gradyan tipine bağlıdır. Yazılım tasarımında yaygın olarak kullanılan iki ana gradyan türü vardır: doğrusal ve radyal.

Ancak, daha az popüler olan ve konik gradyan olarak bilinen üçüncü bir gradyan türü vardır.

CSS Degradeleri Sözdizimi

Arka plan görüntüsü: degrade türü (yön, renk1, renk2);

CSS gradyanı, arka plan görüntüsü CSS özelliğine atanmalıdır. Gradyan tipi birkaç tipten biri olabilir; lineer-gradyan, radyal-gradyan veya konik-gradyan. Degrade türünü, degradenin geçiş yönünü ve degradeye dahil edilecek renkleri içeren açma ve kapama parantezleri takip eder.

İlişkili: CSS'de Arka Plan Resmi Nasıl Ayarlanır

Yukarıdaki örnekte iki renk gösterilmektedir, ancak bir degrade birkaç farklı renk içerebilir. Tek gereksinim, listedeki her rengin virgülle ayrılmasıdır.

Doğrusal Gradyan Nedir?

Doğrusal gradyan, en popüler CSS gradyanıdır. İki veya daha fazla renk kullanarak yatay, dikey veya çapraz geçiş degradesi oluşturur.

CSS Doğrusal Gradyan Örneği

Arka plan görüntüsü: doğrusal gradyan(#00A4CCFF, #F95700FF);

Yukarıdaki kod, aşağıdaki CSS gradyanını üretecektir:

Yukarıdaki örnekte atlanan degrade sözdiziminin önemli bir bileşeni vardır. Bu bileşen, degradenin geçiş yönüdür ve doğrusal degradenin varsayılan hizalaması dikey (yukarıdan aşağıya) olduğu için atlanmıştır; bu örnekte istenen çıktı budur.

Yukarıdaki kod, aşağıdaki kod satırıyla aynı sonucu verir. İkisi arasındaki tek fark, kodun yön bölümüdür.

Alt Doğrusal Gradyan Örneğinin Kullanılması

Arka plan görüntüsü: doğrusal gradyan (aşağıya, #00A4CCFF, #F95700FF);

Çıktıdan da görebileceğiniz gibi, yukarıdaki kod, üstte mavi ile başlayan ve ardından yavaşça altta turuncuya geçiş yapan bir degrade oluşturur. Renklerin sırasını tersine çevirmek isterseniz, basitçe değiştirebilirsiniz. tabanına ile en üste ve bu, degradenin yönünü tersine çevirerek aşağıdaki çıktıyı üretecektir:

Dikey hizalamaya benzer şekilde, bir degradenin yatay hizalaması, iki yön anahtar sözcüğü grubu kullanılarak elde edilebilir: sola ve sağa, sırasıyla aşağıdaki çıktıları üretecektir.

Çapraz Doğrusal Gradyan

Doğrusal bir gradyanın herhangi bir yönünde çapraz doğrusal gradyan geçişi elde etmek mümkündür. Bunu mümkün kılmak için bilmeniz gereken yalnızca dört özel anahtar kelime listesi vardır.

• Sağ alta
• Sol alta
• Sağ üstte
• Sol üste

Çapraz Doğrusal Gradyan Örneğinin Kullanılması

Arka plan görüntüsü: doğrusal gradyan (sağ altta, #00A4CCFF, #F95700FF);

Yukarıdaki örnek aşağıdaki çıktıyı üretir:

Yukarıdaki çıktıdan da görebileceğiniz gibi, doğrusal gradyan geçişini gradyanın sol üst kısmından sağ alt kısmına doğru çapraz yönde hareket ettirir.

Çok Renkli Doğrusal Gradyan

Doğrusal bir degrade iki veya daha fazla renge sahip olabilir, ancak bir degradede daha fazla renk nasıl görünür? Çok renkli bir doğrusal gradyan renk düzenlemesi, yönüne bağlıdır. Yatay yönde geçiş yapanlar, lineer degradenin tam yönüne bağlı olarak, her yeni rengin lineer degradenin solunda veya sağında görünecek.

Çok Renkli Doğrusal Gradyan Örneği

Arka plan görüntüsü: doğrusal gradyan (sağa doğru, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);

Yukarıdaki kod satırı aşağıdaki çıktıyı üretecektir:

Gördüğünüz gibi, her yeni renk degradenin sağına ekleniyor ve sonunda gökkuşağına dönüşecek olanı yaratıyor. Aynı çıktı dikey yönde de elde edilebilir; ancak, doğrusal gradyan üzerindeki belirli renk düzenlemesi, dikey yön anahtar sözcüğüne (yukarıya veya aşağıya) bağlı olacaktır.

Radyal Gradyan Nedir?

Radyal degrade, varsayılan olarak merkezden başlayan iki renkten oluşan spiral bir degrade oluşturur. Doğrusal gradyan dikey veya yatay olarak akan düz bir gradyan üretirken, radyal gradyan merkezden dış kenarlara doğru akan dairesel bir gradyan üretir.

Radyal Gradyan Örneğinin Kullanılması

Arka plan görüntüsü: radyal-gradyan (daire, #00A4CCFF, #F95700FF);

Yukarıdaki kod satırı aşağıdaki çıktıyı üretecektir:

Radyal Gradyan Merkezini Değiştirme

Varsayılan olarak bir radyal degrade, degradenin merkezinden başlar; ancak, birkaç anahtar kelimenin eklenmesiyle çıkış noktasını değiştirmek mümkündür.

Radyal Gradyan Başlangıç ​​Konumunu Değiştirme Örneği

Arka plan görüntüsü: radyal gradyan (sağ üstteki daire, #00A4CCFF, #F95700FF);

Yukarıdaki kod satırı aşağıdaki çıktıyı üretecektir:

Yukarıdaki çıktıdan da görebileceğiniz gibi, degrade artık merkez yerine sağ üst köşeden başlıyor. Bu değişiklik, anahtar kelimenin dahil edilmesi nedeniyle mümkündür. sağ üst yukarıdaki kodda. Radyal degradenin başlangıç ​​noktasını değiştirmek için aşağıdaki anahtar sözcük listesi de kullanılabilir:

• Sol üst
• Sağ alt
• Sol alt

Çok Renkli Radyal Gradyanlar

Doğrusal gradyan gibi, radyal gradyan da iki renk daha kullanabilir, en büyük fark şudur: doğrusal degradenin düz bir çizgide degradeye eklendiği yerde, radyal degrade dışta yeni renkler ekler. kenar.

Çok Renkli Radyal Gradyan Örneği

Arka plan görüntüsü: radyal gradyan (daire, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);

Yukarıdaki kod satırı aşağıdaki çıktıyı üretecektir:

Degradeleri Özelleştirme

Şimdiye kadar bir degradenin yönünü ve merkez noktasını nasıl değiştireceğinizi gördünüz, ancak bir degradeyi nasıl özelleştireceğinizi görmediniz. Bir degradeyi özelleştirmek çok fazla iş gibi gelebilir, ancak bir kez oluşturmanın temellerini anladığınızda bir CSS arka plan gradyanı, bir sonraki belirgin adım, CSS gradyanlarınızı nasıl daha fazla yapacağınızı öğrenmektir. benzersiz.

Varsayılan olarak, bir degradedeki renkler, her bir rengin bir sonrakine yumuşak bir şekilde geçişi ile eşit olarak dağıtılmış bir alan kaplar. Yani iki renk bir gradyan oluşturmak için birleştirilirse, her renk birinden diğerine geçerken mevcut alanın yarısını kaplar. Üç renk birleştirilirse, her renk mevcut alanın üçte birini kaplar.

Özelleştirilmiş bir degradeyle, bir rengin bir degradede kaplayacağı alan miktarını açıkça atayarak tanımlayabilirsiniz. renk durdurma konumu.

Doğrusal Degradeyi Özelleştirme Örnek 1

Arka plan görüntüsü: doğrusal gradyan (sağa, #00A4CCFF, #F95700FF %30);

Yukarıdaki kod satırı aşağıdaki çıktıyı üretecektir:

Yukarıdaki çıktı, degradedeki ilk rengin %30 noktasında duran doğrusal degradedeki ikinci rengi gösterir, ikinci renk aynı zamanda degradedeki son renk olduğu için doğal olarak son.

Yukarıdaki koddaki %30'u ilk rengin sonuna yerleştirirseniz işler daha netleşir.

Doğrusal Degradeyi Özelleştirme Örneği 2

Arka plan görüntüsü: doğrusal gradyan (sağa, #00A4CCFF %30, #F95700FF);

Yukarıdaki kod aşağıdaki çıktıyı üretecektir.

Yukarıdaki çıktı, degradedeki ikinci rengin %30 noktasında duran degradedeki ilk rengi açıkça gösterir. Yukarıdaki örnekle birlikte bu örnek, renk durdurma özelleştirmesini anlamanız için daha kolay hale getirmeye yardımcı olacaktır.

Radyal degradeyi özelleştirme, doğrusal degradeyle aynı şekilde yapılır. Radyal degradede yukarıdaki sonuçların aynısını elde etmek için yapmanız gereken tek şey, degrade türünü ve yönünü değiştirmek.

CSS Gradyanları Oluşturmak Hiç Bu Kadar Kolay Olmamıştı

Bu öğretici makale, doğrusal ve radyal degradeleri belirleme ve oluşturma araçları sağlar. Bu noktaya geldiyseniz, bir eğimin yönünü ve merkezini nasıl değiştireceğinizi öğrendiniz. Ek olarak, artık CSS gradyanlarını özelleştirme ve benzersiz arka plan gradyanları oluşturma becerisine sahipsiniz.

Ancak, doğrudan yeni ve benzersiz degradeler oluşturmaya başlamak istemiyorsanız, önceden var olan harika görünen bazı degradeler oluşturarak başlayabilirsiniz.

27 Şık CSS Arka Plan Gradyan Örnekleri

Düz renkler çok geçen yıl. Gradyanlar içeride! Ama onları CSS'de nasıl yaratırsınız?

Sonrakini Oku

Yazar hakkında

Tüm Hikayeyi Okumak için Genişletin