6 Cool υποτίτλων εικόνας με CSS3

Το CSS3 είναι πολύ ισχυρό. Κάποτε ήταν ότι χρειαζόμαστε εικόνες ή μια δέσμη κώδικα JavaScript για να κάνουμε ένα απλό φαινόμενο μετάβασης. Σήμερα μπορούμε να κάνουμε το ίδιο μόνο με το CSS3.

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

Διαδήλωση
Λήψη πηγής

Υποστήριξη προγράμματος περιήγησης

Αυτή η λεζάντα εξαρτάται πολύ από τις ιδιότητες μετασχηματισμού και μετάβασης που είναι σχετικά νέα χαρακτηριστικά, οπότε θα ήταν καλό να λάβουμε υπόψη την υποστήριξη του προγράμματος περιήγησης που απαιτείται για την ομαλή λειτουργία του λεζάντα.

Τα παρακάτω είναι προγράμματα περιήγησης που υποστηρίζουν ήδη μετασχηματισμό και μετάβαση:

Internet Explorer 10+ (δεν κυκλοφόρησε ακόμα)
Firefox 6+
Chrome 13+
Safari 3.2+
Opera 11+

Τώρα, ας ξεκινήσουμε το σεμινάριο.

Δομή HTML

Έχουμε 6 εικόνες. κάθε εικόνα με διαφορετικό στυλ λεζάντας.

     Απλή λεζάντα
  
     Πλήρης λεζάντα
 Ο ιστότοπός μας είναι συμβατός με τον ιστότοπο, ο οποίος δημοσιεύεται απευθείας από τον ιστότοπο που βρίσκεται στο επίσημο περιεχόμενο του ιστότοπου..
  
     Fade Caption
 Ο ιστότοπός μας είναι συμβατός με τον ιστότοπο, ο οποίος δημοσιεύεται απευθείας από τον ιστότοπο που βρίσκεται στο επίσημο περιεχόμενο του ιστότοπου..
  
     Υποπαράγραφος
 Ο ιστότοπός μας είναι συμβατός με τον ιστότοπο, ο οποίος δημοσιεύεται απευθείας από τον ιστότοπο που βρίσκεται στο επίσημο περιεχόμενο του ιστότοπου..
  
      Αυτό περιστρέφεται λεζάντα
 Ο ιστότοπός μας είναι συμβατός με τον ιστότοπο, ο οποίος δημοσιεύεται απευθείας από τον ιστότοπο που βρίσκεται στο επίσημο περιεχόμενο του ιστότοπου..
  
 
     Δωρεάν υπότιτλος στυλ
 Ο ιστότοπός μας είναι συμβατός με τον ιστότοπο, ο οποίος δημοσιεύεται απευθείας από τον ιστότοπο που βρίσκεται στο επίσημο περιεχόμενο του ιστότοπου..

Βασικό CSS

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

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

Εντάξει, ας αρχίσουμε να σχεδιάζουμε το στοιχείο, ξεκινώντας από την ετικέτα html και το κύριο id περιτύλιξης:

 html φόντο-χρώμα: #eaeaea;  #mainwrapper γραμματοσειρά: 10pt κανονική Arial, sans-serif; ύψος: auto; περιθώριο: 80px αυτόματη 0 αυτόματη; κείμενο-ευθυγράμμιση: κέντρο; πλάτος: 660px;

Στυλ κουτιού εικόνας

Εφαρμόζουμε ορισμένα κοινά στυλ στα πλαίσια που περιέχουν τις εικόνες. Τα κουτάκια θα εμφανίζονται δίπλα-δίπλα με το αριστερό πλωτήρα. Παρατηρήστε ότι προσθέσαμε επίσης υπερχείλιση: κρυφή ιδιοκτησία. αυτό θα κάνει όλα τα αντικείμενα μέσα σε αυτό το πέρασμα μέσω του div να κρυφτούν.

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

 #mainwrapper .box border: 5px solid #fff; δρομέας: δείκτης; ύψος: 182px; float: αριστερά. περιθώριο: 5px; θέση: σχετική. υπερχείλιση: κρυφή; πλάτος: 200px; -webkit-box-σκιά: 1px 1px 1px 1px #ccc; -moz-box-σκιά: 1px 1px 1px 1px #ccc; κουτί-σκιά: 1px 1px 1px 1px #ccc;  #mainwrapper .box img θέση: απόλυτα; αριστερά: 0; -μετάβαση ιστού: όλα τα 300ms ευκολία-έξω? -Μοζ-μετάβαση: όλα τα 300ms ευκολία-έξω? -ο-μετάβαση: όλα 300ms ευκολία-έξω? -ms-transition: όλα 300ms ευκολία-έξω? μετάβαση: όλα τα 300ms ευκολία-έξω?

Λεζάντα κοινό στυλ

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

 #mainwrapper .box .caption φόντο-χρώμα: rgba (0,0,0,0,8); θέση: απόλυτη; χρώμα: #fff; z-δείκτης: 100; -μετάβαση ιστού: όλα τα 300ms ευκολία-έξω? -Μοζ-μετάβαση: όλα τα 300ms ευκολία-έξω? -ο-μετάβαση: όλα 300ms ευκολία-έξω? -ms-transition: όλα 300ms ευκολία-έξω? μετάβαση: όλα τα 300ms ευκολία-έξω? αριστερά: 0;

Λεζάντα 1

Η πρώτη λεζάντα θα έχει ένα απλό αποτέλεσμα μετάβασης που χρησιμοποιείται συνήθως για μια λεζάντα. Η λεζάντα θα βγει από το κάτω μέρος όταν περάσουμε πάνω από την εικόνα. Για να το αντιμετωπίσουμε, ο λεζάντας θα έχει σταθερό ύψος 30px και θα εφαρμόσουμε την κάτω θέση του -30px για να την κρύβουμε κάτω από την εικόνα.

 #mainwrapper .box .simple-caption ύψος: 30px; πλάτος: 200px; εμφάνιση: μπλοκ? κάτω: -30px; ύψος γραμμής: 25pt; κείμενο-ευθυγράμμιση: κέντρο;

Λεζάντα 2

Ο δεύτερος τύπος έχει το πλήρες πλάτος και το ύψος της διάστασης εικόνας / κιβωτίου (200x200px) και η μετάβαση θα ήταν σαν φαινόμενο συρόμενης πόρτας μόνο ότι θα μετατοπιστεί από πάνω προς τα κάτω.

 #mainwrapper .box .full-caption πλάτος: 170px; ύψος: 170px; κορυφή: -200px; κείμενο-ευθυγράμμιση: αριστερά; padding: 15px;

Λεζάντα 3

Η τρίτη λεζάντα θα έχει ξεθωριασμένο αποτέλεσμα. Έτσι, προσθέσαμε την αδιαφάνεια: 0 για την αρχική της κατάσταση.

 #mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption opacity: 0; πλάτος: 170px; ύψος: 170px; κείμενο-ευθυγράμμιση: αριστερά; padding: 15px;

Λεζάντα 4

Η τέταρτη λεζάντα θα μετατοπιστεί από τα αριστερά προς τα δεξιά, οπότε βρήκαμε ως αρχική θέση 200px προς τα αριστερά (αριστερά: 200px).

 ** Λεζάντα 4: Slide ** / #mainwrapper .box .slide-caption πλάτος: 170px; ύψος: 170px; κείμενο-ευθυγράμμιση: αριστερά; padding: 15px; αριστερά: 200px;

Λεζάντα 5

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

Έτσι, προσθέτουμε ιδιότητα μετασχηματισμού με περιστροφή -180 μοίρες, εκτός αν προτιμάτε να περιστρέφετε την οθόνη σας για να διαβάσετε τη λεζάντα.

 #mainwrapper # box-5.box .rotit-caption πλάτος: 170px; ύψος: 170px; κείμενο-ευθυγράμμιση: αριστερά; padding: 15px; κορυφή: 200px; -moz-μετασχηματισμός: περιστροφή (-180deg); -o-μετασχηματισμός: περιστροφή (-180deg); -webkit-transform: περιστρέψτε (-180deg); μετασχηματισμός: περιστροφή (-180deg);  #mainwrapper .box .rotate πλάτος: 200px; ύψος: 400px; -μετάβαση ιστού: όλα τα 300ms ευκολία-έξω? -Μοζ-μετάβαση: όλα τα 300ms ευκολία-έξω? -ο-μετάβαση: όλα 300ms ευκολία-έξω? -ms-transition: όλα 300ms ευκολία-έξω? μετάβαση: όλα τα 300ms ευκολία-έξω?

Λεζάντα 6

Η τελευταία λεζάντα θα έχει μετασχηματισμό κλίμακας. Ωστόσο, στους προηγούμενους υπότιτλους, το κείμενο μέσα σε αυτό θα εμφανιστεί στην πραγματικότητα μαζί με τη μετατόπιση μετάβασης .caption. Σε αυτή την ενότητα θα το κάνουμε λίγο διαφορετικό.

Το κείμενο θα εμφανιστεί μετά την ολοκλήρωση της αλλαγής μετάβασης. Έτσι, προσθέτουμε την καθυστέρηση μετάβασης στο κείμενο, στην περίπτωση αυτή την ετικέτα h3 και p.

 #mainwrapper .box .scale-υπότιτλος h3, #mainwrapper .box .scale-caption p θέση: σχετική? αριστερά: -200px; πλάτος: 170px; -μετάβαση ιστού: όλα τα 300ms ευκολία-έξω? -Μοζ-μετάβαση: όλα τα 300ms ευκολία-έξω? -ο-μετάβαση: όλα 300ms ευκολία-έξω? -ms-transition: όλα 300ms ευκολία-έξω? μετάβαση: όλα τα 300ms ευκολία-έξω?  #mainwrapper .box .scale-caption h3 -webkit-καθυστέρηση μετάβασης: 300ms; -χρήση-μετάβαση-καθυστέρηση: 300ms; -ο-μετάβαση-καθυστέρηση: 300ms? -ms-καθυστέρηση μετάβασης: 300ms; καθυστέρηση μετάβασης: 300ms;  #mainwrapper .box .scale-υπότιτλος p -webkit-καθυστέρηση μετάβασης: 500ms; -Μοδ-μεταβατική καθυστέρηση: 500ms; -ο-μετάβαση-καθυστέρηση: 500ms? -ms-καθυστέρηση μετάβασης: 500ms; καθυστέρηση μετάβασης: 500ms;

Ας τους κάνουμε να μετακινηθούν

Στην επόμενη ενότητα, θα καθορίσουμε τη συμπεριφορά της λεζάντας όταν τοποθετούμε το δείκτη του ποντικιού πάνω από τις εικόνες ή τα πλαίσια.

Συμπεριφορά υπότιτλων 1: Εμφάνιση.

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

 #mainwrapper .box: hover. απλή-υπότιτλος -moz-transform: translateY (-100%); -ο-μετασχηματισμός: translateY (-100%). -webkit-transform: translateY (-100%), μετασχηματισμός: translateY (-100%);

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

Συμπεριφορά υποτίτλων 2: Μετακίνηση κάτω.

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

 #mainwrapper .box: οπισθοδρομήστε .full-caption -moz-transform: translateY (100%); -ο-μετασχηματισμό: translateY (100%); μετασχηματισμός ιστού (100%). μετασχηματισμός: μετάφραση (100%);

Συμπεριφορά υποτίτλων 3: Εξαφανίστε.

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

 #mainwrapper .box: hover .fade-caption αδιαφάνεια: 1;

Συμπεριφορά υποτίτλων 4: Σύρετε προς τα αριστερά.

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

Ο παρακάτω κώδικας CSS υποδεικνύει ότι όταν τοποθετούμε το δείκτη του ποντικιού πάνω από το κουτί, η λεζάντα θα μετατοπίσει το πλάτος 100% προς τα αριστερά. Παρατηρήστε ότι τώρα χρησιμοποιούμε το translateX, επειδή θέλουμε το slide να μετακινείται οριζοντίως από τα δεξιά προς τα αριστερά.

 #mainwrapper .box: hover .slide-caption φόντο-χρώμα: rgba (0,0,0,1)! -moz-μετασχηματισμός: translateX (-100%); -ο-μετασχηματισμός: translateX (-100%); -webkit-μετασχηματισμός: translateX (-100%); αδιαφάνεια: 1; μετασχηματισμός: translateX (-100%);

Όταν τοποθετούμε το δείκτη του ποντικιού πάνω από το κουτί, η εικόνα θα μετακινηθεί προς τα αριστερά.

 #mainwrapper .box: μετακινήστε το αρχείο img # image-4 -moz-transform: translateX (-100%); -ο-μετασχηματισμός: translateX (-100%); -webkit-μετασχηματισμός: translateX (-100%); μετασχηματισμός: translateX (-100%);

Συμπεριφορά υποτίτλων 5: Περιστρέψτε το.

Αυτή η λεζάντα είναι διαφορετική από την υπόλοιπη, καθώς δεν θα μετακινηθεί από δεξιά ή αριστερά, αλλά θα περιστραφεί. Όταν το κιβώτιο είναι τοποθετημένο στην αιώρα, το div που περιέχει την εικόνα και τη λεζάντα περιστρέφεται -180 αριστερόστροφα και κρύβει την εικόνα και εμφανίζει τη λεζάντα.

 / ** Περιστροφή λεζάντας: συμπεριφορά Hover ** / #mainwrapper .box: hover .rotate φόντο-χρώμα: rgba (0,0,0,1)! -moz-μετασχηματισμός: περιστροφή (-180deg); -o-μετασχηματισμός: περιστροφή (-180deg); -webkit-transform: περιστρέψτε (-180deg); μετασχηματισμός: περιστροφή (-180deg);

Συμπεριφορά υπότιτλων 6: Βαθμολογήστε το.

Αυτή η λεζάντα θα συνδυάσει διάφορα εφέ μετασχηματισμού. Όταν το κιβώτιο είναι τοποθετημένο με αιωρόπτερο, η εικόνα θα κλιμακωθεί κατά 140% (1,4) από την αρχική του διάσταση.

 #mainwrapper .box: hover # εικόνα-6 -moz-μετασχηματισμός: κλίμακα (1.4); -o-μετασχηματισμός: κλίμακα (1.4); -webkit-transform: κλίμακα (1.4). μετασχηματισμός: κλίμακα (1.4);

Και αν είδατε το CSS παραπάνω Λεζάντα 6 επικεφαλίδα, έχουμε κρύψει το κείμενο στα αριστερά από 200px. Αυτός ο κώδικας CSS παρακάτω λέει στο κείμενο να μετακινηθεί στην αρχική του θέση. Έτσι, το κείμενο θα σύρεται από αριστερά προς τα δεξιά ταυτόχρονα.

 #mainwrapper .box: hover .scale-caption h3, #mainwrapper .box: hover .scale-υπότιτλος p -moz-transform: translateX (200px); -ο-μετασχηματισμός: translateX (200px); -webkit-μετασχηματισμός: translateX (200px); μετασχηματισμός: translateX (200px);

Διαδήλωση
Λήψη πηγής

Περίληψη

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

Πιστώσεις

Οι μικρογραφίες εικόνων στο σεμινάριο προέρχονται από τους ακόλουθους ιστότοπους (στιγμιότυπο οθόνης):

Ένα βιβλίο εκτός
Archiduchesse
Vlog
Χονγκκιάτ
Το χαιρετισμό αγρόκτημα
Mark Ecko