Bir kod düzenleyici
Kullanılacak renklerin alfanümerik kodları
bir web tarayıcısı
Aşama 1
Bu ders için "t" diyeceğim bir klasör oluşturarak başlayacağım.rucos_css"İçinde başka bir çağrı oluşturacağım"css”, İçlerinde ihtiyacım olacak dosyaları tutacağım.
Adım 2
Kod düzenleyicime gideceğim bu durumda Parantez kullanacağım ve yeni bir dosya oluşturmaya devam edeceğim "index.html"Klasörün köküne kaydedeceğim"hileler_css", ayrıca bir dosya oluşturacağım"stil.cssOluşturulan "css" klasörüne kaydedeceğim Aşama 1.
Aşama 3
"index.html" dosyamda temel html yapısını yazacağım ve stil sayfasına bir referans ekleyeceğim "stil.css"Önceki adımda yoldan tasarruf edin"css / stil.css”.
index.html'den gelen kod:
CSS Püf Noktaları - Degradeler
4. Adım
"index.html" dosyasına yeni bir dosya ekleyeceğimiçinde daha sonra sınıfı atayacağım "gradyan"Daha sonra dosyaya yazacağım"stil.css”.
index.html kodu şöyle görünecektir:
CSS hileleri
Adım 5
Şimdi dosya üzerinde çalışacağım "stil.css”, etiketin kaplayacağı boyutu tanımlayarak başlayacağım , %100 genişlik, %100 yükseklik ayarlayacağım, kenar boşlukları veya dolgusu olmayacağını beyan edeceğim ve ekrandaki toplam boyutu kaplayacak şekilde konumunun mutlak olacağını söyleyeceğim.
Style.css kodu:
gövde {genişlik: %100; yükseklik: %100; kenar boşluğu: 0 piksel; dolgu: 0 piksel; pozisyon: mutlak; }
6. Adım
Css'imizi düzenlemeye devam ediyoruz, şimdi sınıfı ekleyeceğim "gradyan"İçinde %100 yükseklikte ve eşit genişlikte gösterilmesi gerektiğini belirteceğim, özelliği içerecek bir arka plan seçiciye sahip olacağını yazacağım"doğrusal gradyan ()Aşağıdaki gibi çalışır …
Parantez içinde degrademizin sonunun nereye yönlendirildiğini ve bir uçtan diğer uca göstereceği renkleri belirtiyoruz. Sözdizimi şöyle bir şey olurdu:
arka plan: doğrusal gradyan (yön, renk durdurma1, renk durdurma2,…);Yön denilen konumda, eğimin ekranda izleyeceği yönü tanımlayacağız.sol üst = sol ve yukarı
sağ üst = sağ ve yukarı
sağ alt = aşağı ve sağa
sol alt = aşağı ve sola
sağ alta = sol üst köşeden başlayarak aşağı ve sağa
sol altta = sağ üst köşeden başlayarak aşağıda ve sağda
sağ üste = sol alttan başlayarak üst ve sağ
sol üste = sağ alttan başlayarak üst ve sol
Renklere gelince, tercihinize göre olanı seçebilirsiniz, bu durumda mavinin iki tonu ile beyazdan siyaha başlayacak bir degrade yapacağım.
O zaman css kodumuz aşağıdaki gibi olacaktır:
gövde {genişlik: %100; yükseklik: %100; kenar boşluğu: 0 piksel; dolgu: 0 piksel; pozisyon: mutlak; } .gradient {genişlik: %100; yükseklik: %100; arka plan: doğrusal gradyan (sağ altta, # fff, # 00e2ff, # 00f, # 000); } Sonuç aşağıdaki olacaktır.
Ancak bu dünyadaki her şey gibi, bunu çok daha kolay ve hızlı yapmanın başka yolları da var ve çok fazla yazmadan tarayıcımıza gidip şu web adresini arayabiliriz http: //www.colorzill… radient-editor /
İçinde önceden tanımlanmış ve ayrıca özelleştirebilecekleri bir dizi degrade bulacaklar, yalnızca birini seçmeleri, isterlerse tercihlerine göre ayarlamaları, ekranın sağ tarafında gösterilen ccs kodunu kopyalamaları ve içinde yazılı bulduklarımızı değiştirerek daha önce oluşturduğumuz "gradyan" katmanının içine yapıştırın. 6. adım. Bu seçeneği özellikle kullandığım için öneriyorum ve bize verdiği kod her tarayıcıda çalışmaya hazır.
Bu kodu kopyaladıktan sonra css'imize yapıştıracağız ve aşağıdaki gibi bırakacağız:
gövde {genişlik: %100; yükseklik: %100; kenar boşluğu: 0 piksel; dolgu: 0 piksel; pozisyon: mutlak; } .gradient {genişlik: %100; yükseklik: %100; arka plan: rgb (212,228,239); / * Eski tarayıcılar * / arka plan: -moz-doğrusal-gradyan (üst, rgba (212,228,239,1) %0, rgba (134,174,204,1) %64); / * FF3.6 + * / arka plan: -webkit-gradient (doğrusal, sol üst, sol alt, renk durdurma (%0, rgba (212,228,239,1)), renk durdurma (%64, rgba (134,174,204,1) ))); / * Chrome, Safari4 + * / arka plan: -webkit-linear-gradient (üst, rgba (212,228,239,1) %0, rgba (134,174,204,1) %64); / * Chrome10 +, Safari5.1 + * / arka plan: -o-doğrusal-gradyan (üst, rgba (212,228,239,1) %0, rgba (134,174,204,1) %64); / * Opera 11.10+ * / arka plan: -ms-doğrusal-gradyan (üst, rgba (212,228,239,1) %0, rgba (134,174,204,1) %64); / * IE10 + * / arka plan: doğrusal gradyan (aşağıya, rgba (212,228,239,1) %0, rgba (134,174,204,1) %64); / * W3C * / filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# d4e4ef', endColorstr = '# 86aecc', GradientType = 0); } Ve bu durumda sonuç şu olurdu.
BÜYÜTUmarım faydalı olur, daha fazla hile için beni takip etmeyi unutmayın…
Bu öğreticiyi beğendiyseniz, derecelendirmeyi unutmayın ve sorularınız veya yorumlarınız varsa aşağıya bırakın, size cevap vermekten memnuniyet duyarım. Selamlar … Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.
