CSS Gradients

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Φόντο κλίσης:

Gradient Backgrounds

Οι διαβαθμίσεις CSS σάς επιτρέπουν να εμφανίζετε ομαλές μεταβάσεις μεταξύ δύο ή περισσότερων καθορισμένων χρωμάτων.

Το CSS ορίζει τρεις τύπους διαβαθμίσεων:

  • Γραμμικές διαβαθμίσεις (κατεβαίνει/επάνω/αριστερά/δεξιά/διαγώνια)

  • Ακτινικές διαβαθμίσεις (που ορίζονται από το κέντρο τους)

  • Κωνικές διαβαθμίσεις (περιστρέφονται γύρω από ένα κεντρικό σημείο)

Γραμμικές διαβαθμίσεις CSS

Για να δημιουργήσετε μια γραμμική κλίση πρέπει να ορίσετε τουλάχιστον δύο χρωματικές στάσεις. Οι χρωματικές στάσεις είναι τα χρώματα που θέλετε να αποδώσετε ομαλές μεταβάσεις αναμεταξύ. Μπορείτε επίσης να ορίσετε ένα σημείο εκκίνησης και μια κατεύθυνση (ή μια γωνία) κατά μήκος με το φαινόμενο της κλίσης.

Σύνταξη

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Κατεύθυνση - Από πάνω προς τα κάτω (αυτή είναι η προεπιλογή)

Το παρακάτω παράδειγμα δείχνει μια γραμμική κλίση που ξεκινά από την κορυφή. Ξεκινά κόκκινο, μεταβαίνοντας σε κίτρινο:

top to bottom (default)

Παράδειγμα

  #grad {
  background-image: linear-gradient(red, yellow);
}

Δοκιμάστε το μόνοι σας →

<!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>

Κατεύθυνση - Από αριστερά προς τα δεξιά

Το παρακάτω παράδειγμα δείχνει μια γραμμική κλίση που ξεκινά από τα αριστερά. Ξεκινά κόκκινο, μεταβαίνοντας σε κίτρινος:

left to right

Παράδειγμα

  #grad {
  background-image: linear-gradient(to right, red , yellow);
}

Δοκιμάστε το μόνοι σας →

<!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>

Κατεύθυνση - Διαγώνιος

Μπορείτε να κάνετε μια κλίση διαγώνια καθορίζοντας τόσο την οριζόντια όσο και την κατακόρυφη αρχική θέση.

Το παρακάτω παράδειγμα δείχνει μια γραμμική κλίση που ξεκινά από πάνω αριστερά (και πηγαίνει κάτω δεξιά). Ξεκινά κόκκινο, μεταβαίνοντας σε κίτρινο:

top left to bottom right

Παράδειγμα

   #grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

Δοκιμάστε το μόνοι σας →

<!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>

Χρήση γωνιών

Εάν θέλετε περισσότερο έλεγχο στην κατεύθυνση της κλίσης, μπορείτε να ορίσετε μια γωνία, αντί για τις προκαθορισμένες κατευθύνσεις (προς τα κάτω, προς πάνω, προς τα δεξιά, προς τα αριστερά, προς τα κάτω δεξιά κ.λπ.). Μια τιμή 0 μοίρες ισοδυναμεί με "στην κορυφή". Μια τιμή 90 μοιρών ισοδυναμεί με "προς τα δεξιά". Μια τιμή του Οι 180 μοίρες ισοδυναμούν με "to bottom".

Σύνταξη

background-image: linear-gradient(angle, color-stop1, color-stop2);

Το ακόλουθο παράδειγμα δείχνει πώς να χρησιμοποιείτε γωνίες σε γραμμικές διαβαθμίσεις:

180deg

Παράδειγμα

  #grad {
  background-image: linear-gradient(180deg, red, yellow);
}

Δοκιμάστε το μόνοι σας →

<!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>

Χρήση πολλαπλών στάσεων χρωμάτων

Το παρακάτω παράδειγμα δείχνει μια γραμμική κλίση (από πάνω προς τα κάτω) με πολλαπλές χρωματικές στάσεις:

Παράδειγμα

  #grad {
  background-image: linear-gradient(red, yellow, green);
}

Δοκιμάστε το μόνοι σας →

<!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>

Το παρακάτω παράδειγμα δείχνει πώς να δημιουργήσετε μια γραμμική κλίση (από αριστερά προς τα δεξιά) με το χρώμα του ουράνιου τόξου και κάποιο κείμενο:

Rainbow Background

Παράδειγμα

   #grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

Δοκιμάστε το μόνοι σας →

<!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>

Χρήση Διαφάνειας

Οι διαβαθμίσεις CSS υποστηρίζουν επίσης τη διαφάνεια, η οποία μπορεί να χρησιμοποιηθεί για τη δημιουργία εφέ εξασθένισης.

Για να προσθέσουμε διαφάνεια, χρησιμοποιούμε τη συνάρτηση rgba() για να ορίσουμε τις στάσεις χρώματος. Η τελευταία παράμετρος στη συνάρτηση rgba() μπορεί να είναι μια τιμή από 0 έως 1, και αυτό ορίζει τη διαφάνεια του χρώματος: 0 υποδηλώνει πλήρη διαφάνεια, 1 υποδεικνύει πλήρες χρώμα (χωρίς διαφάνεια).

Το παρακάτω παράδειγμα δείχνει μια γραμμική κλίση που ξεκινά από τα αριστερά. Ξεκινά πλήρως διαφανές, μεταβαίνοντας σε πλήρες κόκκινο χρώμα:

Παράδειγμα

  #grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), 
rgba(255,0,0,1));
}

Δοκιμάστε το μόνοι σας →

<!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>

Επανάληψη μιας γραμμικής κλίσης

Η συνάρτηση repeating-linear-gradient() χρησιμοποιείται για την επανάληψη γραμμικών κλίσεων:

Παράδειγμα

Μια επαναλαμβανόμενη γραμμική κλίση:

   #grad {
  background-image: 
repeating-linear-gradient(red, yellow 10%, green 20%);
}

Δοκιμάστε το μόνοι σας →

<!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%);
}

#grad5 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(45deg, red 0px, red 10px, red 10px, yellow 10px, yellow 20px);
}
</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>

<p>A repeating linear gradient with solid stripes:</p>
<div id="grad5"></div>

</body>
</html>