Bildiğiniz gibi CSS web sayfalarımız için vazgeçilmez kodlardır. CSS ile backgroun'da resim ekleyerek yaptığımız gradient'i resim yapmadan kodlar yapmayı sağlayan bir siteyle tanıştıracağım sizi.
Gradientin yönünü ise sağ taraftaki seçenekleri değiştirerek yapabilirsiniz. Yaptığınız değişiklikleri alt kısımdaki kodlarda anında görebilirsiniz. Bu kodları css sayfanıza ya da html sayfanızda gömülü ise oraya yapıştırırsanız sonucu görebilirsiniz.
Örneğin, alt tarafta main class'ının gradient kodunu görmektesiniz:
.main { background-image: linear-gradient(bottom, rgb(141,0,75) 21%, rgb(65,171,171) 76%); background-image: -o-linear-gradient(bottom, rgb(141,0,75) 21%, rgb(65,171,171) 76%); background-image: -moz-linear-gradient(bottom, rgb(141,0,75) 21%, rgb(65,171,171) 76%); background-image: -webkit-linear-gradient(bottom, rgb(141,0,75) 21%, rgb(65,171,171) 76%); background-image: -ms-linear-gradient(bottom, rgb(141,0,75) 21%, rgb(65,171,171) 76%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.21, rgb(141,0,75)), color-stop(0.76, rgb(65,171,171)) ); } |
Unutmamanız gereken bir şey var sadece belli tarayıcılar bu özelliği destekliyor.
- Firefox >=3.6
- Safari >=4
- Chrome
İnternet Explorer için filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); kodunu kullanmanız gerekmektedir.
Vay be! Bayağı bir kolaylık sağlıyormuş bu site. Böylesini ilk defa gördüm açıkçası..Teşekkürler.. Elinize ve emeğinize sağlık.
YanıtlaSil