Αναπαραγωγή εικόνας CSS3 [Συμβουλές CSS3]
Μέχρι σήμερα έχουμε συζητήσει πολλά νέα ακίνητα στο CSS3. Πέρα από αυτό, υπάρχουν κάποιες άλλες ιδιότητες που επί του παρόντος δεν περιλαμβάνονται στις επίσημες προδιαγραφές του CSS3 που αξίζει να δοκιμάσετε, ένα από τα οποία είναι το κουτί-αντανακλούν ιδιότητα που ξεκινάει από Webkit. Αυτή η ιδιότητα μπορεί να προβληματιστεί στα συγκεκριμένα αντικείμενα.
Βασική Αντανάκλαση
Η βασική εφαρμογή είναι αρκετά διαισθητική. ας πούμε, θέλουμε τον προβληματισμό κάτω από το πραγματικό αντικείμενο. Μπορούμε να γράψουμε:
img -webkit-box-reflect: παρακάτω.
Αυτό το παράδειγμα δείχνει πώς αντανακλάμε μια εικόνα παρακάτω (τη θέση) του αντικειμένου. Αλλά, σε αυτή την περίπτωση, μπορούμε επίσης να κρατήσουμε την αντανάκλαση στο σωστά, αριστερά, και πάνω από.
Ανταπόκριση αντιστάθμισης
Αντισταθμίζεται χρησιμοποιείται για να ορίσει το χάσμα μεταξύ της αντανάκλασης και του αντικειμένου που αντικατοπτρίζεται. Ας δούμε το απόσπασμα κώδικα παρακάτω.
img -webkit-box-reflect: κάτω από 10px;
Στον παραπάνω κώδικα, διαχωρίσαμε την αντανάκλαση από το πραγματικό αντικείμενο από 10px.
- Προβολή επίδειξης
Κάλυψη με κλίσεις
Το αποτέλεσμα αντανάκλασης που βλέπουμε συνήθως είναι η εξασθένιση στο κάτω μέρος και η εμφάνιση μόνο του μισού ή λιγότερο του πραγματικού αντικειμένου. Για να επαναλάβουμε αυτό το είδος επίδρασης, μπορούμε να εφαρμόσουμε CSS3 Διαβαθμίσεις για να αποκρύψετε το αντικείμενο, όπως π.χ.
-webkit-box-reflect: κάτω από το 0px -webkit-gradient (γραμμική, αριστερή κορυφή, αριστερό κάτω μέρος, από (διαφανές) έως rgba (250, 250, 250, 0.1)).
Αυτός ο κωδικός θα οδηγήσει στην ακόλουθη παρουσίαση.
Μπορούμε επίσης να χρησιμοποιήσουμε χρωματική διακοπή για να ελέγξετε τις μεταβάσεις και να κάνετε τον προβληματισμό να φανεί καλύτερο:
img -webkit-box-αντανακλούν: κάτω από 0px -webkit-gradient (γραμμική, αριστερή κορυφή, αριστερό κάτω μέρος, από (διαφανές)), έγχρωμη στάση (70% ))).
- Προβολή επίδειξης
Εναλλακτικές λύσεις για τον Firefox
Αυτή η ιδιότητα, ωστόσο, λειτουργεί μόνο σε φυλλομετρητές Webkit (δηλαδή Safari και Chrome) αυτήν τη στιγμή. Για να επιτύχετε το ίδιο αποτέλεσμα στον Firefox, χρειάζεστε μια άλλη διαδρομή: χρησιμοποιώντας -moz-στοιχείο () λειτουργία. Αυτή η λειτουργία ουσιαστικά θα δημιουργήσει ή θα αναπαράγει το περιεχόμενο από συγκεκριμένα στοιχεία HTML. Ας ρίξουμε μια ματιά στο ακόλουθο παράδειγμα.
Έχουμε μια εικόνα τυλιγμένη σε ένα Και, για να κρατήσουμε τον προβληματισμό, θα χρησιμοποιήσουμε ο Δυστυχώς, δεν υπάρχει ακόμα εύκολος τρόπος για να δημιουργήσετε ένα όμορφη αντανακλάσεων στον Firefox χρησιμοποιώντας αυτήν την πρακτική. Ο παραπάνω κώδικας θα δημιουργήσει απλά την αντανάκλαση, χωρίς το φαινόμενο εξασθένισης.mooz-reflect ταυτότητα;
:μετά ψευδο-στοιχείο, ως εξής; # moz-reflect: μετά από περιεχόμενο: ""; εμφάνιση: μπλοκ? υπόβαθρο: -moz-στοιχείο (# moz-reflect) no-repeat; πλάτος: auto; ύψος: 375px; περιθώριο-κάτω: 100px; -moz-μετασχηματισμός: scaleY (-1);
-moz-transform με αρνητική κλίμακα χρησιμοποιείται για την αναστροφή του δημιουργούμενου αντικειμένου ανάποδα. Επίσης, βεβαιωθείτε ότι το ύψος είναι αρκετά ακριβής για το πραγματικό αντικείμενο ύψος για να αποφύγετε περιττές επιπλέον γραμμές για την τοποθέτηση της αντανάκλασης.Περαιτέρω αναφορές
