Τρόπος προσθήκης Border Gradient στο CSS [+3 Tools]

Η ιδιότητα περιγράμματος στο CSS επιτρέπει στους σχεδιαστές ιστού να καθορίσουν το στυλ, το πλάτος και το χρώμα των περιγραμμάτων ενός στοιχείου.

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

Το Border gradient είναι μια ιδιότητα CSS που επιτρέπει στους προγραμματιστές να εφαρμόζουν μια διαβάθμιση στο περίγραμμα ενός στοιχείου.

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

Γιατί να χρησιμοποιήσετε ένα ντεγκραντέ περίγραμμα;

Οι κλίσεις περιγράμματος ήταν μεταξύ των διαφόρων χαρακτηριστικών στυλ που εισήχθησαν στο CSS3. Αυτοί είναι μερικοί από τους λόγους για τους οποίους θα πρέπει να το έχετε στην επόμενη εφαρμογή ιστού σας:

  • Μια διαβάθμιση περιγράμματος είναι ευέλικτη: Μπορείτε να δημιουργήσετε σύνθετα και πολυεπίπεδα εφέ χρησιμοποιώντας περιγράμματα διαβάθμισης. Αυτό είναι σε αντίθεση με τα μονόχρωμα περιγράμματα, τα οποία είναι άκαμπτα. Τα περιγράμματα ντεγκραντέ είναι επομένως χρήσιμα όταν αντιμετωπίζουμε πολύπλοκες διατάξεις ή σχήματα που απαιτούν διαφοροποιημένα οπτικά σχέδια.
  • Δημιουργήστε οπτική ελκυστικότητα: Χρησιμοποιώντας το εφέ περιγράμματος ντεγκραντέ, μπορείτε να προσθέσετε εντυπωσιακά οπτικά εφέ στα σχέδιά σας. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε έντονες χρωματικές αντιθέσεις για να τραβήξετε την προσοχή σε ένα συγκεκριμένο στοιχείο στην ιστοσελίδα σας.
  • Παρέχετε απρόσκοπτη ενσωμάτωση: Τα περιγράμματα κλίσης σάς επιτρέπουν να ενσωματώνετε απρόσκοπτα το περίγραμμα στο φόντο του στοιχείου σας. Μια τέτοια προσέγγιση δίνει στην ιστοσελίδα σας μια συμπαγή και συνεκτική εμφάνιση, δείχνοντας μια καλά μελετημένη σχεδίαση.

Πώς να προσθέσετε Border Gradient στο CSS

Πριν δείξουμε πώς να προσθέσετε μια κλίση περιγράμματος, μπορούμε να παρουσιάσουμε πώς μπορείτε να προσθέσετε ένα περίγραμμα σε ένα στοιχείο HTML.

Μπορούμε να χρησιμοποιήσουμε αυτόν τον κωδικό.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">

    <title>Document</title>

</head>

<body>

      <div class="box contains-border">

        How to add a Border illustrated!!!

      </div>    

</body>

</html>

CSS

.box {

  width: 400px;

  height: 50px;

  max-width: 80%;

  font-size: 1.5rem;

}

.contains-border {

  border-color: rebeccapurple;

  border-style: solid;

  border-width: 5px;

}

Η σελίδα που αποδίδεται θα εμφανιστεί ως:

  22 Καλύτερο Δωρεάν Online πρόγραμμα λήψης βίντεο

Παρόλο που ο παραπάνω κωδικός έχει περίγραμμα, δεν είναι τόσο ελκυστικός στα μάτια όσο είναι κενός. Έχουμε μόνο ένα συμπαγές πορφυρό περίγραμμα Rebecca 5 εικονοστοιχείων γύρω από το div μας.

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

Χρήση περιγραμμάτων κλίσης (γραμμική κλίση, ακτινική κλίση, κωνική κλίση)

Θα δείξουμε πώς να χρησιμοποιήσετε τα περιγράμματα κλίσης με τρεις διαφορετικούς τρόπους:

Γραμμική κλίση

Μια γραμμική κλίση δημιουργεί μια ομαλή μετάβαση μεταξύ δύο ή περισσότερων χρωμάτων σε ευθεία γραμμή. Μπορούμε να χρησιμοποιήσουμε τον ακόλουθο κώδικα για να δείξουμε:

HTML

<!DOCTYPE html>

<html>

<head>

<title>Linear Gradient Example</title>

<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">

</head>

<body>

<div class="box linear-gradient">

        Linear Gradient Illustration

      </div>

</body>

</html>

CSS

.box {

  width: 350px;

  height: 50px;

  max-width: 80%;

  font-size: 1.5rem;

}

.linear-gradient {

  border-style: solid;

  border-width: 10px;

  border-image: linear-gradient(45deg, rgb(143, 55, 0), rgb(66, 228, 250)) 1;

}

Έχουμε καθορίσει το στυλ περιγράμματος ως συμπαγές, που σημαίνει ότι το περίγραμμα γύρω από το κουτί μας είναι μια συμπαγής γραμμή. Το πλάτος περιγράμματος στον κώδικά μας είναι 10 px.

Η γραμμική κλίση ξεκινά με rgb(143, 55, 0)” και τελειώνει με “rgb(66, 228, 250)”. Έχουμε επίσης καθορίσει μια γωνία 45 μοιρών. Το πλάτος της τομής εικόνας περιγράμματος έχει οριστεί σε “1”.

Η σελίδα που αποδίδεται θα εμφανιστεί ως:

Ακτινική κλίση

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

Μπορούμε να δείξουμε πώς να προσθέσουμε μια ακτινική κλίση χρησιμοποιώντας αυτόν τον κώδικα:

HTML

<!DOCTYPE html>

<html>

<head>

<title>Radial Gradient Example</title>

<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">

</head>

<body>

<div class="box radial-gradient">

        Radial Gradient Illustration

      </div>

</body>

</html>

CSS

.box {

  width: 350px;

  height: 50px;

  max-width: 80%;

  font-size: 1.5rem;

}

.radial-gradient {

  border-style: solid;

  border-width: 5px;

  border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;

}

Έχουμε ορίσει το στυλ περιγράμματος του στοιχείου μας ως συμπαγές. Δώσαμε επίσης στο περίγραμμά μας ένα πλάτος περιγράμματος 5 px.

Η ακτινική κλίση ξεκινά με σκούρο πράσινο RGB(0,143,104) και τελειώνει με έντονο κίτρινο, που συμβολίζεται με rgb(250,224,66).

Το ‘1’ στο τέλος του κώδικα αντιπροσωπεύει την ιδιότητα περίγραμμα-εικόνα-επανάληψη. Αυτή η τιμή δίνει εντολή στο πρόγραμμα περιήγησης να επαναλάβει την εικόνα περιγράμματος μόνο μία φορά γύρω από το περίγραμμα του στοιχείου.

  7 Καλύτερη φιλοξενία διακομιστή V Rising για όλους

Η σελίδα που αποδίδεται θα εμφανιστεί ως:

Κωνική κλίση

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

HTML

<!DOCTYPE html>

<html>

<head>

<title>Conic Gradient Example</title>

<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">

</head>

<body>

<div class="box conic-gradient">

        Conic Gradient Illustration

      </div>

</body>

</html>

CSS

.box {

  width: 350px;

  height: 50px;

  max-width: 80%;

  font-size: 1.5rem;

}

.conic-gradient {

  border-style: solid;

  border-width: 7.5px;

  border-image: conic-gradient(red, rgb(0, 255, 47), rgb(255, 60, 0), rgb(13, 255, 0), blue, rgb(0, 255, 4), rgb(255, 0, 38)) 1;

}

Σε αυτόν τον κώδικα, ορίζουμε το στυλ περιγράμματος ως συμπαγές και δίνουμε στο περίγραμμα πλάτος 7,5 εικονοστοιχείων. Η ιδιότητα border-image ορίζει την κλίση περιγράμματος. Υπάρχουν επτά χρώματα, ξεκινώντας από κόκκινο και τελειώνοντας με rgb(255, 0, 38).

Το σχήμα ‘1’ στο τέλος του κώδικα δίνει το πλάτος περιγράμματος 1 pixel.

Η σελίδα που αποδίδεται θα εμφανιστεί ως:

Χρήση εικόνων περιγράμματος

Οι εικόνες περιγράμματος αντικαθιστούν τα τυπικά συμπαγή περιγράμματα των στοιχείων HTML. Οι εικόνες περιγράμματος χρησιμοποιούνται για τη δημιουργία πολύπλοκων σχεδίων αντί να συνδυάζουν χρώματα για να δημιουργήσουν μια κλίση περιγράμματος.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Border Images Example</title>

<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">

</head>

<body>

<div class="box border-images">

        Border Images Illustration

      </div>

</body>

</html>

CSS

.box {

  width: 350px;

  height: 50px;

  max-width: 80%;

  font-size: 1.5rem;

}

.border-images {

  border-style: solid;

  border-width: 15px;

  border-image-source: url(/images/elephant-2910293_1920.jpg);

  border-image-slice: 60 30;

}

Δώσαμε την ιδιότητά μας περί πλάτους περιγράμματος πλάτος 15 εικονοστοιχείων και ορίσαμε το στυλ περιγράμματος ως συμπαγές.

Το περίγραμμα-εικόνα-φέτα ορίζει το πλάτος και το ύψος του πλαισίου περιγράμματος σε 60% και 30%, αντίστοιχα.

Η σελίδα που αποδίδεται θα εμφανιστεί ως:

Χρήση ιδιοτήτων συντομογραφίας

Μια συντομογραφία επιτρέπει στους προγραμματιστές να διαμορφώνουν στυλ πολλαπλών μεμονωμένων ιδιοτήτων CSS χρησιμοποιώντας μία γραμμή κώδικα. Για αυτήν την περίπτωση, χρησιμοποιούμε το border-image για να καθορίσουμε το border-image-source και το border-image-slice.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Shorthand Property Example</title>

<link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css">

</head>

<body>

<div class="box shorthand">

        Shorthand Property Illustration

      </div>

</body>

</html>

CSS

.box {

  width: 350px;

  height: 50px;

  max-width: 80%;

  font-size: 1.5rem;

}

.shorthand {

  border-style: solid;

  border-width: 15px;

  border-image: url(/images/elephant-2910293_1920.jpg) 60 30;

}

Η σελίδα που αποδίδεται θα εμφανιστεί ως:

Γεννήτριες ντεγκραντέ συνόρων CSS

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

#1. CSS Gradient Generator-Μετατροπή χρωμάτων

Το Converting Colors σάς επιτρέπει να δημιουργείτε γραμμικό ή ακτινικό ντεγκραντέ κώδικα CSS με έως και πέντε χρώματα. Ο κώδικας διαβάθμισης CSS που δημιουργήσατε μπορεί να χρησιμοποιηθεί ως περίγραμμα ή εικόνα φόντου ενός στοιχείου.

  Κορυφαίοι 9 ιστότοποι που φέρνουν μια επαναστατική αλλαγή στις συσκευές ελέγχου υγείας

Μπορείτε να κάνετε τα εξής με αυτήν τη γεννήτρια.

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

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

#2. CSS Border Gradient Generator-Used CSS

Το Unused-CSS βοηθά τους προγραμματιστές να δημιουργήσουν περιγράμματα διαβάθμισης που μπορούν να εφαρμόσουν σε στοιχεία μπλοκ χωρίς να δημιουργούν ψευδοστοιχεία ή επιπλέον στοιχεία.

Μπορείτε να κάνετε τα εξής.

  • Επιλέξτε ανάμεσα σε διαφορετικούς τύπους ντεγκραντέ. Μπορείτε εύκολα να κάνετε εναλλαγή μεταξύ ακτινικών και γραμμικών κλίσεων όταν εργάζεστε με αυτό το εργαλείο.
  • Καρτέλα προεπισκόπησης. Το εργαλείο σάς επιτρέπει να κάνετε προεπισκόπηση πώς θα εμφανίζεται η διαβάθμιση περιγράμματος στην ιστοσελίδα σας καθώς την προσαρμόζετε.
  • Το χρώμα σταματά. Αυτό το εργαλείο καθιστά εύκολο να αποφασίσετε πώς θα πραγματοποιηθούν μεταβάσεις για διαφορετικά χρώματα.
  • Προσαρμογή μεγέθους περιγράμματος. Μπορείτε να προσαρμόσετε εύκολα το μέγεθος του περιγράμματος και την ακτίνα περιγράμματος με αυτό το εργαλείο.

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

#3. Gradient Border Generator- Amit Sheen

Αυτό το εργαλείο έχει οκτώ διαφορετικές περιοχές φόντου, δίνοντας τη δυνατότητα στους προγραμματιστές να δημιουργούν εφέ περιγράμματος στρογγυλεμένης κλίσης.

Μπορείτε να επιτύχετε τα εξής:

  • Δημιουργήστε κινούμενα σχέδια με ντεγκραντέ. Το εργαλείο σάς επιτρέπει να δημιουργείτε κινούμενα σχέδια με ντεγκραντέ που μεταβαίνουν μεταξύ δύο ή περισσότερων χρωμάτων.
  • Μπορείτε να συμπεριλάβετε κώδικα JavaScript. Εάν το προσαρμόσιμο στοιχείο σας χρειάζεται κώδικα JS, μπορείτε πάντα να τον βρείτε και να τον προσαρμόσετε από τον πίνακα ελέγχου.
  • Ζωντανή προεπισκόπηση. Μπορείτε να δείτε τις αλλαγές στον κώδικά σας καθώς τον προσαρμόζετε.

Μπορείτε να αντιγράψετε και να επικολλήσετε τον κώδικα αφού προσαρμόσετε τα εφέ ντεγκραντέ περιγράμματος σύμφωνα με τις προτιμήσεις σας.

συμπέρασμα

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

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

Δείτε πώς μπορείτε να δημιουργήσετε ένα διπλό περίγραμμα στο CSS για να βελτιώσετε την οπτική ελκυστικότητα της ιστοσελίδας σας.