Κατά τη βελτίωση των εικόνων μπορούμε να επιλέξουμε να το κάνουμε με το Photoshop και μετά να το τοποθετήσουμε στην ιστοσελίδα ή μπορούμε επίσης να επιλέξουμε την επιλογή Β: κάντε το με τις διαθέσιμες τεχνικές HTML, CSS και Javascript.
Μετά το άλμα υπάρχουν πολλές τεχνικές για τη βελτίωση των εικόνων, σχεδόν όλες φτιαγμένες με το jQuery ως κύρια βάση ή με CSS3 αξιοποιώντας τα τελευταία πρότυπα ιστού, αν και σας υπενθυμίζω ότι σε αυτήν την περίπτωση χάνουμε τη συμβατότητα με ορισμένα προγράμματα περιήγησης.
Είναι στα Αγγλικά, αλλά έχουν παγιδευτεί εν πτήσει :)
Πηγή | 1ο WD
CSS3 στρογγυλεμένη εικόνα με jQuery
Μάθετε να τυλίγετε μια ετικέτα span γύρω από το στοιχείο εικόνας για να επιτύχετε στρογγυλεμένες εικόνες που θα εμφανίζονται απευθείας σε όλα τα σύγχρονα προγράμματα περιήγησης.
2.
Πολλαπλά υπόβαθρα και σύνορα με CSS 2.1
Μάθετε πώς να χρησιμοποιείτε τα ψευδο-στοιχεία CSS 2.1 για να παρέχετε έως και 3 καμβά παρασκηνίου, 2 εικόνες παρουσίασης σταθερού μεγέθους και πολλά περίπλοκα περιγράμματα για ένα μεμονωμένο στοιχείο HTML.
3.
Γρήγορη συμβουλή: Πολλαπλά σύνορα με απλό CSS
Γρήγορη προβολή οθόνης που σας δείχνει πώς να επιτύχετε πολλαπλά περιγράμματα με απλό CSS, προσθέτοντας έτσι περισσότερο βάθος στα σχέδιά σας. Πολύ απλούστερη έκδοση του προηγούμενου σεμιναρίου.
4.
Πολλαπλά περιθώρια σε δυναμικά στοιχεία με CSS2
Τρίτη έκδοση του Νικολά Γκάλαγκερ δείχνοντας τι να κάνετε αν δεν το μέγεθος του στοιχείου.
5.
Καλή διασκέδαση με σύνορα - λοξότμητα, πιεσμένα και άλλα!
Μάθετε πώς να επιτυγχάνετε πιεσμένο εφέ με CSS και μερικά απλά κόλπα στυλ περιγράμματος για να έχετε διάφορα εφέ.
6.
Polaroids με CSS3
Μάθετε πώς να χρησιμοποιείτε μερικά καταπληκτικά CSS2 και CSS3 για να μετατρέψετε μια κατά τα άλλα απαράδεκτη λίστα εικόνων σε ένα πλήρες σύνολο εικόνων Polaroid.
7.
Τέλεια εικόνα φόντου πλήρους σελίδας
Μάθετε πώς να προσθέτετε εικόνα φόντου με CSS που γεμίζει ολόκληρη τη σελίδα με εικόνα, χωρίς κενό διάστημα, κλίμακα εικόνας ανάλογα με τις ανάγκες, δεν προκαλεί γραμμές κύλισης και πολλά άλλα.
8.
CSS3 Box Shadow και Image Hover Effects
Εξερευνήστε έναν νέο τρόπο προσθήκης εφέ drop shadow μόνο με την επεξεργασία ενός φύλλου στυλ.
9.
Fancy Thumbnail Hover Effect w / jQuery
Εξασφαλίστε τακτοποιημένο εφέ στιλ φλας με CSS και jQuery.
10.
Πώς να δημιουργήσετε απλό CSS Image Rollover Effect
Σε αυτό το σεμινάριο θα μάθετε πώς να δημιουργείτε απλό εφέ εναλλαγής εικόνων CSS με βασικό στυλ HTML και CSS.
11.
Πλωτό
Το Floatutorial σας καθοδηγεί στα βασικά στοιχεία των αιωρούμενων στοιχείων, όπως εικόνες, καπάκια, κουμπιά επόμενου και πίσω, γκαλερί εικόνων, ενσωματωμένες λίστες και διατάξεις πολλών στηλών. Δείτε 4 μαθήματα αφιερωμένα στην εικόνα
12.
Εφέ Snazzy Hover με χρήση CSS
Σε αυτό το σεμινάριο, θα προχωρήσετε στη δημιουργία ευέλικτων προηγμένων τεχνικών αιωρήματος χρησιμοποιώντας ιδιότητες CSS2.1.
13.
Γρήγορη ανατροπή χωρίς
Προφόρτωση
Όταν χρησιμοποιείτε ανατροπές εικόνων CSS, πρέπει να φορτώνονται δύο, τρεις ή περισσότερες εικόνες (και συχνά να είναι προφορτωμένες για καλύτερα αποτελέσματα). Μάθετε πώς να τοποθετήσετε όλες τις καταστάσεις σε μία εικόνα, οι δυναμικές αλλαγές γίνονται πιο γρήγορες και δεν απαιτείται προφόρτιση.
14.
jQuery Στρογγυλεμένες γωνίες
Πολλά εφέ jQuery για στρογγυλεμένες γωνίες και πολύ περισσότερα σχέδια.
15.
Ευκολότερη επεξήγηση εργαλείου και προεπισκόπηση εικόνας χρησιμοποιώντας το jQuery
Δείτε 3 παραδείγματα χρήσης σεναρίου προεπισκόπησης rollover jQuery. Αυτό το απλό σενάριο μπορεί να εφαρμοστεί για διάφορους σκοπούς.
16.
Μεγάλα μεγέθη - Φόντο πλήρους οθόνης /
Slideshow
Πρόσθετο jQuery
Το Superzided είναι ένα πρόσθετο jQuery που αλλάζει το μέγεθος των εικόνων για να γεμίσει το πρόγραμμα περιήγησης διατηρώντας παράλληλα την αναλογία διάστασης εικόνας και κύκλους Εικόνες / φόντα μέσω παρουσίασης με μεταβάσεις και προφόρτιση.
17.
Επικάλυψη PNG
Έχετε αντιμετωπίσει ποτέ το πρόβλημα της δημιουργίας ενός ιστότοπου με εικόνες που έδωσε ο πελάτης, μόνο για να βρείτε αργότερα αφού ενημερώσει τη φωτογραφία του την αρχική εμφάνιση και αίσθηση δεν διατηρείται; Αυτή η λύση περιλαμβάνει τη δημιουργία μιας διαφανούς επικάλυψης PNG που μπορεί να χρησιμοποιηθεί ως μάσκα / πλαίσιο γύρω από τα κανονικά JPEG ή GIF. Με αυτόν τον τρόπο, μπορεί να ρυθμιστεί μια τυπική εγκατάσταση CMS, ώστε οι χρήστες να μπορούν να ανεβάζουν φωτογραφίες χωρίς να χρειάζεται να ανησυχούν για τη χρήση οποιουδήποτε προγράμματος γραφικών για την εφαρμογή φίλτρων.
18.
BeZoom
Μικρό βάρος
JQuery
Προσθήκη ζουμ
Το BeZoom είναι μια απλή και ελαφριά εναλλακτική λύση για JQZoom. Είναι ελαφρύτερο και είναι πιο εύκολο στη χρήση.
19.
Χρήση του jQuery για κινούμενες εικόνες φόντου
Παίξτε με το jQuery και αλλάξτε τη θέση της εικόνας φόντου για να δημιουργήσετε τον τύπο εφέ που αναζητάτε. Υπάρχει ένα νέο άρθρο που απαντά στο "Πώς μπορώ να χειριστώ ενεργές καταστάσεις;" - Χειρισμός ενεργής κατάστασης για κινούμενα υπόβαθρα jQuery.
20.
5 τρόποι για να βελτιώσετε τις εικόνες σας με CSS
Ακολουθούν μερικά απλά κόλπα για να προσθέσετε κάποια γεύση στις τυπικές ήπιες εικόνες σας. Η χρήση του Photoshop για το στυλ κάθε εικόνας μπορεί να είναι κουραστική και δύσκολο να διατηρηθεί μακροπρόθεσμα. Αυτές οι τεχνικές CSS που ακολουθούν θα σας βοηθήσουν να ανακουφίσετε αυτόν τον πόνο.
21.
Πως να:
Αλλαγή μεγέθους
Εικόνα φόντου
Μάθετε πώς μπορείτε να ρυθμίσετε την εικόνα φόντου με δυνατότητα αλλαγής μεγέθους με CSS. Έχετε 3 επιλογές για να διαλέξετε.
22.
Στυλ στυλ των συνδέσμων εικόνας σας
Η ενημέρωση των χρηστών ότι συγκεκριμένη ενότητα του ιστότοπού μας προορίζεται για κλικ, επιτυγχάνεται καλύτερα μέσω του ποντικιού πάνω από το αποτέλεσμα. Αυτές οι ενότητες «με δυνατότητα κλικ» περιλαμβάνουν σίγουρα εικόνες περιεχομένου. Το Image Link είναι ένα σενάριο που σας επιτρέπει να εφαρμόσετε επιπλέον στυλ στους συνδέσμους εικόνας σας.
23.
Πολλαπλές εικόνες φόντου με CSS
Μερικές φορές, είναι πιο λογικό να χρησιμοποιείτε εικόνες φόντου παρά να τις εισάγετε απευθείας στη σελίδα. Και ενώ κάθε στοιχείο - όπως η ετικέτα του σώματός σας - μπορεί να κρατήσει μόνο μία εικόνα φόντου, μπορεί να εφαρμοστεί σε πολλά στοιχεία.
24.
Σύνορα εικόνας με CSS
Πραγματικά εύκολο σεμινάριο που σας δείχνει πώς να προσθέσετε συμπαγές περίγραμμα σε εικόνες χρησιμοποιώντας CSS.
25.
CSS Sprites χωρίς χρήση εικόνων φόντου
Μάθετε πώς να εφαρμόζετε το εφέ hover χωρίς πολλές γνώσεις σχετικά με τα CSS sprites.
