Merhabalar..ALLAH’ın selamı üzerinize olsun..
Linear Graident özelliği CSS3 ile gelen bir özelliktir.Bazı
sayfalarda arkaplanlarda renk geçişlerinin olduğunu görürsünüz.(Açık maviden
beyaza vb.).İşte bunu Linear-Gradient özelliği ile yapacağız.Bugüne kadar bu
geçişleri photoshop, fireworks gibi grafik programlarıyla yapıp CSS’te
background-image özelliğini kullanarak veriyorduk.İşte Linear Gradient özelliği
ile bu imageleri oluşturmamıza gerek kalmadan bir iki satırla bu işi
halledeceğiz.
Hemen bir örnek verelim : (Google Chrome ve Safari İçin)
HTML dosyasında head etiketleri arasına aşağıdaki kodları
yazalım:
-------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="deneme.css"
rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background: -webkit-gradient(linear, left top,left bottom,
from(#000), to(#FFF));
}
</style>
</head>
<body>
</body>
</html>-
-------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------
 |
| Linear Gradient Uygulanmış Örnek (Maviden Beyaza) |
Burada –webkit-gradient dediğimizde bu özelliğin Chrome ve
Safari tarayıcılarında çalışacağını belirtmiş oluruz.Linear geçişin olacağını
belirtir.Left top,Left bottom dediğimizde ise geçişin sol üst köşeden sol alt
köşeye olacağını belirtmiş oluruz.From(#000) dediğimiz yani siyah renkten
to(#FFF) beyaz renge geçiş olduğunu gösterir.Eğer Left top,left bottom yerine
left bottom,right bottom deseydik geçişin soldan sağa doğru olduğunu görürdük.
HTML dosyasını çalıştırdığınızda arkaplanın siyah renkten
beyaz renge doğru geçiş yaptığını göreceksiniz.
Bir de bu özelliği Mozilla Firefox tarayıcında çalıştırmak
için kullanalım:
-------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="deneme.css"
rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background:-moz-linear-gradient(top,#000,#FFF);
}
</style>
</head>
<body>
</body>
</html>
-------------------------------------------------------------------------------------------------
Şeklinde kullanılır.Burada top geçişin yukarıdan
başlayacağını belirtir.Left dersek eğer geçiş soldan sağa doğru olacaktır.
Bu özellik ile Linear için image oluşturmamıza gerek
kalmıyor.Hem uğraşmamıza gerek kalmıyor hem de sunucuda image barındırmamıza
gerek kalmıyor. CSS’de bir iki satır kod yazarak bu işi hallediyoruz. Eğer
sayfanızda böyle bir geçiş yapmayı düşünüyorsanız CSS3’ün Linear Gradient
özelliğine bakmanızı tavsiye ediyorum.
0 yorum:
Yorum Gönder