25 Σεμινάρια βελτίωσης εικόνων με CSS και jQuery

Css-3-box-shadow-image-hover-effects-image-styling-backgrounds-εμφάνιση-έμπνευση-add-shadow-border-make-images-stand-out

Κατά τη βελτίωση των εικόνων μπορούμε να επιλέξουμε να το κάνουμε με το Photoshop και μετά να το τοποθετήσουμε στην ιστοσελίδα ή μπορούμε επίσης να επιλέξουμε την επιλογή Β: κάντε το με τις διαθέσιμες τεχνικές HTML, CSS και Javascript.

Μετά το άλμα υπάρχουν πολλές τεχνικές για τη βελτίωση των εικόνων, σχεδόν όλες φτιαγμένες με το jQuery ως κύρια βάση ή με CSS3 αξιοποιώντας τα τελευταία πρότυπα ιστού, αν και σας υπενθυμίζω ότι σε αυτήν την περίπτωση χάνουμε τη συμβατότητα με ορισμένα προγράμματα περιήγησης.

Είναι στα Αγγλικά, αλλά έχουν παγιδευτεί εν πτήσει :)

Πηγή | 1ο WD

CSS3 στρογγυλεμένη εικόνα με jQuery

Μάθετε να τυλίγετε μια ετικέτα span γύρω από το στοιχείο εικόνας για να επιτύχετε στρογγυλεμένες εικόνες που θα εμφανίζονται απευθείας σε όλα τα σύγχρονα προγράμματα περιήγησης.

Css-3-στρογγυλεμένη-εικόνα-με-jquery-εικόνα-αιωρείται-εφέ-εικόνα-στυλ-φόντα-εμφάνιση-έμπνευση-προσθήκη-σκιά-περιγράμματα-κάνουν-εικόνες-ξεχωρίζουν

2.

Πολλαπλά υπόβαθρα και σύνορα με CSS 2.1

Μάθετε πώς να χρησιμοποιείτε τα ψευδο-στοιχεία CSS 2.1 για να παρέχετε έως και 3 καμβά παρασκηνίου, 2 εικόνες παρουσίασης σταθερού μεγέθους και πολλά περίπλοκα περιγράμματα για ένα μεμονωμένο στοιχείο HTML.

Πολλαπλά φόντα-σύνορα-css-2-εικόνα-στυλ-φόντα-εμφάνιση-έμπνευση-προσθήκη-σκιά-όρια-κάνουν-εικόνες-ξεχωρίζουν

3.

Γρήγορη συμβουλή: Πολλαπλά σύνορα με απλό CSS

Γρήγορη προβολή οθόνης που σας δείχνει πώς να επιτύχετε πολλαπλά περιγράμματα με απλό CSS, προσθέτοντας έτσι περισσότερο βάθος στα σχέδιά σας. Πολύ απλούστερη έκδοση του προηγούμενου σεμιναρίου.

Γρήγορη συμβουλή-πολλαπλά σύνορα-με-απλό-css-εικόνα-στυλ-φόντα-εμφάνιση-έμπνευση-προσθήκη-σκιά-περιγράμματα-κάνουν-εικόνες-ξεχωρίζουν

4.

Πολλαπλά περιθώρια σε δυναμικά στοιχεία με CSS2

Τρίτη έκδοση του Νικολά Γκάλαγκερ δείχνοντας τι να κάνετε αν δεν το μέγεθος του στοιχείου.

Πολλαπλά περιγράμματα-δυναμικά-μεγέθη-στοιχεία-με-css-2-εικόνα-στυλ-φόντα-εμφάνιση-έμπνευση-προσθήκη-σκιά-περιγράμματα-κάνουν-εικόνες-ξεχωρίζουν

5.

Καλή διασκέδαση με σύνορα - λοξότμητα, πιεσμένα και άλλα!

Μάθετε πώς να επιτυγχάνετε πιεσμένο εφέ με CSS και μερικά απλά κόλπα στυλ περιγράμματος για να έχετε διάφορα εφέ.

Διασκεδάστε-με-σύνορα-λοξότμητα-πιεσμένα-περισσότερο-εικόνα-στυλ-φόντα-εμφάνιση-έμπνευση-προσθήκη-σκιά-περιγράμματα-κάντε-εικόνες-ξεχωρίστε

6.

Polaroids με CSS3

Μάθετε πώς να χρησιμοποιείτε μερικά καταπληκτικά CSS2 και CSS3 για να μετατρέψετε μια κατά τα άλλα απαράδεκτη λίστα εικόνων σε ένα πλήρες σύνολο εικόνων Polaroid.

Polaroids-css-3-image-styling-backgrounds-εμφάνιση-έμπνευση-add-shadow-border-make-images-stand-out

7.

Τέλεια εικόνα φόντου πλήρους σελίδας

Μάθετε πώς να προσθέτετε εικόνα φόντου με CSS που γεμίζει ολόκληρη τη σελίδα με εικόνα, χωρίς κενό διάστημα, κλίμακα εικόνας ανάλογα με τις ανάγκες, δεν προκαλεί γραμμές κύλισης και πολλά άλλα.

Τέλεια-πλήρης-σελίδα-φόντο-εικόνα-αιωρείται-εφέ-εικόνα-στυλ-φόντα-εμφάνιση-έμπνευση-προσθήκη-σκιά-περιγράμματα-κάνουν-εικόνες-ξεχωρίζουν

8.

CSS3 Box Shadow και Image Hover Effects

Εξερευνήστε έναν νέο τρόπο προσθήκης εφέ drop shadow μόνο με την επεξεργασία ενός φύλλου στυλ.

Css-3-box-shadow-image-hover-effects-image-styling-backgrounds-εμφάνιση-έμπνευση-add-shadow-border-make-images-stand-out

9.

Fancy Thumbnail Hover Effect w / jQuery

Εξασφαλίστε τακτοποιημένο εφέ στιλ φλας με CSS και jQuery.

Fancy-thumbnail-hover-effect-with-jquery-image-styling-backgrounds-εμφάνιση-έμπνευση-add-shadow-border-make-images-stand-out

10.

Πώς να δημιουργήσετε απλό CSS Image Rollover Effect

Σε αυτό το σεμινάριο θα μάθετε πώς να δημιουργείτε απλό εφέ εναλλαγής εικόνων CSS με βασικό στυλ HTML και CSS.

How-to-create-simple-css-image-rollover-effect-image-hover-effects-image-styling-backgrounds-εμφάνιση-inspiration-add-shadow-border-make-images-stand-out

11.

Πλωτό

Το Floatutorial σας καθοδηγεί στα βασικά στοιχεία των αιωρούμενων στοιχείων, όπως εικόνες, καπάκια, κουμπιά επόμενου και πίσω, γκαλερί εικόνων, ενσωματωμένες λίστες και διατάξεις πολλών στηλών. Δείτε 4 μαθήματα αφιερωμένα στην εικόνα

Floatutorial-εικόνα-στυλ-φόντα-εμφάνιση-έμπνευση-add-shadow-border-make-images-stand-out

12.

Εφέ Snazzy Hover με χρήση CSS

Σε αυτό το σεμινάριο, θα προχωρήσετε στη δημιουργία ευέλικτων προηγμένων τεχνικών αιωρήματος χρησιμοποιώντας ιδιότητες CSS2.1.

Snazzy-hover-effect-using-css-image-styling-backgrounds-εμφάνιση-inspiration-add-shadow-border-make-images-stand-out

13.

Γρήγορη ανατροπή χωρίς

Προφόρτωση

Όταν χρησιμοποιείτε ανατροπές εικόνων CSS, πρέπει να φορτώνονται δύο, τρεις ή περισσότερες εικόνες (και συχνά να είναι προφορτωμένες για καλύτερα αποτελέσματα). Μάθετε πώς να τοποθετήσετε όλες τις καταστάσεις σε μία εικόνα, οι δυναμικές αλλαγές γίνονται πιο γρήγορες και δεν απαιτείται προφόρτιση.

Γρήγορες ανατροπές-χωρίς-προφόρτωση-εικόνα-στυλ-φόντα-εμφάνιση-έμπνευση-προσθήκη-σκιά-περιγράμματα-κάνουν-εικόνες-ξεχωρίζουν

14.

jQuery Στρογγυλεμένες γωνίες

Πολλά εφέ jQuery για στρογγυλεμένες γωνίες και πολύ περισσότερα σχέδια.

Στρογγυλεμένες γωνίες-jquery-εικόνα-στυλ-φόντα-εμφάνιση-έμπνευση-add-shadow-border-make-images-stand-out

15.

Ευκολότερη επεξήγηση εργαλείου και προεπισκόπηση εικόνας χρησιμοποιώντας το jQuery

Δείτε 3 παραδείγματα χρήσης σεναρίου προεπισκόπησης rollover jQuery. Αυτό το απλό σενάριο μπορεί να εφαρμοστεί για διάφορους σκοπούς.

Ευκολότερο εργαλείο-συμβουλή-προεπισκόπηση-χρήση-jquery-εικόνα-στυλ-φόντα-εμφάνιση-έμπνευση-προσθήκη-σκιά-περιγράμματα-κάνουν-εικόνες-ξεχωρίζουν

16.

Μεγάλα μεγέθη - Φόντο πλήρους οθόνης /

Slideshow

Πρόσθετο jQuery

Το Superzided είναι ένα πρόσθετο jQuery που αλλάζει το μέγεθος των εικόνων για να γεμίσει το πρόγραμμα περιήγησης διατηρώντας παράλληλα την αναλογία διάστασης εικόνας και κύκλους Εικόνες / φόντα μέσω παρουσίασης με μεταβάσεις και προφόρτιση.

Υπερμεγέθης πλήρης οθόνη-φόντο-παρουσίαση-jwuery-plugin-εικόνα-στυλ-φόντα-εμφάνιση-έμπνευση-προσθήκη-σκιά-περιγράμματα-κάνει-εικόνες-ξεχωρίζουν

17.

Επικάλυψη PNG

Έχετε αντιμετωπίσει ποτέ το πρόβλημα της δημιουργίας ενός ιστότοπου με εικόνες που έδωσε ο πελάτης, μόνο για να βρείτε αργότερα αφού ενημερώσει τη φωτογραφία του την αρχική εμφάνιση και αίσθηση δεν διατηρείται; Αυτή η λύση περιλαμβάνει τη δημιουργία μιας διαφανούς επικάλυψης PNG που μπορεί να χρησιμοποιηθεί ως μάσκα / πλαίσιο γύρω από τα κανονικά JPEG ή GIF. Με αυτόν τον τρόπο, μπορεί να ρυθμιστεί μια τυπική εγκατάσταση CMS, ώστε οι χρήστες να μπορούν να ανεβάζουν φωτογραφίες χωρίς να χρειάζεται να ανησυχούν για τη χρήση οποιουδήποτε προγράμματος γραφικών για την εφαρμογή φίλτρων.

Png-επικάλυψη-εικόνα-στυλ-φόντα-εμφάνιση-έμπνευση-προσθήκη-σκιά-περίγραμμα-κάνει-εικόνες-ξεχωρίζει

18.

BeZoom

Μικρό βάρος

JQuery

Προσθήκη ζουμ

Το BeZoom είναι μια απλή και ελαφριά εναλλακτική λύση για JQZoom. Είναι ελαφρύτερο και είναι πιο εύκολο στη χρήση.

Bezoom-ελαφρύ-jquery-zoom-plugin-image-styling-background-εμφάνιση-έμπνευση-add-shadow-border-make-images-stand-out

19.

Χρήση του jQuery για κινούμενες εικόνες φόντου

Παίξτε με το jQuery και αλλάξτε τη θέση της εικόνας φόντου για να δημιουργήσετε τον τύπο εφέ που αναζητάτε. Υπάρχει ένα νέο άρθρο που απαντά στο "Πώς μπορώ να χειριστώ ενεργές καταστάσεις;" - Χειρισμός ενεργής κατάστασης για κινούμενα υπόβαθρα jQuery.

Χρήση-jquery-for-background-image-animations-image-styling-backgrounds-εμφάνιση-inspiration-add-shadow-border-make-images-stand-out

20.

5 τρόποι για να βελτιώσετε τις εικόνες σας με CSS

Ακολουθούν μερικά απλά κόλπα για να προσθέσετε κάποια γεύση στις τυπικές ήπιες εικόνες σας. Η χρήση του Photoshop για το στυλ κάθε εικόνας μπορεί να είναι κουραστική και δύσκολο να διατηρηθεί μακροπρόθεσμα. Αυτές οι τεχνικές CSS που ακολουθούν θα σας βοηθήσουν να ανακουφίσετε αυτόν τον πόνο.

Τρόποι-για-μπαχαρικά-εικόνες-με-css-εικόνα-στυλ-φόντα-εμφάνιση-έμπνευση-προσθήκη-σκιά-περιγράμματα-κάνουν-εικόνες-ξεχωρίζουν

21.

Πως να:

Αλλαγή μεγέθους

Εικόνα φόντου

Μάθετε πώς μπορείτε να ρυθμίσετε την εικόνα φόντου με δυνατότητα αλλαγής μεγέθους με CSS. Έχετε 3 επιλογές για να διαλέξετε.

Πώς να αλλάξετε το μέγεθος-φόντο-εικόνα-στυλ-φόντο-εμφάνιση-έμπνευση-προσθήκη-σκιά-περιγράμματα-κάντε-εικόνες-ξεχωρίζετε

22.

Στυλ στυλ των συνδέσμων εικόνας σας

Η ενημέρωση των χρηστών ότι συγκεκριμένη ενότητα του ιστότοπού μας προορίζεται για κλικ, επιτυγχάνεται καλύτερα μέσω του ποντικιού πάνω από το αποτέλεσμα. Αυτές οι ενότητες «με δυνατότητα κλικ» περιλαμβάνουν σίγουρα εικόνες περιεχομένου. Το Image Link είναι ένα σενάριο που σας επιτρέπει να εφαρμόσετε επιπλέον στυλ στους συνδέσμους εικόνας σας.

Στυλ-η-εικόνα-σύνδεσμοι-εικόνα-στυλ-φόντα-εμφάνιση-έμπνευση-προσθήκη-σκιά-περίγραμμα-κάνουν-εικόνες-ξεχωρίζουν

23.

Πολλαπλές εικόνες φόντου με CSS

Μερικές φορές, είναι πιο λογικό να χρησιμοποιείτε εικόνες φόντου παρά να τις εισάγετε απευθείας στη σελίδα. Και ενώ κάθε στοιχείο - όπως η ετικέτα του σώματός σας - μπορεί να κρατήσει μόνο μία εικόνα φόντου, μπορεί να εφαρμοστεί σε πολλά στοιχεία.

Πολλαπλά-φόντο-εικόνες-με-css-εικόνα-στυλ-φόντα-εμφάνιση-έμπνευση-προσθήκη-σκιά-περιγράμματα-κάνουν-εικόνες-ξεχωρίζουν

24.

Σύνορα εικόνας με CSS

Πραγματικά εύκολο σεμινάριο που σας δείχνει πώς να προσθέσετε συμπαγές περίγραμμα σε εικόνες χρησιμοποιώντας CSS.

Εικόνα-περίγραμμα-με-css-εικόνα-στυλ-φόντα-εμφάνιση-έμπνευση-προσθήκη-σκιά-περίγραμμα-κάνουν-εικόνες-ξεχωρίζουν

25.

CSS Sprites χωρίς χρήση εικόνων φόντου

Μάθετε πώς να εφαρμόζετε το εφέ hover χωρίς πολλές γνώσεις σχετικά με τα CSS sprites.

Css-sprites-χωρίς-χρήση-φόντο-εικόνες-εικόνα-στυλ-φόντα-εμφάνιση-έμπνευση-προσθήκη-σκιά-περιγράμματα-κάνουν-εικόνες-ξεχωρίζουν


Αφήστε το σχόλιό σας

Η διεύθυνση email σας δεν θα δημοσιευθεί. Τα υποχρεωτικά πεδία σημειώνονται με *

*

*

  1. Υπεύθυνος για τα δεδομένα: Miguel Ángel Gatón
  2. Σκοπός των δεδομένων: Έλεγχος SPAM, διαχείριση σχολίων.
  3. Νομιμοποίηση: Η συγκατάθεσή σας
  4. Κοινοποίηση των δεδομένων: Τα δεδομένα δεν θα κοινοποιούνται σε τρίτους, εκτός από νομική υποχρέωση.
  5. Αποθήκευση δεδομένων: Βάση δεδομένων που φιλοξενείται από τα δίκτυα Occentus (ΕΕ)
  6. Δικαιώματα: Ανά πάσα στιγμή μπορείτε να περιορίσετε, να ανακτήσετε και να διαγράψετε τις πληροφορίες σας.