Home-theater-designers
İ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
Background-image: gradient-type (direction, color1, color2);
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.
İlgili: 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
Background-image: linear-gradient(#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ı
Background-image: linear-gradient(to bottom, #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 birlikte 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.
video dxgkrnl fatal_error windows 10
Ç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ı
Background-image: linear-gradient(to bottom right, #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 yapar.
Ç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
Background-image: linear-gradient(to right, #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ı
Background-image: radial-gradient( circle, #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.
bu sunucuda /index.html'ye erişim izniniz yok.
Radyal Gradyan Başlangıç Konumunu Değiştirme Örneği
Background-image: radial-gradient(circle at top right, #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 eklenmesi 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 degrade gibi, radyal degrade de iki renk daha kullanabilir, en büyük fark, doğrusal degradenin düz bir çizgide degradeye eklendiği yerde, radyal degradenin dış kenarda yeni renkler eklemesidir.
Çok Renkli Radyal Gradyan Örneği
Background-image: radial-gradient(circle, #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 iş gibi gelebilir, ancak bir CSS arka plan gradyanı oluşturmanın temellerini anladığınızda, bir sonraki belirgin adım, CSS gradyanlarınızı nasıl daha benzersiz hale getireceğinizi öğrenmektir.
facebook android'e hd video yükleme
Varsayılan olarak, bir degradedeki renkler, her bir rengin bir sonrakine yumuşak bir şekilde geçiş yapmasıyla 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
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);
Yukarıdaki kod satırı aşağıdaki çıktıyı üretecektir:
Yukarıdaki çıktı, geleneksel konumu yerine degradedeki ilk rengin %30 noktasında duran doğrusal degradedeki ikinci rengi gösterir ve ikinci renk aynı zamanda degradedeki son renk olduğundan, doğal olarak sonuna kadar uzanır. .
Yukarıdaki koddaki %30'u ilk rengin sonuna yerleştirirseniz işler daha netleşir.
Doğrusal Degradeyi Özelleştirme Örneği 2
Background-image: linear-gradient( to right, #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 gradyanda yukarıdaki sonuçların aynısını elde etmek için yapmanız gereken tek şey gradyan tipini ve yönünü değiştirmektir.
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.
Paylaş Paylaş Cıvıldamak E-posta 27 Şık CSS Arka Plan Gradyan ÖrnekleriDüz renkler çok geçen yıl. Gradyanlar içeride! Ama onları CSS'de nasıl yaratırsınız?
Sonrakini Oku İlgili konular- Programlama
- Web Geliştirme
- Web Tasarım
- CSS
Kadeisha Kean, Full-Stack Yazılım Geliştirici ve Teknik/Teknoloji Yazarıdır. En karmaşık teknolojik kavramların bazılarını basitleştirme konusunda belirgin bir yeteneğe sahiptir; herhangi bir teknoloji acemi tarafından kolayca anlaşılabilecek malzeme üretmek. Yazmak, ilginç yazılımlar geliştirmek ve dünyayı gezmek (belgeseller aracılığıyla) konusunda tutkulu.
Kadeisha Kean'dan Daha FazlaHaber bültenimize abone ol
Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!
Abone olmak için buraya tıklayın