CSS Gradyanları

ByESiNTi · 23 Tem 2021

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

CSS degradeleri, iki veya daha fazla belirtilen renk arasında yumuşak geçişler görüntülemenize olanak tanır.

CSS iki tür degrade tanımlar:

Doğrusal Gradyanlar (aşağı/yukarı/sola/sağa/çapraz olarak gider)
Radyal Gradyanlar (merkezlerine göre tanımlanır)

CSS Doğrusal Gradyanlar

Doğrusal bir gradyan oluşturmak için en az iki renk durağı tanımlamanız gerekir. Renk durakları, aralarında yumuşak geçişler oluşturmak istediğiniz renklerdir. Degrade efektiyle birlikte bir başlangıç noktası ve yön (veya açı) da ayarlayabilirsiniz.

Sözdizimi

background-image: linear-gradient( direction, color-stop1, color-stop2, ...);
Yön - Yukarıdan Aşağıya (bu varsayılandır)

Aşağıdaki örnek, yukarıdan başlayan doğrusal bir gradyanı göstermektedir. Kırmızıyla başlar, sarıya döner:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>

<div id="grad1"></div>

</body>
</html>

Yön - Soldan Sağa

Aşağıdaki örnek, soldan başlayan doğrusal bir gradyanı göstermektedir. Kırmızıyla başlar, sarıya döner:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Left to Right</h1>
<p>This linear gradient starts red at the left, transitioning to yellow (to the right):</p>

<div id="grad1"></div>

</body>
</html>

Yön - Çapraz

Hem yatay hem de dikey başlangıç konumlarını belirterek çapraz olarak bir degrade oluşturabilirsiniz.

Aşağıdaki örnek, sol üstten başlayan (ve sağ alta giden) doğrusal bir degradeyi göstermektedir. Kırmızıyla başlar, sarıya döner:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Diagonal</h1>
<p>This linear gradient starts red at top left, transitioning to yellow (at bottom right):</p>

<div id="grad1"></div>

</body>
</html>

Açıları Kullanma

Degradenin yönü üzerinde daha fazla kontrol istiyorsanız, önceden tanımlanmış yönler (aşağıya, yukarıya, sağa, sola, sağ alta vb.) yerine bir açı tanımlayabilirsiniz. 0deg değeri "top"a eşdeğerdir. 90deg değeri "sağa" eşdeğerdir. 180 derecelik bir değer "alt"a eşdeğerdir.

Sözdizimi

background-image: linear-gradient( angle, color-stop1, color-stop2);
Aşağıdaki örnek, doğrusal gradyanlarda açıların nasıl kullanılacağını gösterir:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(0deg, red, yellow);
}

#grad2 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(90deg, red, yellow);
}

#grad3 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(180deg, red, yellow);
}

#grad4 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(-90deg, red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradients - Using Different Angles</h1>

<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>

</body>
</html>

Çoklu Renk Durakları Kullanma

Aşağıdaki örnek, birden çok renk durağına sahip doğrusal bir degradeyi (yukarıdan aşağıya) göstermektedir:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow, green);
}

#grad2 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}

#grad3 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red 10%, green 85%, blue 90%);
}
</style>
</head>
<body>

<h1>Linear Gradients - Multiple Color Stops</h1>
<p><strong>Note:</strong> Color stops are spaced evenly when no percents are specified.</p>

<h2>3 Color Stops (evenly spaced):</h2>
<div id="grad1"></div>

<h2>7 Color Stops (evenly spaced):</h2>
<div id="grad2"></div>

<h2>3 Color Stops (not evenly spaced):</h2>
<div id="grad3"></div>

</body>
</html>

Aşağıdaki örnek, gökkuşağının rengi ve bir miktar metinle doğrusal bir degradenin (soldan sağa) nasıl oluşturulacağını gösterir:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 55px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body>

<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
Rainbow Background
</div>

</body>
</html>

Şeffaflığı Kullanma

CSS gradyanları, solma efektleri oluşturmak için kullanılabilecek şeffaflığı da destekler.

Saydamlık eklemek için renk duraklarını tanımlamak için rgba() işlevini kullanırız. rgba() işlevindeki son parametre 0 ile 1 arasında bir değer olabilir ve rengin şeffaflığını tanımlar: 0 tam şeffaflığı gösterir, 1 tam rengi gösterir (saydamlık yok).

Aşağıdaki örnek, soldan başlayan doğrusal bir gradyanı göstermektedir. Tamamen şeffaf başlar, tam renkli kırmızıya geçer:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>

<h1>Linear Gradient - Transparency</h1>
<p>To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).</p>

<div id="grad1"></div>

</body>
</html>

Doğrusal gradyanı tekrarlama

Yinelenen-doğrusal-gradyan() işlevi, doğrusal gradyanları tekrarlamak için kullanılır:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

#grad2 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%);
}

#grad3 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%);
}

#grad4 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%);
}
</style>
</head>
<body>

<h1>Repeating Linear Gradient</h1>

<div id="grad1"></div>

<p>A repeating gradient on 45deg axe starting red and finishing green:</p>
<div id="grad2"></div>

<p>A repeating gradient on 190deg axe starting red and finishing green:</p>
<div id="grad3"></div>

<p>A repeating gradient on 90deg axe starting red and finishing green:</p>
<div id="grad4"></div>

</body>
</html>