Giriş Eğimi

Sayfaya giriş olarak düz bir renk veya degrade eklemek için intro-plugin kullanın.

Sayfa Intro Gradyanı

Sayfa * intro eklentisi * sayfanın en üstünde bir giriş olarak bir görüntü, renk veya degrade eklemenizi sağlar. Giriş, menünün arkasında veya altında, herhangi bir yükseklikte görüntüleyebilir ve sayfa içeriği öğeleri ekleyebilirsiniz. Bu örnekte, menünün aşağısında 300px yükseklikte görüntülemek için bir ** gradyan ** ayarladık.

** sayfa ›eklentileri› sayfa intro ** eklentinizdeki gradyanları doğrudan ** kaynak ** alanına ekleyin. CSS3 gradyanları hakkında daha fazla bilgi edinin burada ve burada. * Tarayıcı önekleri olmadan CSS geçişlerini ekle!

Seçenekler

Kaynak
İntro kaynağını fotoğraf, degrade veya düz renk olarak ayarlayın.

Girişte Göster
Giriş alanında başlık, açıklama ve içerik göstermeyi seçin.

Yükseklik
Giriş alanının yüksekliğini piksel veya %'de olarak ayarlayın. Devre dışı ise, yükseklik otomatik olarak resmin boyutuna göre ayarlanır. Degradeler, renkler ve yinelenen arka plan desenleri için her zaman bir yükseklik kullanmalısınız.

Sabitleme
Kaydırma sırasında arka plan görüntüsünün sabit kaldığı yerde serin bir efekt oluşturur.

Yerleşim Menüsü
Etkinleştirildiğinde, menü sayfanın üstüne eklenmiş olan girişin üzerine yerleştirilir. Devre dışı bırakıldığında, intro, menünün altında eklenir.


Birkaç degrade örneği

radial-gradient(ellipse farthest-corner at 50% 100%, #78a642, #273716 100%)
radial-gradient(circle, gold, darkorange)
radial-gradient(ellipse closest-side, gold, darkorange)
radial-gradient(circle,salmon,brown)
repeating-linear-gradient(gold 0px, darkorange 1px)
repeating-linear-gradient(#AAA 0px, transparent 1px)
radial-gradient(closest-side, rgba(255,215,0,1), transparent), repeating-linear-gradient(gold 0px, darkorange 1px)
linear-gradient(45deg, red, orange, yellow)
radial-gradient(circle farthest-side, gold, gold 50px, transparent), repeating-linear-gradient(-45deg, gold, gold 5px, darkorange 5px, darkorange 10px)
background-image:repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px)
linear-gradient(to right,#FB2B69 ,#FF5B37 100%)
linear-gradient(45deg, hsla(280, 96%, 48%, 1) 0%, hsla(280, 96%, 48%, 0) 70%), linear-gradient(135deg, hsla(319, 91%, 42%, 1) 10%, hsla(319, 91%, 42%, 0) 80%), linear-gradient(225deg, hsla(17, 100%, 50%, 1) 10%, hsla(17, 100%, 50%, 0) 80%), linear-gradient(315deg, hsla(64, 96%, 41%, 1) 100%, hsla(64, 96%, 41%, 0) 70%)
linear-gradient(45deg, #555351 0%, #555351 5%, #8d7b6c 40%, #cc9d7a 70%, #fff9aa 100%)
linear-gradient(135deg, #325571 0%, #8e9fa4 38%, #decab2 66%, #f2d580 78%, #ffa642 100%)
linear-gradient(to left, #C02425 , #F0CB35)

İpucu! Degradeler arkaplan eklentisi şablonunda da kullanılabilir!


Bazı CSS Gradient Kaynakları

https://css-tricks.com/css3-gradients
http://www.hongkiat.com/blog/css3-linear-gradient
http://www.webcore-it.com/colorful-background
http://angrytools.com/gradient
http://uigradients.com
http://codepen.io/tumanova/pen/tkvmi?editors=0100