Πώς να δημιουργήσετε ένα σχέδιο γραμμής αποκοπής με το CSS
Με σχεδιασμό των ορίων μπορούμε να δείξουμε στους χρήστες τι μπορεί να βρεθεί κάτω από την περιοχή των συνόρων ενός στοιχείου HTML. Αυτή η εργασία συνήθως επιλύεται από στοιβάζοντας δύο ή περισσότερα στοιχεία μπλοκ (στις περισσότερες περιπτώσεις divs) διαφορετικών μεγεθών το ένα πάνω στο άλλο. Πρώτα αυτό φαίνεται μια εύκολη λύση, αλλά γίνεται πιο απογοητευτικό όταν θέλετε να ξαναχρησιμοποιήσετε τη διάταξη πολλές φορές, να μετακινήσετε τα στοιχεία, να βελτιστοποιήσετε το σχέδιο για κινητά ή να διατηρήσετε τον κώδικα.
Σε αυτήν την ανάρτηση, θα σας δείξω μια κομψή λύση μόνο για το CSS που χρησιμοποιεί μόνο ένα στοιχείο HTML για να επιτευχθεί το ίδιο αποτέλεσμα. Αυτή η τεχνική είναι επίσης μεγάλη για την προσβασιμότητα, όπως αυτή φορτώνει την εικόνα φόντου στο CSS, διαχωρισμένο από το HTML.
Μέχρι το τέλος αυτής της ανάρτησης, θα ξέρετε πώς να εμφανίζει μια εικόνα φόντου στην περιοχή των συνόρων προκειμένου να δημιουργηθεί το σχεδιασμό των ορίων μπορείτε να δείτε παρακάτω. Θα δείξω επίσης πώς μπορείτε να κάνετε το σχέδιο να ανταποκρίνεται χρησιμοποιώντας μονάδες προβολής.
Αρχικός κώδικας
Η μόνη απαίτηση στο μέτωπο HTML είναι α στοιχείο στοιχείου:
Θα πρέπει να επαναχρησιμοποίηση οι διαστάσεις (πλάτος και ύψος) και οι τιμές πλάτους των ορίων του div, έτσι τους παρουσιάζω ως μεταβλητές CSS. Η μεταβλητή --w υποδηλώνει το πλάτος απο .cb στοιχείο στοιχείου, --h δείχνει την ύψος, --σι πηγαίνει για το συνοριακό πλάτος, και --b2 για το πλάτος συνόλων πολλαπλασιασμένο με 2. Θα δούμε αργότερα τη χρήση της τελευταίας μεταβλητής.
Είμαι το μέγεθος του Η μονάδα Ας βελτιώσουμε τον παραπάνω κώδικα προσθέτοντας φόντο και καθορίζοντας το περίγραμμα, το ύψος και το πλάτος χρησιμοποιώντας τις προκαθορισμένες μεταβλητές CSS. Δείτε πώς θα έπρεπε να φαίνεται το demo τώρα: Χρειαζόμαστε την εικόνα φόντου για να καλύπτουν ολόκληρη την περιοχή του Εάν θέλετε να δώσετε στην εικόνα φόντου ένα σταθερό μέγεθος, βεβαιωθείτε ότι το μέγεθος που δίνετε δίνει τη δυνατότητα να καλύψει την περιοχή των συνόρων του ο πλάτος της εικόνας φόντου [ Ομοίως, το ύψος της εικόνας φόντου [ Με αυτό τον τρόπο, έχουμε διαβαθμίσει την εικόνα φόντου σε μια περιοχή που είναι ίδια με το μέγεθος της ο Σημείωση: Αν προσθέτετε την επένδυση στο Αυτό ακριβώς έχουμε τώρα: Τώρα που καλύψαμε την περιοχή που περιβάλει τα σύνορα με την εικόνα φόντου, το μόνο που απομένει είναι να καλύψτε την κεντρική περιοχή μέσα στα όρια (περιοχή αποκλεισμού των συνόρων) με ένα συμπαγές χρώμα, για το οποίο φτάνουμε για ένα Η οριζόντια σκιά με αξία Στο demo του Codepen, θα μπορούσατε να δείτε ένα λευκό περίγραμμα γύρω από την εικόνα. Υπάρχει ένα περίφημο τέχνασμα χρησιμοποιώντας σκιές κουτιού για να δημιουργήσετε πολλά σύνορα-μπορούμε να χρησιμοποιήσουμε την ίδια τεχνική για να προσθέστε ένα ή περισσότερα συμπαγή έγχρωμα σύνορα στο σχεδιασμό μας. Το ενημερωμένο ο Στο τελικό demo του Codepen, έβαλα τον κώδικα για την εικόνα φόντου και το χρώμα σκιάς κουτιού σε μια ξεχωριστή κατηγορία. Αυτό είναι προαιρετικός, αλλά μπορεί να είναι εξαιρετικά χρήσιμο αν θέλετε επαναχρησιμοποιήστε τη διάταξη του σχεδιασμού των ορίων σε πολλά στοιχεία και προσθέστε την αισθητική (εικόνα φόντου + χρώμα) για κάθε στοιχείο ανεξάρτητα. Έχω προσθέσει μια κλάση που ονομάζεται Από Για να ορίσετε την τιμή του Επειδή οι διαστάσεις είναι όλες στη μονάδα Σημείωση: Μην ξεχάσετε να το κάνετε προσθέστε τη μετα-ετικέτα του viewport στη σελίδα HTML αν έχετε αποφασίσει να τη βελτιστοποιήσετε για προβολή μέσω κινητού.vw μονάδα (μπορείτε να χρησιμοποιήσετε σταθερές μονάδες αν θέλετε). .cb -w: 35vw; - h: 40vw. -b: 4vw; -b2: calc (var (-b) * 2).
Γρήγορη εξήγηση -
vw και vh μονάδεςvw αντιπροσωπεύει το 1/100th του πλάτους του παραθύρου προβολής. Για παράδειγμα, 50vw είναι 50 μέρη ενός πλάτους προβολής κομμένα κάθετα σε 100 ίσα μέρη, ενώ 50vh είναι 50 μέρη ύψους παραθύρου προβολής κομμένο οριζόντια σε 100 ίσα μέρη. .cb -w: 35vw; - h: 40vw. -b: 4vw; -b2: calc (var (-b) * 2). φόντο: url (bg.jpg); σύνορα: var (- b) στερεό διαφανές, ύψος: var (- h); πλάτος: var (- w);
Μεγέθυνση της εικόνας φόντου
Ιστορικό αξία το δίνω: .cb -w: 35vw; - h: 40vw. -b: 4vw; -b2: calc (var (-b) * 2). υπόβαθρο: url (bg.jpg) κέντρο / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); σύνορα: var (- b) στερεό διαφανές, ύψος: var (- h); πλάτος: var (- w);
calc (var (- w) + var (- b2))] είναι το άθροισμα του πλάτος της διαίρεσης [var (- w)] και το πλάτος του αριστερού & δεξιού περιγράμματος [var (- β2)].calc (var (- h) + var (- b2))] είναι το άθροισμα του ύψος της διαίρεσης [var (- h)] και το πλάτος των άνω και κάτω ορίων [var (- β2)].div (συμπεριλαμβανομένης της περιοχής των συνόρων).κέντρο λέξη-κλειδί ευθυγραμμίζει την εικόνα φόντου στο κέντρο του div.div, θυμάμαι να περιλαμβάνει την περιοχή γεμίσματος στο μέγεθος του φόντου, όπως και στην περιοχή των συνόρων.
Καλύψτε την περιοχή αποκλεισμού των συνόρων
κουτί-σκιά ένθεση. .cb -w: 35vw; - h: 40vw. -b: 4vw; -b2: calc (var (-b) * 2). υπόβαθρο: url (bg.jpg) κέντρο / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); σύνορα: var (- b) στερεό διαφανές, κουτί σκιά: ένθετο var (- w) 0 0 rgba (0,120,237, .5); ύψος: var (- h); πλάτος: var (- w);
var (- w) καλύπτει ολόκληρο το πλάτος του div. Η χρήση του rgba η λειτουργία χρωμάτων επιτρέπει κάποια διαφάνεια για να προστεθεί στο μείγμα, ωστόσο μπορείτε επίσης να χρησιμοποιήσετε ένα αδιαφανές χρώμα εάν θέλετε να καλύψετε πλήρως την κεντρική περιοχή.
Προσθέστε ένα επιπλέον περίγραμμα με
κουτί-σκιάκουτί-σκιά αξία είναι: .cb -w: 35vw; - h: 40vw. -b: 4vw; -b2: calc (var (-b) * 2). υπόβαθρο: url (bg.jpg) κέντρο / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); σύνορα: var (- b) στερεό διαφανές, κουτί σκιά: ένθετο var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 calc (var (- b) / 2) άσπρο; ύψος: var (- h); πλάτος: var (- w);
calc (var (-b) / 2) λειτουργία δημιουργεί μια σκιά του το ήμισυ του πλάτους των συνόρων.
Προαιρετικά: Ξεχωριστή διάταξη και αισθητική
.poster1 στο .αφίσα1 - tbgc: rgba (0,120,237, .5); εικόνα-φόντου: url ("http://bit.ly/2eQBij2"); Ιστορικό είναι ιδιοκτησία στενογραφίας, οι μακροχρόνιες ιδιότητές του μπορούν να αντικατασταθούν / οριστούν ξεχωριστά. Ως εκ τούτου, μπορούμε να ορίσουμε εικόνα φόντου σε .poster1, και αφαιρέστε την τιμή url από το Ιστορικό ιδιοκτησία στο .cb.κουτί-σκιά, μπορούμε να χρησιμοποιήσουμε μια άλλη μεταβλητή CSS. ο --tbgc μεταβλητός διατηρεί την τιμή χρώματος θέλουμε να δώσουμε στο κουτί-σκιά (ελαφριά μπλε στο demo), έτσι μεταξύ των κανόνων στυλ για .cb εμείς αντικαταστήστε την τιμή χρώματος του κουτί-σκιά ιδιοκτησία με var (- tbgc). .cb -w: 35vw; - h: 40vw. -b: 4vw; -b2: calc (var (-b) * 2). υπόβαθρο: κέντρο / υπολογισμού (var (- w) + var (- b2)) calc (var (- h) + var (- b2))? σύνορα: var (- b) στερεό διαφανές, box-shadow: ένθετο var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) άσπρο; ύψος: var (- h); πλάτος: var (- w);
Κωδικός για λειτουργία πορτρέτου
vw, θα φαίνονται πολύ μικρά όταν βλέπετε τον σχεδιασμό σε λειτουργία πορτραίτου (μικρότερο πλάτος σε σχέση με το ύψος) - από τις οποίες όλες οι κινητές συσκευές είναι προεπιλεγμένες. Για την επίλυση αυτού του ζητήματος, διακόπτης vw με vh, και αλλαγή μεγέθους του σχεδίου όπως θεωρείτε κατάλληλα για καταστάσεις πορτρέτου. @media (προσανατολισμός: πορτρέτο) .cb --w: 35vh; -h: 40vh; -b: 4vh;
