Συνάρτηση linear-gradient

Η συνάρτηση linear-gradient ορίζει μια γραμμική κλίση. Εφαρμόζεται σε ιδιότητες που ορίζουν εικόνα φόντου: background, background-image ή εικόνα περιγράμματος: border-image, background-image-source.

Σύνταξη

cssεπιλογέας {
  background: linear-gradient([γωνία ή κατεύθυνση], χρώμα1 μέγεθος1, χρώμα2 μέγεθος2...);
}

Τιμές

Παράδειγμα . Η πιο απλή παραλλαγή

Σύνταξη:

cssεπιλογέας {
  background: linear-gradient(αρχικό χρώμα, τελικό χρώμα);
}

Ας δούμε ένα παράδειγμα:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(black, red);
  width: 200px;
  height: 200px;
}

Результат:

Παράδειγμα . Προσθέτουμε γωνία

Σύνταξη:

cssεπιλογέας {
  background: linear-gradient(γωνία, αρχικό χρώμα, τελικό χρώμα);
}

Ας δούμε ένα παράδειγμα:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(45deg, black, red);
  width: 200px;
  height: 200px;
}

Результат:

Παράδειγμα . Προσθέτουμε κατεύθυνση

Αντί για γωνία μπορείτε να προσθέσετε κατεύθυνση top, left, right, bottom ή συνδυασμό τους: top left, top right Πριν από την κατεύθυνση τοποθετείται η λέξη to.

Σύνταξη:

cssεπιλογέας {
  background: linear-gradient(κατεύθυνση, αρχικό χρώμα, τελικό χρώμα);
}

Ας δούμε ένα παράδειγμα:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(to left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

Παράδειγμα . Προσθέτουμε κατεύθυνση

Ας ορίσουμε διαφορετική κατεύθυνση:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(to top left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

Παράδειγμα . Προσθέτουμε μέγεθος

Σύνταξη:

cssεπιλογέας {
  background: linear-gradient(χρώμα1 μέγεθος1, χρώμα2 μέγεθος2);
}

Στο επόμενο παράδειγμα η συμπεριφορά θα είναι η εξής: καθαρό κόκκινο χρώμα θα είναι από 0px έως 30px, από 30px έως 50px θα υπάρχει κλίση από κόκκινο σε μπλε, και από 50px και μέχρι το τέλος - καθαρό μπλε:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(red 30px, blue 50px);
  width: 200px;
  height: 200px;
}

Результат:

Παράδειγμα . Προσθέτουμε περισσότερα από 2 χρώματα

Σύνταξη:

cssεπιλογέας {
  background: linear-gradient(χρώμα1 μέγεθος1, χρώμα2 μέγεθος2, χρώμα3 μέγεθος3...);
}

Στο επόμενο παράδειγμα η συμπεριφορά θα είναι η εξής: καθαρό κόκκινο χρώμα θα είναι από 0px έως 30px, από 30px έως 50px θα υπάρχει κλίση από κόκκινο σε μπλε, και από 50px έως 70px - κλίση από μπλε σε πράσινο, και μετά τα 70px - καθαρό πράσινο:

html<div id="elem"></div>

css#elem {
  background: linear-gradient(red 30px, blue 50px, green 70px);
  width: 200px;
  height: 200px;
}

Результат:

Παράδειγμα . Απότομες μεταβάσεις

Στο επόμενο παράδειγμα η συμπεριφορά θα είναι η εξής: καθαρό κόκκινο χρώμα θα είναι από 0px έως 30px, καθαρό μπλε - από 30px έως 60px, καθαρό πράσινο - μετά τα 60px (το red 0px μπορείτε και να μην το γράψετε):

html<div id="elem"></div>

css#elem {
  background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
  width: 200px;
  height: 200px;
}

Результат:

Παράδειγμα . Τα μεγέθη μπορούν να οριστούν και σε ποσοστά

Στο επόμενο παράδειγμα η συμπεριφορά θα είναι η εξής: καθαρό κόκκινο χρώμα θα είναι από 0% έως 30%, καθαρό μπλε - από 30% έως 60%, καθαρό πράσινο - μετά τα 60% (το red 0% μπορείτε και να μην το γράψετε):

html<div id="elem"></div>

css#elem {
  background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
  width: 200px;
  height: 200px;
}

Результат:

Παράδειγμα . Συνδυασμός με background-size

Στο επόμενο παράδειγμα η συμπεριφορά θα είναι η εξής: καθαρό κόκκινο χρώμα θα είναι από 0px έως 30px, καθαρό μπλε - από 30px έως 60px, ενώ όλα αυτά θα επαναλαμβάνονται σε κομματάκια των 60px (λόγω του background-size: 60px;):

html<div id="elem"></div>

css#elem {
  background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
  background-size: 60px 60px;
  width: 200px;
  height: 200px;
}

Результат:

Δείτε επίσης