Φωτογραφική ιδιότητα CSS3 για την οριοθέτηση της εικόνας Κάνοντας τις φωτογραφίες πραγματικά δροσερές!
Η δημιουργία συνόρων δεν είναι κάτι νέο στο HTML & & CSS. μπορέσαμε να προσθέσουμε σύνορα από την αρχή. Μπορεί να έχετε εξοικειωθεί με στέρεα σύνορα, διάστικτα σύνορα, διακεκομμένα σύνορα και ούτω καθεξής.
Αλλά, με τη νέα ιδιότητα CSS3 border-image, η δημιουργία συνόρων σε στοιχεία HTML γίνεται όλο και πιο προηγμένη. λοιπόν, απλά θέσαμε, τώρα μπορούμε να προσθέσουμε ένα σύνορο χρησιμοποιώντας μια εικόνα ως πηγή που θα μας επιτρέψει να προσθέσουμε πιο ελκυστικά σύνορα. Εντάξει, τώρα ας δούμε πώς λειτουργεί αυτή η ιδιότητα.
Σύνταξη και υποστήριξη προγράμματος περιήγησης
Η εικόνα περιγράμματος στο CSS3 ορίζεται με την ακόλουθη σύνταξη σύντομης γραφής:
Εικόνα: εικόνα [πηγή εικόνας] [φέτα] [πλάτος] [αρχή] [επανάληψη];
Η παραπάνω σύνταξη είναι η επίσημη έκδοση από το W3C που υποστηρίζεται μόνο στο Chrome, ενώ το Opera, το Firefox και το Safari εξακολουθούν να απαιτούν την εκ των προτέρων έκδοση (-o-, -moz-, -webkit-), και ο Internet Explorer δεν εκπλήσσει ότι δεν υποστηρίζει αυτήν την ιδιότητα καθόλου.
Επιπλέον, το [πλάτος] και το [αρχή] αξία σε αυτό συνοριακή εικόνα ιδιότητες δεν υποστηρίζονται ακόμα σε κανένα πρόγραμμα περιήγησης, ωστόσο, η τιμή πλάτους μπορεί να αντικατασταθεί χρησιμοποιώντας το πλάτος ιδιοκτησία.
Έτσι, εν ολίγοις, για τώρα μπορούμε να εφαρμόσουμε μόνο την αξία του [πηγή εικόνας], [φέτα] και [επαναλαμβάνω] .
εικόνα-πλαισίου: [πηγή εικόνας] [φέτα] [επανάληψη];
Εικόνα Φέτα
Πριν προχωρήσουμε για να επιδείξουμε αυτή την ιδιότητα, ας μιλήσουμε για το “φέτα εικόνας” πρώτα δεδομένου ότι είναι κάτι νέο στη δήλωση ενός ακινήτου. Η εικονοστοιχία της εικόνας θα καθορίσει την περικοπή της εικόνας που αντιστοιχεί αντίστοιχα στο σημείο εκκίνησης από την κορυφή, δεξιά, κάτω και αριστερά από τις άκρες της εικόνας που στη συνέχεια θα διαιρέσουν επίσης την εικόνα σε εννέα ενότητες, όπως φαίνεται στην παρακάτω εικόνα.
Στην παραπάνω εικόνα, θα δείτε ότι τα τμήματα 1, 3, 7 και 9 θα γίνουν οι γωνίες των συνόρων και των τμημάτων 2, 4, 6 και 8 θα γίνει η άκρη ή η γραμμή του περιθωρίου, διασφαλίζοντας ότι το τμήμα στο οποίο θα γίνει η άκρη είναι επαναλαμβανόμενο ή τεντώσιμο.
Η τιμή των φετών μπορεί να δηλωθεί με a εικονοκύτταρο μονάδα ή ποσοστό (%) μονάδα για ευέλικτη μέτρηση.
περισσότερες αναφορές:
- CSS Backgrounds and Borders Επίπεδο 3
Δημιουργία πλαισίου φωτογραφιών
Τώρα, ας δείξουμε την ιδιοκτησία σε ένα πραγματικό παράδειγμα.
Αυτή τη φορά, θα εφαρμόσουμε το συνοριακή εικόνα για να δημιουργήσουμε ένα πλαίσιο φωτογραφιών και θα χρησιμοποιήσουμε την παρακάτω εικόνα ως πηγή. Έχουμε μετρήσει προσεκτικά την εικόνα, ώστε να μπορεί να τεμαχιστεί σωστά, να επαναληφθεί και να τεντωθεί ανεξάρτητα από το πλάτος του περιεχομένου και το ύψος.
Σημείωση: μπορείτε να κατεβάσετε την εικόνα παραπάνω από αυτόν τον σύνδεσμο.
Επίσης, σε αυτήν την επίδειξη θα χρησιμοποιήσουμε αυτήν την εκπληκτική ταινία Cinemagraph από Me To You ως φωτογραφία.
(Πηγή εικόνας: Από μένα σε εσένα)
Η σήμανση
Η σήμανση είναι τόσο απλή όσο αυτή:
Μην ξεχάσετε να αντικαταστήσετε το images_2 / css3-border-image-property-making-φωτογραφίες-πραγματικά-cool_3.jpg με τη δική σας φωτογραφία.
Τα στυλ
Και τότε, ας δώσουμε ένα πλαίσιο χρησιμοποιώντας συνοριακή εικόνα.
Εάν κοιτάξετε την παραπάνω εικόνα, το πλάτος της εικόνας είναι 180px συνολικά. Αυτή η τιμή μπορεί στη συνέχεια να διαιρεθεί σε 6 που κάθε τμήμα είναι 30px. και έτσι θα φέρουμε την εικόνα για 30px.
Εάν χρησιμοποιείτε την τιμή μήκους για το κομμάτι, θα πρέπει να εξαιρέσετε το px μονάδα, καθώς αυτόματα θα μεταφραστεί σε εικονοκύτταρο, αλλά αν αποφασίσετε να χρησιμοποιήσετε το ποσοστό, θα χρειαστεί να προσθέσετε το (%).
Όσο για την επανάληψη της εικόνας, θα χρησιμοποιήσουμε την προεπιλογή. επαναλαμβάνω. Εναλλακτικά, μπορείτε να χρησιμοποιήσετε τέντωμα και μην ανησυχείτε, η εικόνα των συνόρων θα φαίνεται ακόμα χαριτωμένη.
img border-image: url ("images / frame.png") 30 επανάληψη; -ο-όριο-εικόνα: url ("images / frame.png") 30 επανάληψη; -moz-border-image: url ("images / frame.png") 30 επανάληψη; -webkit-border-image: url ("images / frame.png") 30 επανάληψη; πλάτος περιθωρίου: 30px; Επιπλέον, θέλουμε επίσης να τοποθετήσουμε την εικόνα στο κέντρο του παραθύρου του προγράμματος περιήγησης καθώς και να προσθέσουμε μια υφή φόντου στο έγγραφο για να την καταστήσουμε πιο επιτακτική.
html φόντο: url ('images / lightpaperfibers.png'); . περιτύλιγμα margin: 20px auto; ύψος: 476px; πλάτος: 675px; κείμενο-ευθυγράμμιση: κέντρο; Εντάξει, νομίζω ότι έχουμε τελειώσει εδώ, τώρα ας το δούμε σε ένα πρόγραμμα περιήγησης.
- Διαδήλωση
- Λήψη πηγής
Νιώθεις ότι κοιτάς μια μαγική ζωγραφική στο Χόγκουαρτς?
Τελική σκέψη
Αυτό συνοριακή εικόνα είναι αναμφίβολα μια ωραία προσθήκη στην οικογένεια CSS3. δεν πρέπει πλέον να περιοριστούμε στα απλά απλά σύνορα.
Και σε αυτήν την ανάρτηση, σας δείξαμε πώς μπορούμε να δημιουργήσουμε ένα πλαίσιο εικόνας χωρίς να ανησυχείτε για το περιεχόμενο ή σε αυτήν την περίπτωση τις διαστάσεις της φωτογραφίας (πλάτος και ύψος). Το ύψος και το πλάτος μπορεί να είναι εύκαμπτες, εφόσον η πηγή των περιθωρίων είναι επαναλαμβανόμενη ή τεντώσιμη.
Τέλος, αν εξακολουθείτε να σας αμηχανία συνοριακή εικόνα, υπάρχει ένα εργαλείο που μπορείτε να χρησιμοποιήσετε για να σας βοηθήσουμε να δημιουργήσετε ένα πιο εύκολα: εργαλείο οριοθέτησης εικόνας
