Σχεδιάστε τις εικόνες σας και χρησιμοποιήστε τις εικόνες σε στυλ
Πολλοί άνθρωποι χρησιμοποιούν το CSS για να προσαρμόσουν το κείμενο, αλλάζοντας τη γραμματοσειρά, το χρώμα, το μέγεθος και άλλα. Αλλά ένα πράγμα που πολλοί άνθρωποι συχνά ξεχνάμε είναι ότι μπορείτε να χρησιμοποιήσετε το CSS με εικόνες επίσης.
Αλλαγή της ίδιας της εικόνας
Το CSS σάς επιτρέπει να προσαρμόσετε τον τρόπο εμφάνισης της εικόνας στη σελίδα. Αυτό μπορεί να είναι πραγματικά χρήσιμο για τη διατήρηση της σελίδας σας συνεπής. Ορίζοντας στυλ σε όλες τις εικόνες, δημιουργείτε μια τυπική εμφάνιση για τις εικόνες σας. Μερικά από τα πράγματα που μπορείτε να κάνετε:
- Προσθέστε ένα περίγραμμα ή περίγραμμα γύρω από τις εικόνες
- Αφαιρέστε το έγχρωμο περίγραμμα γύρω από τις συνδεδεμένες εικόνες
- Ρύθμιση του πλάτους και / ή του ύψους των εικόνων
- Προσθέστε μια σκιά σταγόνας
- Περιστρέψτε την εικόνα
- Αλλάξτε τα στυλ όταν η εικόνα κινείται πάνω
Η παράδοση της εικόνας σας σε ένα περίγραμμα είναι ένα εξαιρετικό μέρος για να ξεκινήσετε. Αλλά θα πρέπει να σκεφτείτε περισσότερο από ό, τι τα σύνορα - σκεφτείτε ολόκληρο το άκρο της εικόνας σας και να ρυθμίσετε τα περιθώρια και την επένδυση επίσης. Μια εικόνα με ένα λεπτό μαύρο περιθώριο φαίνεται ωραίο, αλλά η προσθήκη κάποιου padding μεταξύ του περιγράμματος και της εικόνας μπορεί να φανεί ακόμα καλύτερα.
img {
σύνορα: 1px μαύρο?
padding: 5px;
}}
Είναι καλή ιδέα να συνδέετε πάντα τις μη διακοσμητικές εικόνες , όταν είναι δυνατόν. Αλλά όταν το κάνετε, θυμηθείτε ότι τα περισσότερα προγράμματα περιήγησης προσθέτουν ένα χρωματιστό περίγραμμα γύρω από την εικόνα. Ακόμη και αν χρησιμοποιείτε τον παραπάνω κώδικα για να αλλάξετε το περίγραμμα, ο σύνδεσμος θα αντικαταστήσει αυτό εκτός και αν αφαιρέσετε ή αλλάξετε το περίγραμμα του συνδέσμου. Για να γίνει αυτό, θα πρέπει να χρησιμοποιήσετε έναν παιδικό κανόνα CSS για να καταργήσετε ή να αλλάξετε το περίγραμμα των συνδεδεμένων εικόνων:
img> a {
σύνορα: κανένα ·
}}
Μπορείτε επίσης να χρησιμοποιήσετε το CSS για να αλλάξετε ή να ρυθμίσετε το ύψος και το πλάτος των εικόνων σας. Παρόλο που δεν είναι πολύ καλή ιδέα να χρησιμοποιήσετε το πρόγραμμα περιήγησης για να προσαρμόσετε τα μεγέθη εικόνων λόγω των ταχυτήτων λήψης, γίνονται πολύ καλύτερα στην αλλαγή μεγέθους των εικόνων έτσι ώστε να φαίνονται ακόμα καλά. Και με το CSS μπορείτε να ρυθμίσετε όλες τις εικόνες σας σε ένα κανονικό πλάτος ή ύψος ή ακόμα και να ορίσετε τις διαστάσεις που πρέπει να είναι σχετικές με το δοχείο.
Θυμηθείτε ότι όταν αλλάζετε το μέγεθος των εικόνων, για καλύτερα αποτελέσματα, πρέπει να αλλάξετε το μέγεθος μόνο μιας διάστασης - το ύψος ή το πλάτος. Αυτό θα οδηγήσει στο ότι η εικόνα διατηρεί την αναλογία της, και έτσι δεν φαίνεται παράξενο. Ρυθμίστε την άλλη τιμή σε αυτόματη ή αφήστε την έξω για να πείτε στο πρόγραμμα περιήγησης να διατηρήσει το λόγο διαστάσεων.
img {
πλάτος: 50%.
ύψος: αυτόματο;
}}
Το CSS3 προσφέρει μια λύση στο πρόβλημα αυτό με τις νέες ιδιότητες προσαρμογής αντικειμένων και αντικειμένων. Με αυτές τις ιδιότητες θα μπορείτε να ορίσετε το ακριβές ύψος και πλάτος εικόνας και τον τρόπο χειρισμού του λόγου διαστάσεων. Αυτό μπορεί να δημιουργήσει εφέ γραμματοκιβωτίου γύρω από τις εικόνες σας ή περικοπή για να πάρει την εικόνα να ταιριάζει στο απαιτούμενο μέγεθος.
Ενώ οι ιδιότητες αντιστοίχισης αντικειμένων CSS3 και θέσης αντικειμένων δεν υποστηρίζονται ευρέως ακόμα, υπάρχουν και άλλες ιδιότητες CSS3 που υποστηρίζονται καλά στα περισσότερα σύγχρονα προγράμματα περιήγησης που μπορείτε να χρησιμοποιήσετε για να τροποποιήσετε τις εικόνες σας. Τα πράγματα όπως οι σκιάσεις, οι στρογγυλεμένες γωνίες και οι μετασχηματισμοί για να περιστρέψετε, να κουνήσουν ή να μετακινήσετε τις εικόνες σας λειτουργούν τώρα στα περισσότερα σύγχρονα προγράμματα περιήγησης. Στη συνέχεια, μπορείτε να χρησιμοποιήσετε τις μεταβάσεις CSS για να αλλάξετε τις εικόνες όταν μετακινηθείτε πάνω ή κάντε κλικ ή μόλις μετά από κάποιο χρονικό διάστημα.
Χρήση εικόνων ως φόντου
Το CSS καθιστά εύκολη τη δημιουργία φανταχτερών φόντων με τις εικόνες σας.
Μπορείτε να προσθέσετε φόντα σε ολόκληρη τη σελίδα ή σε ένα συγκεκριμένο στοιχείο. Είναι εύκολο να δημιουργήσετε μια εικόνα φόντου στη σελίδα με την ιδιότητα φόντου-εικόνας:
σώμα {
εικόνα φόντου: url (φόντο.jpg);
}}
Αλλάξτε τον επιλογέα σώματος σε ένα συγκεκριμένο στοιχείο στη σελίδα για να βάλετε το φόντο σε ένα μόνο στοιχείο.
Ένα άλλο πράγμα που μπορείτε να κάνετε με τις εικόνες είναι να δημιουργήσετε μια εικόνα φόντου που δεν μετακινείται με την υπόλοιπη σελίδα - όπως ένα υδατογράφημα. Χρησιμοποιείτε μόνο το προσάρτημα φόντου στυλ: σταθερό. μαζί με την εικόνα φόντου σας. Άλλες επιλογές για τα υπόβαθρά σας περιλαμβάνουν τη δημιουργία κεραμιδιών μόνο οριζόντια ή κάθετα χρησιμοποιώντας την ιδιότητα επαναλαμβανόμενου φόντου.
Σύνταξη αναπαράστασης φόντου: repeat-x; για να ορίσετε την οριζόντια εικόνα και την επανάληψη του φόντου: repeat-y; στο πλακάκι κάθετα. Και μπορείτε να τοποθετήσετε την εικόνα φόντου με την ιδιότητα θέσης φόντου.
Και το CSS3 προσθέτει περισσότερα στυλ για τα φόντα σας επίσης. Μπορείτε να τεντώσετε τις εικόνες σας ώστε να ταιριάζουν σε οποιοδήποτε υπόβαθρο μεγέθους ή να ορίσετε την εικόνα φόντου για να κλιμακωθεί με το μέγεθος του παραθύρου . Μπορείτε να αλλάξετε τη θέση και να κόψετε την εικόνα φόντου. Αλλά ένα από τα καλύτερα πράγματα για το CSS3 είναι ότι τώρα μπορείτε να στρώσετε πολλαπλές εικόνες φόντου για να δημιουργήσετε ακόμα πιο περίπλοκα εφέ.
Το HTML5 βοηθά τις εικόνες στυλ
Το στοιχείο FIGURE στο HTML5 θα πρέπει να τοποθετείται γύρω από κάθε εικόνα που μπορεί να παραμείνει μόνη της μέσα στο έγγραφο. Ένας τρόπος για να το σκεφτείς είναι αν η εικόνα μπορεί να εμφανιστεί σε ένα προσάρτημα, τότε θα πρέπει να βρίσκεται μέσα στο στοιχείο FIGURE. Στη συνέχεια, μπορείτε να χρησιμοποιήσετε αυτό το στοιχείο και το στοιχείο FIGCAPTION για να προσθέσετε στυλ στις εικόνες σας.