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 kullanımı mevcuttu ve hazırdır. Kısaca Gradient’i açıklayacak olursak; iki rengin birbirine geçiş esnası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 özelliği o iki renk geçişinden doğan renk kesitliğini yok ediyor tonlar arası geçişlerde fark edilemeden renk geçişi yapmanızı sağlıyor.
index.html dosyasının kodları aşağıdaki gibi olmalıdır…
1 <html> 2 <head> 3 <link rel="stylesheet" href="style.css"/> 4 <title></title> 5 </head> 6 <body> 7 <section id="genel"> 8 <div id="deneme"></div> 9 </section> 10 </body> 11 </html>
style.css dosyasının kodları aşağıdaki gibi olmalıdır…
1 #genel {display:-webkit-box;
2 -webkit-box-align:center;
3 -webkit-box-orient:vertical;
4 }
5 #deneme{
6 width: 100px;
7 padding: 60px;
8 margin: 50px;
9 border: 3px solid black;
10 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 sağlayan 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*/
Ben Yönetici Olarak İlk Kez Bir Site Açtım Ve Sizlere Yardımcı Olursam Ne Mutlu Bana
CevirÇevir EmojiEmoji