Kullanıcı Kılavuzu İptal

Arka plana degradeler uygulama

Ara

Son güncelleme: 21 May 2021

CSS Tasarımcısı paneli ile web sitenizin arka planına degradeler uygulamayı ve bunları düzenlemeyi öğrenmek için bu konuyu kullanın.

CSS Tasarımcısı panelini kullanarak, web sitelerinizin arka planına degradeler uygulayabilirsiniz. Degrade özelliği, arka plan kategorisinde kullanılabilir.

Degradeler panelini açmak için gradient özelliğinin bitişiğindeki öğesini tıklatın. Bu paneli kullanarak şunları yapabilirsiniz:

Farklı renk modelleri (RGBa, Onaltılı veya HSLa) arasından renk seçin. Ardından farklı renk birleşimlerini renk örnekleri olarak kaydedin.
- Yeni rengi orijinal renge sıfırlamak için orijinal rengi (K) tıklatın.
- Renk örneklerinin sırasını değiştirmek için, renk örneklerini gerekli konuma sürükleyin.
- Bir renk örneğini silmek için renk örneğini panelden dışarı sürükleyin.
Karmaşık degradeler oluşturmak için renk duraklarını kullanın. Bir renk durağı oluşturmak için varsayılan renk durakları arasında herhangi bir yeri tıklatın. Bir renk durağını silmek için renk durağını panelden dışarı sürükleyin.
Doğrusal degrade için açıyı belirtin.
Deseni yinelemek için arka plan yineleme özelliğini düzenleyin.
Özel degradeleri renk örnekleri olarak kaydedin.

Şu kodu anlayalım:

background-image: linear-gradient(57deg,rgba(255,255,255,1.00) 0%,rgba(21,8,8,1.00) 46.63%,rgba(255,0,0,1.00) 100%)

57deg: Doğrusal degradenin açısını belirtir.
rgba(255, 255, 255, 1.00): İlk renk durağının rengi
0%: Renk durağını belirtir

Not:

Dreamweaver'da renk durakları için yalnızca '%' değerleri desteklenir. Px veya em gibi başka değerler kullanırsanız, Dreamweaver bunları 'nil' olarak okur. Ayrıca Dreamweaver, CSS renklerini desteklemez ve kodda bu renkleri belirtirseniz, bu renkler 'nil' olarak okunur.

Web tarayıcılarında degradeler oluşturma

Arka plan olarak degradeler kullandığınızda, farklı web tarayıcılarında uygun şekilde degradeler oluşturmak için Dreamweaver'ı yapılandırabilirsiniz. Dreamweaver, koda web tarayıcılarının degradeleri uygun şekilde görüntülemesini sağlayan uygun satıcı önekleri ekler.

Dreamweaver, w3c formatıyla birlikte şu satıcı öneklerini yazabilir:

Webkit
Firefox
Opera

Varsayılan olarak Dreamweaver, Webkit ve Dreamweaver Canlı Görünüm için satıcı öneklerini yazar. Tercihler iletişim kutusundan (Tercihler > CSS Stilleri) diğer gerekli satıcıları seçebilirsiniz.

Not:

Kutu gölgeleri için, Tercihler altından seçili olup olmadıklarına bakılmaksızın Webkit ve w3c önekleri her zaman oluşturulur.

Degradeler üzerindeki tüm değişiklikler de satıcıya özgü sözdizimlerinde yansıtılır. Satıcıya özgü sözdizimleri içeren varolan bir dosyayı Dreamweaver CC'de açarsanız, Tercihler'de gerekli satıcı öneklerini seçtiğinizden emin olun. Varsayılan olarak Dreamweaver, degradeler kullandığınızda veya değiştirdiğinizde yalnızca Webkit ve Dreamweaver Canlı Görünüm ile ilgili kodu güncelleştirir. Bu nedenle, kodunuzdaki diğer satıcıysa özgü sözdizimleri güncelleştirilmez.

Arka plan görüntülerini ve degradelerini takas etme

Arka plan görüntülerinin ve degradelerinin sırasını (kodda görüntülenme sırasını) tek bir tıklatmayla değiştirebilirsiniz.

CSS Tasarımcısı'nda url veya degrade özelliğinin bitişiğindeki oku tıklatın.

Not:

Dreamweaver CC, arka planı takas etme özelliğinin temel bir uygulamasını içerir. Birden çok değer veya resminiz olduğunda, takas etme işlemi beklendiği gibi çalışmayabilir. Ayrıca arka plana bir görüntü, ikinci bir görüntü ve sonra bir degrade uyguladığınızı varsayın. Degradelerin takas edilmesi, şu sıralamayla sonuçlanır: degrade, ikinci görüntü, birinci görüntü.