CSS ile Gradient (renk geçişi)

CSS3 ile gelen gradient ile artık tek renkli arkaplanlar yerine birden fazla renk geçişi sağlayan daha efektif görünüm sunan gradient kullanımını inceliyoruz.

CSS3 ile gelen gradient ile artık tek renkli arkaplanlar yerine birden fazla renk geçişi sağlayan daha efektif görünüm sunan gradient kullanımını inceliyoruz.


/* Tek renkli arkaplan kullanımı */

 background-color: red;



/* En basit gradient kullanımı - 2 farklı rengin geçişi*/

background: linear-gradient(red, blue);



/* Bir başka kullanım - standart olarak üstten aşağı olarak geçiş yapar*/

background: linear-gradient(red, white, orange);



/* Geçiş yönünün ayarlayalım */

background: linear-gradient(left, red, white, orange);



/* Geçiş yönünü daha detaylı ayarlayalım */

background: -webkit-linear-gradient(bottom left, red, white, orange);



/* Geçiş yönünü derece-açı ile kullanırsak istediğimiz şekilde ayarlayabiliriz */

background: -webkit-linear-gradient(30deg, red, white, orange);




Tarayıcıların hepsi şuan gradient'i tam manasıyla desteklemiyor olabilir bu durumda yukarıdaki gibi ön ek ile kullanmalıyız.

Chrome&Safari -> -webkit-linear-gradient

Mozilla ->-moz-linear..

Opera -> -o-linear..

Explorer -> -ms-linear..




Şimdi de hangi rengin ne kadar görüneceğini belirleyelim

/* Bu kod sağ alttan kırmızı ile başla %30 dan sonra sarı ile devam et diyor */

background: -webkit-linear-gradient(bottom right, red, yellow 30%);



/* örnek */

background: -webkit-linear-gradient(

      right, 

      #fffdc2,

      #fffdc2 15%,

      #d7f0a2 15%,

      #d7f0a2 85%,

      #fffdc2 85%

    );




Bu özellikleri radial-gradient ile kullanarak merkezden başlayan halkalar şeklinde bir arkaplan oluşturabilirsiniz.

background: -webkit-radial-gradient(red, blue);



/* Örnek */

background: -webkit-radial-gradient(circle,#fff 150px,#10A0C2);





Daha fazla ayrıntı için : http://dev.w3.org/csswg/css-images-3/ adresine bakabilirsiniz.

test class lı bir div oluşturun ve şu css özelliklerini verin ardından inceleyin.

.test {

    width: 300px;

    height: 200px;

    padding: 20px;

    border: 5px solid #333;

    margin: 0 auto;

    text-align: center;

    font: bold 30px Myriad Pro;

    color: purple;



    background: linear-gradient(135deg,  #ff2247, #1e3f9f);

    );




Bu dersi burada noktalıyoruz arkadarşlar bir sonraki derste görüşmek üzere iyi çalışmalar diliyorum.
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git