Geçiş rengi (gradient) nasıl yapılır ?

[ikatechws]

Arkadaşlar merhaba opencart ile yeni tanışan birisiyim sanırım da geç kalmış bir kişiyim. Neyse zararın neresinden dönersen kardır derler bir web site yapmaya çalışıyorum tabiki opencart ile çok sorum olacak zamanla burada umarım cevapsız kalmaz ve yanıtlanır..

Bir çok sitede görüyorum daha doğrusu arka plan renklerinde görüyorum. Renk tonu degrade şeklinde oluyor yani bir rengin bir başka renge dönüşmesi esnasında oluşan renk geçişi. Koyudan açığı gibi..

bu renk tonunu mesela gerek arka planda olsun gerek ise üst menüde olsun istediğim bölümde css kodları ile nasıl yapabilirim. Yapmam gereken css kod nedir ayrıca bu kod exp. için ayrı mozilla için ayrı mı oluyor .. Bu konuda yardımlarınızı bekliyorum

 

[ozansenkal]

en kolay yöntemi bence zeminin arka planına 2-3 pixel kalınlığında bir png yerleştirip sürekli olarak tekrar ettirmek. yani örnek olarak şu şekilde yapılabilir:

background: url("../image/arka-plan.png") repeat-x

bu şekilde tarayıcı uyumunu düşünmemize gerek kalmıyor.

ama ben ille de bunu css ile yapmak istiyorum diyorsak o zaman biraz daha uğraşmamız gerekiyor. örnek olarak

chrome-safari:

.gradient {-webkit-gradient(linear, left top, left bottom, from(#354bb8), to(#1a3366));}

firefox:

.gradient {background: -moz-linear-gradient(top, #354bb8, #1a3366);}

ve tabi ki başımızın belası ie:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#354bb8', endColorstr='#1a3366');

hepsi bu, kolay gelsin.

 

[ikatechws]

ilginiz için teşekkür ederim css ile yaptırmamın sebebi resim ile siteyi kasmak istemeyişimdendir. bu arada bu kodlar css nin neresine konuluyor, birde örneğin ben bu css ile hem üst menü butonlarına hemde header bölümüne bu uygulamayı yapmak istiyorum css de hangi alanlarda değişiklik yapmam gerekiyor

 

[ozansenkal]

rica ederim.
inanın 2px kalınlığında bir png nin sitenin performansına etkisi yok denecek kadar az.

css kodlarının uygulanması konusunu da şöyle örneklendirebilirim. mesela opencart resmi demo adresini ele alalım, adresimiz http://demo.opencart.com . uygulama alanım üst menü, kullandığım araç ise chrome web tarayıcısının geliştirici araçları bölümü.

bu ekran görüntüsünde uygulama yapmak istediğim üst menüye sağ tıklayıp "öğeyi denetle" seçeneğini tıklıyorum

bu seçeneği tıkladığımda tarayıcının alt bölümünde "chrome geliştirici araçları" açılıyor. açılan bu alanda sitemizin html kodlarını görüyoruz, uygulama alanımız olan "menü div ini" seçiyoruz (2)

sonrasında ise menü div imizin stylesheet.css dosyamızda hangi satırlarda şekillendirildiğini görüyoruz (3)

bu dosyayı bir metin editörü ile açıyoruz

gördüğümüz gibi menü öğemiz 319. satırda başlayıp 332.satırda kapanıyor. elimizdeki kodları bu satır numaraları arasına uygulayıp dosyamızı kaydediyoruz. işlem tamam. menü öğemizin stili belirttiğimiz değerler ölçüsünde değişmiş oluyor.

 

[ikatechws]

şimdi anladım teşekkür ederim çok güzel bir çalışma olmuş