CSS Kullanarak Renk Geçişi Yapımı?

CSS Kullanarak Renk Geçişi Yapımı? Merhaba arkadaşlar, Bu dersimizde Css kullanarak Gradient yapımını öğreneceğiz. Çoğunuza Gradient photoshop programından çağrışı yapmış olabilir. Photoshop programında da gradient kullanması mevcuttu ve hazırdır. Kısaca Gradient’i açıklayacak olursak; iki rengin birbirine geçiş sırasında renk tonlarının karışımında yumuşak geçiş halidir.     Yani iki rengi yan yana koyduğunuzda kesik bir çizgi oluşacaktır. Photoshop gradient niteliği o iki renk geçişinden doğan renk kesitliğini yoktur ediyor tonlar arası geçişlerde ayrım edilemeden renk geçişi yapmanızı sağlıyor.   index.html dosyasının kodları aşağıdaki bu gibi olmalıdır… 1 <html> 2 <head> üç <link rel=”stylesheet” href=”style.css”/> 4 <title></title> 5 </head> altı <body> 7 <section id=”genel”> 8 <div id=”deneme”></div> 9 </section> on </body> 11 </html> style.css dosyasının kodları aşağıdaki bu gibi olmalıdır…   1 #genel {display:-webkit-box; 2 -webkit-box-align:center; üç -webkit-box-orient:vertical; 4 } 5 #deneme{ altı width: 100px; 7 padding: 60px; 8 margin: 50px; 9 border: 3px solid black; on background:-webkit-linear-gradient(left,blue,red,yellow); 11 -webkit-border-radius:10px; 12 } /* #genel icindeki display:-webkit-box; -webkit-box-align:center; -webkit-box-orient:vertical; kodları pozisyon Verme Kodlarıdır center:ortala vertical: dik siralama/ / Renk Geçişi / / -webkit-linear-gradient: renk geçişini veren kod dur () içi left:soldan değişmeye başla blue:önce mavi ol sonra red: kırmızıya geç en son yellow: sarı ol ve bırak/ / -webkit-border-radius:kenarları yuvarla*/


Yapılan Yorumlar
Erdem OFLAZ

Bir mum, diğer mumu tutuşturmakla ışığından bir şey kaybetmez.
 Kategoriler
 Popüler yazılar