CSS-Gradient-Yapımı_emresupcinMerhaba 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*/
Yazar
Yazar
Bilgisayar Programcısı, Web Tasarımcı, Üniversite Öğrencisi...
Twitter Facebook Google Linkedin Flickr YouTube

Önceki Yazı:CSS Kullanarak Yazıya Gölge Verme İşlemi?

Sonraki Yazı:Ücretsiz ve Ücretli Android Uygulamalarını İndirme?

YORUMLAR

Bu yazıya 1 yorum yapılmış.

  1. Yazar
    Barış

    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.

SİZ DE CEVAP YAZABİLİRSİNİZ
Bu yazı hakkında görüşünüzü belirtin.

ES Web Tasarım Web Tasarım Blog Teması Emre Supçin Bu tema ES Web Tasarım tarafından düzenlenmiştir. Hiçbir şekilde kopyalanamaz.