6 τρόποι για να δημιουργήσετε ένα διπλό περίγραμμα στο CSS

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

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

Μπορείτε επίσης να στοχεύσετε μεμονωμένα περιγράμματα χρησιμοποιώντας ιδιότητες όπως border-block-start και border-top

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

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

Γιατί διπλό περίγραμμα;

  • Διαχωρισμός: Μπορείτε να χρησιμοποιήσετε ένα διπλό περίγραμμα για να αυξήσετε την αναγνωσιμότητα και τη δυνατότητα σάρωσης μιας ιστοσελίδας διαχωρίζοντας διαφορετικά στοιχεία HTML. Για παράδειγμα, μπορείτε να έχετε διπλά περιγράμματα για να διαχωρίσετε στοιχεία όπως κεφαλίδες, σώμα και υποσέλιδα σε μια ιστοσελίδα.
  • Οπτική ελκυστικότητα: Μπορείτε να χρησιμοποιήσετε διαφορετικά/αντιθετικά χρώματα στα διπλά περιγράμματα για να κάνετε διαφορετικά στοιχεία πιο ελκυστικά οπτικά.
  • Εμφάνιση ιεραρχίας: Μπορείτε να διακρίνετε ξεκάθαρα τα σημαντικά και τα λιγότερο σημαντικά στοιχεία σε μια ιστοσελίδα χρησιμοποιώντας διπλά περιγράμματα.
  • Εύκολη προσαρμογή: Μπορείτε να δημιουργήσετε εξατομικευμένα και μοναδικά σχέδια με τη βοήθεια διπλών περιγραμμάτων. Για παράδειγμα, μπορείτε να αλλάξετε το χρώμα ή το πλάτος κάθε γραμμής.
  • Έμφαση: Χρησιμοποιώντας την ιδιότητα διπλού περιγράμματος, μπορείτε να επιστήσετε την προσοχή σε συγκεκριμένους συνδέσμους ή κουμπιά σε μια ιστοσελίδα.
  Η κάμερα Mac δεν λειτουργεί; Δείτε πώς μπορείτε να το διορθώσετε

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

Χρήση ιδιοκτησίας τύπου περιγράμματος

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

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

Κώδικας 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" />

    <title>Document</title>

      <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" />

  </head>

  <body>

      <div class="box"> <h2> Border Property</h2>  </div>

  </body>

</html>

Κωδικός CSS:

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    display: flex;

    justify-content: flex-start;

    gap: 25px;

    padding: 15px;

  }

  div{

    width: 350px;

    height: 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .box{

    border-width: 15px;

    border-color: red;

    border-style: double;

  }

Η έξοδος θα είναι:

Χρησιμοποιώντας τη συνάρτηση linear-gradient().

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

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

Κώδικας 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" />

    <title>Document</title>

      <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" />

  </head>

  <body>

      <div class="box"> <h2>linear-gradient() function</h2>  </div>

  </body>

</html>

Κωδικός CSS:

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    display: flex;

    justify-content: flex-start;

    gap: 25px;

    padding: 15px;

  }

  div{

    width: 350px;

    height: 350px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .box{

    border: 7px solid rgb(36, 85, 7);

    background: linear-gradient(to top, #8f0404 7px, transparent 1px), 

    linear-gradient(to bottom, #8f0404 7px, transparent 1px),  

    linear-gradient(to left, #8f0404 7px, transparent 1px),  

    linear-gradient(to right, #8f0404 7px, transparent 1px);  

  }

Η έξοδος θα είναι:

Χρήση της ιδιότητας Outline

Ένα περίγραμμα είναι μια γραμμή που χαράσσεται έξω από το περίγραμμα ενός στοιχείου. Αυτό επιτυγχάνει το φαινόμενο διπλού περιγράμματος και μπορούμε να χρησιμοποιήσουμε ένα περίγραμμα και ένα μόνο περίγραμμα. Πρέπει να χρησιμοποιήσουμε το outline-offset για να προσθέσουμε ένα κενό μεταξύ των ιδιοτήτων περιγράμματος και περιγράμματος.

Κώδικας 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" />

    <title>Document</title>

      <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" />

  </head>

  <body>

      <div class="box"> <h2>Outline Property</h2>  </div>

  </body>

</html>

Κωδικός CSS:

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    display: flex;

    justify-content: flex-start;

    gap: 25px;

    padding: 15px;

  }

  div{

    width: 350px;

    height: 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .box{

    border: 5px solid red; 

    outline: 5px solid blue;

    outline-offset: -20px;

  }

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

  Πώς να διορθώσετε τη ζημιά στο ηχείο του τηλεφώνου από το νερό

Χρήση της ιδιότητας box-shadow

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

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" />

    <title>Document</title>

      <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" />

  </head>

  <body>

      <div class="box"> <h2>Box Shadow Property</h2>  </div>

  </body>

</html>

Κωδικός CSS:

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    display: flex;

    justify-content: flex-start;

    gap: 25px;

    padding: 15px;

  }

  div{

    width: 350px;

    height: 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .box{

    box-shadow:

    0 0 0 5px red,

    0 0 0 10px green;

  }

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

Χρήση της ιδιότητας κλιπ φόντου

Η Ιδιότητα κλιπ φόντου καθορίζει πόσο πρέπει να εκτείνεται το φόντο μέσα σε ένα στοιχείο. Η επέκταση μπορεί να βρίσκεται στο πλαίσιο περιγράμματος, padding-box ή πλαίσιο περιεχομένου.

Κώδικας 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" />

    <title>Document</title>

      <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" />

  </head>

  <body>

      <div class="box"> <h2>Background-Clip Property</h2>  </div>

  </body>

</html>

Κωδικός CSS:

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    display: flex;

    justify-content: flex-start;

    gap: 25px;

    padding: 15px;

  }

  div{

    width: 350px;

    height: 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .box{

    border: 7px solid rgb(36, 85, 7);

  padding: 5px;

  background-clip: content-box;

  background-color: rgb(238, 152, 130);

}

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

Χρήση ψευδοστοιχείων

Ψευδο-στοιχεία, που αντιπροσωπεύονται από τους επιλογείς ::before και ::after επιτρέπουν στους σχεδιαστές ιστού να δημιουργούν στυλ σε μέρη ενός εγγράφου 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" />

    <title>Document</title>

      <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" />

  </head>

  <body>

      <div class="box"> <h2>pseudo property</h2>  </div>

  </body>

</html>

CSS

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    display: flex;

    justify-content: flex-start;

    gap: 25px;

    padding: 15px;

  }

  div{

    width: 150px;

    height: 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .box{

    background-color: brown;

  }

  box{

    background-color: rebeccapurple;

    position: relative;

    border: 8px solid red;

  }

  .box::before{

  content: " ";

  position: absolute;

  top: 5px;

  left: 5px;

  right: 5px;

  bottom: 5px;

  border: 8px solid green;

  border-width: 6px;

  border-color: green white green white;

  width: 150px;

  height: 100px;

}

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

Παραδείγματα πραγματικού κόσμου CSS με διπλά σύνορα

Η ιδιότητα CSS διπλού περιγράμματος χρησιμοποιείται σε πολλούς ιστότοπους. Πρέπει να συνδυάσετε την ιδιότητα διπλού περιγράμματος με άλλες ιδιότητες CSS για να αξιοποιήσετε στο έπακρο. Τα ακόλουθα είναι δύο παραδείγματα του διπλού περιγράμματος σε δράση.

  Πώς να εκτυπώσετε ένα εξώφυλλο CD

Το κουμπί “Καλάθι” στο Amazon

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

Τα διπλά περιγράμματα εμφανίζονται όταν ένας χρήστης τοποθετεί το δείκτη του ποντικιού πάνω από το κουμπί «καλάθι». Τα περιγράμματα είναι επίσης ορατά όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το μενού πλοήγησης του Amazon.

Κουμπιά Mailchimp

Το Mailchimp είναι μια υπηρεσία μάρκετινγκ ηλεκτρονικού ταχυδρομείου που επιτρέπει στους χρήστες να δημιουργούν, να ξεκινούν και να παρακολουθούν καμπάνιες. Ο ιστότοπός του χρησιμοποιεί εφέ διπλού περιγράμματος σε διάφορες ενότητες. Τα κουμπιά εγγραφής και σύνδεσης έχουν διπλά περιθώρια για να «δημιουργούν» μια αίσθηση επείγοντος καθώς οι χρήστες περιηγούνται.

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

Βέλτιστες πρακτικές κατά τη χρήση του εφέ CSS διπλού περιγράμματος

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

  • Χρησιμοποιήστε ένα σταθερό στυλ: Εάν χρησιμοποιείτε διπλά περιγράμματα, βεβαιωθείτε ότι το στυλ είναι συνεπές σε όλα τα στοιχεία. Για παράδειγμα, τα διπλά περιγράμματα μπορούν να χρησιμοποιηθούν στα κουμπιά πλοήγησης, παρότρυνσης για δράση και εγγραφής/σύνδεσης. Εάν είναι δυνατόν, βεβαιωθείτε ότι έχετε τα ίδια χρώματα και πάχη περιθωρίων στα στοιχεία με διπλά περιθώρια.
  • Βεβαιωθείτε ότι αυτά τα διπλά περιγράμματα λειτουργούν σε διαφορετικές συσκευές: Ζούμε σε έναν κόσμο όπου οι άνθρωποι περιηγούνται σε ιστότοπους από smartphone, υπολογιστές και tablet. Ελέγξτε για να βεβαιωθείτε ότι τα διπλά περιγράμματα εμφανίζονται όπως αναμένεται σε διάφορα μεγέθη οθόνης.
  • Χρησιμοποιήστε τα με φειδώ: Μπορεί να μπείτε στον πειρασμό να χρησιμοποιήσετε υπερβολικά ένα συγκεκριμένο εφέ CSS αφού το ανακαλύψετε για πρώτη φορά. Ωστόσο, το διπλό CSS ταιριάζει σε διάφορα στοιχεία σε μια ιστοσελίδα. Χρησιμοποιήστε αυτήν την ιδιότητα μόνο σε περιοχές όπου προσθέτει αξία στο σχέδιο.

συμπέρασμα

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

Μπορείτε να δείτε αυτούς τους πόρους CSS για να κατανοήσετε λεπτομερώς τα Cascading Style Sheets.