Responsive Reklam Alanı

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*/
Paylaşmak Güzeldir
Yazar
Yazar
CSS Kullanarak Yazıya Gölge Verme İşlemi? Ücretsiz ve Ücretli Android Uygulamalarını İndirme?
1 Yorum
  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.

Bir yorum yazın
Siz de düşüncenizi belirtebilirsiniz.

Web Tasarım Blog Teması ES | Tüm hakları © Emre Supçin'e aittir.