Πολλοί άνθρωποι χρησιμοποιούν CSS για να προσαρμόσετε το κείμενο, αλλάζοντας τη γραμματοσειρά, το χρώμα, το μέγεθος και άλλα. Αλλά ένα πράγμα που πολλοί άνθρωποι ξεχνούν συχνά είναι ότι μπορείτε να χρησιμοποιήσετε CSS και με εικόνες.
Αλλαγή της εικόνας από μόνη της
Το CSS σάς επιτρέπει να προσαρμόσετε τον τρόπο εμφάνισης της εικόνας στη σελίδα. Αυτό μπορεί να είναι πραγματικά χρήσιμο για τη διατήρηση των σελίδων σας συνεπή. Ορίζοντας στυλ σε όλες τις εικόνες, δημιουργείτε μια τυπική εμφάνιση για τις εικόνες σας. Μερικά από τα πράγματα που μπορείτε να κάνετε:
- Προσθέστε περίγραμμα ή περίγραμμα γύρω από τις εικόνες
- Αφαιρέστε το χρωματιστό περίγραμμα γύρω από τις συνδεδεμένες εικόνες
- Προσαρμογή του πλάτους και / ή του ύψους των εικόνων
- Προσθέστε μια σκιά
- Περιστρέψτε την εικόνα
- Αλλάξτε τα στυλ όταν η εικόνα αιωρείται πάνω
Το να δώσετε περίγραμμα στην εικόνα σας είναι ένα εξαιρετικό μέρος για να ξεκινήσετε. Αλλά θα πρέπει να σκεφτείτε κάτι περισσότερο από το περίγραμμα - σκεφτείτε ολόκληρο το άκρο της εικόνας σας και προσαρμόστε τα περιθώρια και
υλικό παραγεμίσματος επισης. Μια εικόνα με ένα λεπτό μαύρο περίγραμμα φαίνεται ωραία, αλλά η προσθήκη μερικής επένδυσης μεταξύ του περιγράμματος και της εικόνας μπορεί να φαίνεται ακόμα καλύτερη.Είναι καλή ιδέα να συνδέετε πάντα μη διακοσμητικές εικόνες, όταν είναι δυνατόν. Αλλά όταν το κάνετε, θυμηθείτε ότι τα περισσότερα προγράμματα περιήγησης προσθέτουν ένα χρωματιστό περίγραμμα γύρω από την εικόνα. Ακόμα κι αν χρησιμοποιείτε τον παραπάνω κωδικό για να αλλάξετε το περίγραμμα, ο σύνδεσμος θα το αντικαταστήσει, εκτός εάν αφαιρέσετε ή αλλάξετε το περίγραμμα και στον σύνδεσμο. Για να το κάνετε αυτό, πρέπει να χρησιμοποιήσετε έναν θυγατρικό κανόνα CSS για να καταργήσετε ή να αλλάξετε το περίγραμμα γύρω από τις συνδεδεμένες εικόνες:
Μπορείτε επίσης να χρησιμοποιήσετε το CSS για να αλλάξετε ή να ορίσετε το ύψος και το πλάτος των εικόνων σας. Αν και δεν είναι καλή ιδέα να χρησιμοποιήσετε το πρόγραμμα περιήγησης για να προσαρμόσετε τα μεγέθη των εικόνων λόγω των ταχυτήτων λήψης, βελτιώνουν πολύ το μέγεθος των εικόνων έτσι ώστε να φαίνονται ακόμα καλές. Και με το CSS μπορείτε να ορίσετε όλες τις εικόνες σας σε τυπικό πλάτος ή ύψος ή ακόμη και να ορίσετε τις διαστάσεις να είναι σχετικές με το κοντέινερ.
Να θυμάστε, όταν αλλάζετε το μέγεθος των εικόνων, για καλύτερα αποτελέσματα, θα πρέπει να αλλάξετε το μέγεθος μόνο μιας διάστασης - το ύψος ή το πλάτος. Αυτό θα διασφαλίσει ότι η εικόνα διατηρεί την αναλογία διαστάσεων και έτσι δεν φαίνεται περίεργη. Ορίστε την άλλη τιμή σε αυτο ή αφήστε το για να πείτε στο πρόγραμμα περιήγησης να διατηρήσει τη σχέση διαστάσεων σταθερή.
Το CSS3 προσφέρει μια λύση σε αυτό το πρόβλημα με τις νέες ιδιότητες προσαρμογή αντικειμένου και αντικείμενο-θέση. Με αυτές τις ιδιότητες, θα μπορείτε να καθορίσετε το ακριβές ύψος και πλάτος της εικόνας και τον τρόπο χειρισμού του λόγου διαστάσεων. Αυτό μπορεί να δημιουργήσει εφέ γραμματοκιβωτίου γύρω από τις εικόνες σας ή περικοπή, ώστε η εικόνα να χωρέσει στο απαιτούμενο μέγεθος.
Υπάρχουν και άλλες ιδιότητες CSS3 που υποστηρίζονται καλά στα περισσότερα προγράμματα περιήγησης που μπορείτε να χρησιμοποιήσετε και για να τροποποιήσετε τις εικόνες σας. Πράγματα όπως σκιές, στρογγυλεμένες γωνίες και μετασχηματισμοί για περιστροφή, λοξή ή μετακίνηση των εικόνων σας λειτουργούν τώρα στα περισσότερα σύγχρονα προγράμματα περιήγησης. Στη συνέχεια, μπορείτε να χρησιμοποιήσετε τις μεταβάσεις CSS για να κάνετε τις εικόνες να αλλάζουν όταν τοποθετείτε το δείκτη του ποντικιού ή κάντε κλικ ή αμέσως μετά από ένα χρονικό διάστημα.
Χρήση εικόνων ως φόντου
Το CSS διευκολύνει τη δημιουργία φανταχτερών φόντων με τις εικόνες σας. Μπορείς προσθέστε φόντο σε ολόκληρη τη σελίδα ή σε ένα συγκεκριμένο στοιχείο. Είναι εύκολο να δημιουργήσετε μια εικόνα φόντου στη σελίδα με το εικόνα φόντου ιδιοκτησία:
Αλλαξε το σώμα επιλογέα σε ένα συγκεκριμένο στοιχείο στη σελίδα για να τοποθετήσετε το φόντο σε ένα μόνο στοιχείο.
Ένα άλλο διασκεδαστικό πράγμα που μπορείτε να κάνετε με εικόνες είναι να δημιουργήσετε μια εικόνα φόντου που δεν μετακινείται με την υπόλοιπη σελίδα - όπως ένα υδατογράφημα. Απλά χρησιμοποιείτε το στυλ φόντο-συνημμένο: σταθερό; μαζί με την εικόνα φόντου σας. Άλλες επιλογές για το υπόβαθρό σας περιλαμβάνουν την κατασκευή πλακιδίων μόνο οριζόντια ή κάθετα χρησιμοποιώντας το επανάληψη φόντο ιδιοκτησία. Γράφω επανάληψη φόντου: επανάληψη-x; για να πλακάρετε την εικόνα οριζόντια και επανάληψη φόντου: επανάληψη-y; να πλακιδίων κάθετα. Και μπορείτε να τοποθετήσετε την εικόνα φόντου σας με το φόντο-θέση ιδιοκτησία.
Και το CSS3 προσθέτει περισσότερα στυλ και για το φόντο σας. Μπορείτε να τεντώσετε τις εικόνες σας ώστε να ταιριάζουν σε οποιοδήποτε μέγεθος φόντου ή να ρυθμίσετε την εικόνα φόντου σε κλίμακα με το μέγεθος του παραθύρου. Μπορείτε να αλλάξετε τη θέση και, στη συνέχεια, να κάνετε κλιπ στην εικόνα φόντου. Αλλά ένα από τα καλύτερα πράγματα για το CSS3 είναι ότι μπορείτε τώρα να στρώσετε πολλές εικόνες φόντου για να δημιουργήσετε ακόμη πιο περίπλοκα εφέ.
HTML5 Βοηθά τις εικόνες στυλ
ο ΦΙΓΟΥΡΑ Το στοιχείο στο HTML5 θα πρέπει να τοποθετείται γύρω από οποιεσδήποτε εικόνες μπορούν να είναι ανεξάρτητες μέσα στο έγγραφο. Ένας τρόπος να το σκεφτείτε είναι εάν η εικόνα θα μπορούσε να εμφανιστεί σε ένα παράρτημα, τότε θα πρέπει να βρίσκεται μέσα στο ΦΙΓΟΥΡΑ στοιχείο. Στη συνέχεια, μπορείτε να χρησιμοποιήσετε αυτό το στοιχείο και το ΣΧΗΜΑ στοιχείο για να προσθέσετε στυλ στις εικόνες σας.