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

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

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

Δομή HTML για στοιχεία κάρτας

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

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

Ξεκινήστε δημιουργώντας ένα κοντέινερ div, τοποθετώντας τρεις ακόμη ετικέτες div με χαρακτηριστικά κλάσης για κάθε κάρτα μέσα σε αυτό, με κατάλληλα θυγατρικά στοιχεία για καθεμία από τις τρεις κάρτες. Θα πρέπει να χρησιμοποιήσετε στοιχεία που αντιστοιχούν σε όλα τα μέρη στην ανατομία της κάρτας. Για παράδειγμα, η κάρτα περιεχομένου έχει μια ετικέτα εικόνας για μέσα, μια ετικέτα h3 για τον τίτλο και μια ετικέτα p για κείμενο.

<divτάξη="κάρτα-δοχείο">
 Κάρτα περιεχομένου 
<divτάξη="κάρτα περιεχομένου">
<imgsrc=" https://images.unsplash.com/photo-1500989145603-8e7ef71d639e? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"alt="Ένας χώρος εργασίας με ένα σημειωματάριο με πληκτρολόγιο, ένα φλιτζάνι καφέ και ένα ακουστικό">
<h3>Τίτλοςh3>
<Π>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ενα δ
 εξαιρέσεις εξπλικάμπο μολεστίαε νατους μαγναμ ρεμ...Π>
<έναhref="#">Διαβάστε περισσότεραένα>
div>
 Κάρτα προϊόντος 
<divτάξη="προϊόν-κάρτα">
<imgsrc=" https://images.unsplash.com/photo-1505740420928-5e560c06d30e? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"alt="Ακουστικά σε κίτρινο φόντο">
<h3>Ονομασία προϊόντοςh3>
<Π>$19.99Π>
<Π>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Aspernatur, voluptatibus.Π>
<έναhref="#"><κουμπί>Προσθήκη στο καλάθικουμπί>ένα>
div>
 Κάρτα προφίλ 
<divτάξη="προφίλ-κάρτα">
<imgsrc=" https://images.unsplash.com/photo-1535713875002-d1d0cf377fde? ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"alt="Ένας λευκός άνδρας που φορά ένα μαύρο πουκάμισο με κουμπιά">
<h3>John Doeh3>
<Π>Web DeveloperΠ>
<Π>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Expedita tempora eos molestias repellat;Π>
<έναhref="#"τάξη="προφίλ-σύνδεσμος">Εμφάνιση προφίλένα>
div>
div>

Δείτε πώς θα πρέπει να φαίνεται στο πρόγραμμα περιήγησής σας, από προεπιλογή, προτού εφαρμόσετε οποιοδήποτε προσαρμοσμένο στυλ:

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

Στυλ CSS για στοιχεία καρτών

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

​​​​​​* {
περιθώριο: 0;
υλικό παραγεμίσματος: 0;
μέγεθος κουτιού: περίγραμμα-κουτί;
}
.κάρτα-δοχείο {
υλικό παραγεμίσματος: 20px;
}

Στη συνέχεια, χρησιμοποιήστε έναν πολλαπλό επιλογέα για όλα τα φύλλα, δώστε του ένα περιθώριο για να παρέχει χώρο γύρω από κάθε κάρτα και ορίστε το απεικόνιση και flex-direction για διάταξη. Επίσης, ορίστε ένα περίγραμμα για να ορίσετε τις κάρτες, την ακτίνα περιγράμματος για ορισμένες καμπύλες και το μέγιστο πλάτος για την απόκριση.

.περιεχόμενο-κάρτα,
.προϊόν-κάρτα,
.προφίλ-κάρτα {
περιθώριο: 20px;
απεικόνιση: καλώδιο;
flex-direction: στήλη;
σύνορο: 2pxστερεός#cccc;
σύνορα-ακτίνα: 7px;
μέγιστο πλάτος: 250px;
}

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

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

.περιεχόμενο-κάρτα {
Ιστορικό: #E9724C;
υλικό παραγεμίσματος: 10px;
}
.περιεχόμενο-κάρταimg {
μέγιστο πλάτος: 100%;
σύνορα-ακτίνα: 5px;
}


.περιεχόμενο-κάρταh3 {
περιθώριο: 10px 0;
γραμματοσειρά-οικογένεια: μονοδιάστημα;
μέγεθος γραμματοσειράς: 1.5 εκμ;
}
.περιεχόμενο-κάρταένα {
κείμενο-διακόσμηση: κανένας;
χρώμα: #6f2ed8;
περιθώριο: 12 px 0 7px 0;
μέγεθος γραμματοσειράς: 1rem;
}

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

ο κουμπί στοιχείο περιέχει τα περισσότερα χαρακτηριστικά στυλ για την επίτευξη του εφέ παρότρυνσης για δράση. Ευθυγραμμίστε μόνο το κουμπί προς τα δεξιά, ρυθμίζοντας το align-self σε flex-end στον επιλογέα αγκύρωσης.

.προϊόν-κάρταimg {
σύνορα-ακτίνα: 5px 5px 0 0;
πλάτος: 100%;
}
.προϊόν-κάρταh3 {
περιθώριο: 5px 10px;
γραμματοσειρά-οικογένεια: μονοδιάστημα;
μέγεθος γραμματοσειράς: 1.5 εκμ;
}


.προϊόν-κάρταΠ {
περιθώριο: 5px 10px;
γραμματοσειρά-οικογένεια: Γεωργία, 'ΦορέςΝέοςρωμαϊκός', Φορές, ελαφρή γραμμή;
}


.προϊόν-κάρταένα {
ευθυγραμμίζομαι: flex-end;
}
.προϊόν-κάρτακουμπί {
πλάτος: 100px;
ύψος: 30px;
περιθώριο: 10px;
σύνορο: 1pxστερεός#8f3642;
σύνορα-ακτίνα: 4px;
χρώμα του φόντου: #FFC857;
βάρος γραμματοσειράς: 700;
δρομέας: δείκτης;
}

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

.προφίλ-κάρταimg {
σύνορα-ακτίνα: 5px 5px 0 0;
ύψος: 200px;
προσαρμογή αντικειμένου: κάλυμμα;
}
.προφίλ-κάρταh3 {
περιθώριο: 10px;
γραμματοσειρά-οικογένεια: μονοδιάστημα;
μέγεθος γραμματοσειράς: 1.5 εκμ;
}


.προφίλ-κάρταΠ:πρώτου τύπου {
περιθώριο:0 px 10px;
γραμματοσειρά-οικογένεια: 'ΦορέςΝέοςρωμαϊκός', Φορές, ελαφρή γραμμή;
χρώμα: αραβοσίτου;
}


.προφίλ-κάρταΠ:τελευταίος-τύπου {
περιθώριο: 5px 10px;
μέγεθος γραμματοσειράς: 0.9 εκμ;
}
.προφίλ-κάρταένα {
κείμενο-διακόσμηση: κανένας;
περιθώριο: 5px 10px 10px 10px;
υλικό παραγεμίσματος: 5px 15px;
ευθυγραμμίζομαι: κέντρο;
σύνορο: 1pxστερεόςαραβοσίτου;
σύνορα-ακτίνα: 15px;
χρώμα: μαύρος;
γραμματοσειρά-οικογένεια: μονοδιάστημα;
βάρος γραμματοσειράς: 500;
}

Μετά το styling, οι κάρτες σας θα πρέπει να μοιάζουν με αυτό:

Διάταξη κάρτας και ευελιξία

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

Χρήση CSS Flexbox

Πρώτα, προσθέστε ένα χαρακτηριστικό εμφάνισης και ρυθμίστε το σε flex στον επιλογέα κοντέινερ της κάρτας σας. Εφαρμόστε flex-wrap και ρυθμίστε το να τυλίγεται, ώστε οι κάρτες να μπορούν να τυλίγονται σε ένα μικρό μέγεθος οθόνης.

Επίσης, ρυθμίστε το στοίχιση-στοιχεία και δικαιολογώ-περιεχόμενο ιδιότητες σύμφωνα με την επιθυμία σας.

​​​​​​.κάρτα-δοχείο {
υλικό παραγεμίσματος: 20px;
απεικόνιση: καλώδιο;
flex-wrap: κάλυμμα;
στοίχιση-στοιχεία: κέντρο;
δικαιολογώ-περιεχόμενο: χώρο-ομοιόμορφα;
}

Η σελίδα πρέπει να μοιάζει με αυτό:

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

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

Ρυθμίστε το flex-direction προς την στήλη, έτσι οι κάρτες στοιβάζονται κάθετα. Για να εμφανίσετε τις κάρτες στο κέντρο της οθόνης, οριζόντια, ορίστε τις ιδιότητες justify-content and align-items στο κέντρο:

@μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ οθόνη και (μέγιστο πλάτος:480 εικονοστοιχεία) {
.κάρτα-δοχείο {
flex-direction: στήλη;
δικαιολογώ-περιεχόμενο: κέντρο;
στοίχιση-στοιχεία: κέντρο;
 }
}

Για να δείτε το εφέ ερωτήματος πολυμέσων, ελέγξτε τον κώδικα CodePen.

Χρήση πλέγματος CSS

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

.κάρτα-δοχείο {
υλικό παραγεμίσματος: 20px;
απεικόνιση: πλέγμα;
πλέγμα-πρότυπο-στήλες: επαναλαμβάνω(αυτόματη προσαρμογή, ελάχιστη μέγ(300px, 1fr));
πλέγμα-κενό: 20px;
δικαιολογώ-αντικείμενα: κέντρο;
}

Η σελίδα πρέπει να μοιάζει με αυτό:

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

@μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ οθόνη και (μέγιστο πλάτος:480 εικονοστοιχεία) {
.κάρτα-δοχείο {
πλέγμα-πρότυπο-στήλες: 1fr;
δικαιολογώ-αντικείμενα: κέντρο;
στοίχιση-στοιχεία: κέντρο;
 }
}

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

Θέματα προσβασιμότητας για στοιχεία κάρτας

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

  • Σημασιολογική HTML
  • Πλοήγηση με πληκτρολόγιο
  • Εστίαση στυλ
  • Ετικέτες και ρόλοι ARIA
  • Εναλλακτικό κείμενο
  • Σωστή δομή επικεφαλίδας
  • Αντίθεση χρώματος

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

Προσαρμογή και περαιτέρω εξερεύνηση

Μπορείτε να προχωρήσετε περαιτέρω με την προσαρμογή του στοιχείου της κάρτας σας. Εδώ είναι μερικές ιδέες που μπορείτε να εξετάσετε:

  • Μεταβάσεις και κινούμενα σχέδια
  • Στυλ εικόνας
  • Φόντο και χρωματικοί συνδυασμοί
  • Στυλ συνόρων
  • Διαδραστικά στοιχεία

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

Δημιουργήστε οπτικά ελκυστικά και αποκριτικά στοιχεία κάρτας

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

Υπάρχουν και άλλα εφέ CSS που μπορείτε να δοκιμάσετε, όπως φίλτρα CSS και blend mode για οπτικά εφέ. Εξασκηθείτε στη δημιουργία περισσότερων με διαφορετική προσαρμογή για οπτική ελκυστικότητα.