Μετά την περίεργη σύγχυση στο τελευταίο βίντεο σχετικά με το ποια κεφαλίδα κάναμε πραγματικά, αυτή τη φορά θα εφαρμόσουμε την προσαρμοσμένη κεφαλίδα για τη σελίδα Προσφορές! Αυτό έγινε από τον Meg Hunt.
Όπως όλες οι κεφαλίδες, περάσαμε λίγο χρόνο κοιτάζοντας τα αρχικά αρχεία και καταλαβαίνοντας πώς θα κάθεται καλύτερα στη σελίδα. Προσπαθούμε μερικές επιλογές, αλλά τελικά αποφασίζουμε ότι το βάζουμε σε ένα κλειστό κουτί είναι καλύτερο (σε αντίθεση με κάτι σαν την επικεφαλίδα Demos όπου η κεφαλίδα λιώνει σε ένα περίγραμμα γύρω από το περιεχόμενο.
Κατά την εξαγωγή του, παίζουμε με πολλές διαφορετικές μορφές γραφικών. Αυτό το ιδιαίτερο στυλ, είναι ενδιαφέρον, είναι περίπου το ίδιο τόσο στην ποιότητα όσο και στο μέγεθος αρχείου μεταξύ PNG και JPG.webp. Το εξάγουμε σε πλάτος 2000px, το οποίο θα πρέπει να φαίνεται καλό σε οποιαδήποτε οθόνη. Χτυπήσαμε επίσης περίπου 150k, το οποίο είναι μεγάλο, αλλά για έναν ήρωα γραφικό σαν αυτό, είναι εντάξει στόχος.
Αρχίζουμε να λαμβάνουμε το πρότυπο για τις προσφορές με τη σειρά, συμπεριλαμβανομένης της εξέτασης του τρόπου με τον οποίο κάθε συμφωνία είναι ξεχωριστά προσαρμοσμένα πεδία που τυχαιοποιούνται πριν από την έξοδο. Θα αφιερώσουμε περισσότερο χρόνο σε αυτήν τη σήμανση και όλα αυτά αργότερα, αλλά επειδή είμαστε σε αυτό το πρότυπο ετοιμάζουμε τα πράγματα για την κεφαλίδα, ίσως και να το καθαρίσουμε.
Εξετάζουμε πολλές διαφορετικές δυνατότητες τοποθέτησης του προσαρμοσμένου γραφικού κεφαλίδας στη σελίδα. Μια εικόνα φόντου έχει τη μεγαλύτερη σημασία, καθώς χρησιμοποιούμε ένα σημασιολογικό
για τον τίτλο και την αντικατάσταση εικόνας. Χρησιμοποιώντας background-size, ελέγξουμε cover, αλλά αυτό μπορεί να προκαλέσει διακοπές. Το check out περιέχει, αλλά αυτό επιτρέπει χώρο στο εξωτερικό. 100%κάνει το τέχνασμα, αλλά θα χρειαστεί να φτιάξουμε ένα πλαίσιο στυλ αναλογίας διαστάσεων για να λειτουργήσει καλά. Αυτό είναι εύκολο όμως, απλώς κάνουμε το ύψος 0 και χρησιμοποιούμε ένα επί τοις εκατό επένδυση για να το κάνουμε αυτό (κουτί με επένδυση).
Αυτή είναι η έβδομη προσαρμοσμένη κεφαλίδα που έχουμε κάνει και κάθε μία από αυτές έγινε διαφορετικά. Σχεδιασμός ιστοσελίδων, ε; Τι ταξίδι.