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*/- emresupcin
- Css
- 3 Ağustos 2013 - 18:03
- 1 Yorum
- 3197 Görüntülenme
css gradient yapımı css renk geçişi css renk geçişleri gradient gradient nedir gradient yapımı
Merhaba bilgiler için çok teşekkürler fakat benim aradığım şey yada yapmak istediğim şey; elimde bir ürün var ama bu ürünlerin 5 veya 6 renk var yanda renk kutuları olacak hangi rengi seçersem o ürün o renk olacak veya resim şeklinde değişecek yardımcı olabilir misiniz mailemede bilgi atarsanız sevinirim.