Επεξηγήσεις:
, - ιδιότητες της γλώσσας CSS, που χρησιμοποιούνται για τη δημιουργία σκιών. , , — παράμετροι ιδιοτήτων σκιάς. , , , - Ιδιότητες CSS, υπεύθυνες για την αλλαγή του μεγέθους και της θέσης των στοιχείων. - Η ετικέτα είναι υπεύθυνη για τη δημιουργία συνδέσμων.
- Οι επιλογείς είναι ένα είδος συνδέσμων με τους οποίους το CSS καθορίζει σε ποια στοιχεία θα εφαρμοστούν συγκεκριμένα στυλ.
- Το Hover είναι ένας επιλογέας κατάστασης.
— ιδιότητα αλλαγής κινούμενου αντικειμένου.
Οι σκιές χρησιμοποιούνται συχνά για να αποκτήσουν το εφέ της τρισδιάστατης. Σας επιτρέπουν να δώσετε σε κείμενα και μπλοκ ένα μοναδικό στυλ και σε συνδυασμό με ειδικές γραμματοσειρές, μπορείτε να έχετε ένα υπέροχο αποτέλεσμα.
Το CSS μας προσφέρει τόσο πολύ χώρο για φαντασία και πειραματισμό που θα σας πάρει χρόνια για να τα δοκιμάσετε όλα.
Σε αυτό το άρθρο, θα περιγράψουμε λεπτομερώς τη δημιουργία σκιών στο CSS. Εκτός από τις συνήθεις εξωτερικές σκιές, θα σας δείξουμε πώς να δημιουργείτε εσωτερικές σκιές και σκιές κατάστασης.
CSS - σκιά πλαισίου. ιδιότητα κουτιού-σκιάς
html( background: #fff; ) body( πλάτος: 80%; περιθώριο: 0 αυτόματο; φόντο-χρώμα: rgba(150,60,60,0.54) πλαίσιο-σκιά: -1px 5px 5px 5px rgba(77,63,63 ,0,88) ) Το εργαλείο μας επιτρέπει να δημιουργήσουμε μία ή περισσότερες σκιές γύρω από το μπλοκ, με οποιοδήποτε χρώμα.
Βασικά, τι είναι η σκιά; Αυτό είναι ένα ακριβές αντίγραφο της περιοχής του στοιχείου, το οποίο έχει ένα συγκεκριμένο χρώμα και θέση. Αυτές οι επιλογές μπορούν να οριστούν χρησιμοποιώντας την ιδιότητα box-shadow.
Οι ιδιότητες σκιάς χρησιμοποιούνται με αυτή τη σειρά:
- Μετακινηθείτε οριζόντια.
- Μετακινηθείτε κάθετα.
- Επίπεδο θολώματος.
- Διατάσεις.
- Χρώμα σκιάς.
Με αυτή τη σειρά πρέπει να καθορίσετε τις παραμέτρους της σκιάς. Το κύριο πράγμα είναι να μην συγχέουμε την τιμή, καθώς τα πρώτα 4 ορίζονται με τον ίδιο τρόπο, χρησιμοποιώντας αριθμητικές τιμές -
Η πρώτη παράμετρος, η οποία καλείται
Οι αρνητικές τιμές μετακινούν τη σκιά προς τα αριστερά, ενώ οι θετικές τιμές τη μετακινούν προς τα δεξιά. Η τιμή της παραμέτρου μπορεί να είναι ίση με 0 όταν οι σκιές είναι θολές κατά μήκος του κατακόρυφου άξονα.
Επόμενη σειρά είναι το ακίνητο
Η παράμετρος μπορεί να οριστεί στο 0. Συνήθως χρησιμοποιείται για οριζόντια θόλωση σκιών.
Προσοχή! Σας συμβουλεύουμε να καθορίσετε την τιμή σε pixel. Μπορείτε να χρησιμοποιήσετε άλλες τιμές - ,
3 τιμή -
Η δεδομένη τιμή καθορίζει την ακτίνα κατά μήκος της οποίας θα θολωθεί η σκιά. Οι αρνητικές τιμές δεν καθορίζονται.
Εδώ μπορούν να χρησιμοποιηθούν και μεγαλύτερες τιμές. Ένα ισχυρό θάμπωμα θα βοηθήσει στη δημιουργία ενός πολύχρωμου εφέ, αλλά μόνο σε ορισμένες περιπτώσεις.
Η προτελευταία τιμή, που είναι υπεύθυνη για το τέντωμα της σκιάς. Είναι επίσης προαιρετικό, αλλά μπορεί να προσθέσει χρώμα στη σκιά σας.
Η διαστολή συμβαίνει λόγω του τεντώματος του κεντρικού συμπαγούς τμήματος της σκιάς, το οποίο βρίσκεται μεταξύ των θολών άκρων.
Αυτή η παράμετρος δέχεται οποιαδήποτε τιμή, θετική και αρνητική. Οι θετικές τιμές τεντώνουν τη σκιά, ενώ οι αρνητικές τιμές τη συρρικνώνουν.
Και η τελευταία παράμετρος είναι
Για να αλλάξετε το χρώμα, είναι κατάλληλο οποιοδήποτε σύστημα χρωμάτων - καθώς και τα τυπικά χρώματα.
Προσοχή! Εάν θέλετε η ιδιότητα να λειτουργεί στο Safari, τότε αυτή η ρύθμιση πρέπει να καθοριστεί, ακόμα κι αν χρησιμοποιείτε το προεπιλεγμένο μαύρο χρώμα.
Εσωτερική Σκιά - CSS
html( background: #fff; ) body( πλάτος: 80%; περιθώριο: 0 αυτόματο; φόντο-χρώμα: rgba(150,60,60,0.54) πλαίσιο-σκιά: -1px 5px 5px 5px rgba(77,63,63 ,0,88) ένθετο; ) Λοιπόν, ας δούμε το πρώτο παράδειγμα εφαρμογής σκιών. Εδώ θα εξετάσουμε τη δημιουργία μιας εσωτερικής σκιάς για το μπλοκ σώματος.
Για να ξεκινήσετε, ανοίξτε το έγγραφο HTML και συμπληρώστε το. Δεν μπορείτε να καθορίσετε ετικέτες, μην συμπληρώσετε το περιεχόμενο, το κύριο πράγμα είναι να δημιουργήσετε μια ετικέτα
.Ανοίξτε το έγγραφο CSS μας, γράψτε την ετικέτα
, θα είναι ο βασικός μας επιλογέας.Στη συνέχεια, ανοίξτε τα σγουρά σιδεράκια και γράψτε την ιδιότητα
Τώρα το πιο σημαντικό. Για να δημιουργήσετε μια σκιά εσωτερικού πλαισίου στο CSS, πρέπει να ορίσετε την τιμή εισαγωγής. Μπορείτε να το καθορίσετε αμέσως μετά τον καθορισμό του χρώματος.
Ως αποτέλεσμα, πήραμε το ακόλουθο μπλοκ:
HTML/CSS - Σκιά κειμένου
html( background: #fff; ) body( πλάτος: 80%; περιθώριο: 0 αυτόματο; φόντο-χρώμα: rgba(150,60,60,0.54) πλαίσιο-σκιά: -1px 5px 5px 5px rgba(77,63,63 ,0,88) ένθετο; ) div( περιθώριο: 150 εικονοστοιχεία, πλαίσιο-σκιά: -1 εικονοστοιχεία 5 εικονοστοιχεία 5 εικονοστοιχεία 5 εικονοστοιχεία rgba(77,63,63,0,88); μέγεθος γραμματοσειράς: 25 εικονοστοιχεία; ) 
Δημιουργείται με παρόμοιο τρόπο, αλλά αντί για box-shadow χρησιμοποιείται η ιδιότητα
- Οριζόντια μετατόπιση.
- Κάθετη μετατόπιση.
- Ακτίνα θολώματος. Οχι απαραίτητο.
- Χρώμα.
Όπως μπορείτε να δείτε, δεν υπάρχει παράμετρος stretch σε αυτήν την ιδιότητα. Το μέγεθος της σκιάς θα είναι πάντα το ίδιο με το μέγεθος του κειμένου, δεν υπάρχει τρόπος να το διορθώσετε.
Είναι πολύ βολικό να επιβάλλετε σκιές ο ένας στον άλλο. Για να το κάνετε αυτό, πρέπει να αναφέρετε πολλές ομάδες παραμέτρων.
Η πρώτη σκιά θα τοποθετηθεί πιο κοντά στο κείμενο και η δεύτερη πάνω από αυτό. Παρόμοια με την εργασία με τις ιδιότητες περιγράμματος και περιγράμματος, αλλά εδώ μπορείτε να δημιουργήσετε 2, 3 ή περισσότερες σκιές.
Hover Shadows - CSS
Τώρα ας δούμε τη δημιουργία σκιών για μια συγκεκριμένη κατάσταση. Στο παράδειγμά μας, θα χρησιμοποιηθεί ένα κουμπί.
Για να δημιουργήσετε μια σκιά για ένα κουμπί, πρέπει πρώτα να το τοποθετήσετε. Ανοίγουμε την ετικέτα a, γράφουμε την κατηγορία κουμπιών για αυτήν και οποιαδήποτε τιμή κειμένου για καλύτερη εμφάνιση.
Αρχικά, ας ορίσουμε την τοποθέτηση χρησιμοποιώντας την ιδιότητα περιθωρίου και ας αυξήσουμε το κουμπί σε ένα συγκεκριμένο μέγεθος. Για να το αυξήσετε, μπορείτε να χρησιμοποιήσετε τις ιδιότητες πλάτους και ύψους ή μπορείτε να χρησιμοποιήσετε την ιδιότητα padding.
Τώρα ορίζουμε το χρώμα φόντου, το κείμενο και το πλαίσιο. Το κουμπί μας είναι έτοιμο, ας αρχίσουμε να δημιουργούμε τη σκιά.
Αρχικά, ας δημιουργήσουμε μια κανονική σκιά, μικρού μεγέθους, χρησιμοποιώντας κουτί-σκιά. Θα είναι ορατό από προεπιλογή, χωρίς να τοποθετείτε το δείκτη του ποντικιού πάνω από το κουμπί.
Ας κάνουμε το πιο απλό αποτέλεσμα - αυξήστε τη σκιά. Μπορείτε να το κάνετε θολό ή να αλλάξετε το τέντωμα σύμφωνα με τις προτιμήσεις σας.
Για το καλύτερο αποτέλεσμα, ορίστε την ιδιότητα μετάβασης για μια κανονική σύνδεση, ορίστε την ώρα σε 0,5 δευτερόλεπτα.
Τώρα έχουμε ένα ωραίο κουμπί με μια ωραία σκιά που θα επεκταθεί ομαλά στο hover.
συμπέρασμα
Σε αυτό το άρθρο, γνωρίσαμε όλους τους βασικούς τρόπους δημιουργίας σκιών. Έχουμε αναλύσει όλες τις ιδιότητες και τις παραμέτρους των σκιών.
Μπορείτε να βρείτε όλα τα στοιχεία που παρουσιάστηκαν στα στιγμιότυπα οθόνης στον φάκελο προέλευσης. Αν θέλετε, μπορείτε να τα μελετήσετε μόνοι σας και να πειραματιστείτε με τις αξίες. Ίσως να τα πάτε πολύ καλύτερα από εμάς.
Μια σκιά κάτω από ένα στοιχείο σε επίπεδο μπλοκ σε μια σελίδα χρησιμοποιείται συνήθως για να δημιουργήσει ένα τρισδιάστατο εφέ, να τραβήξει την προσοχή σε ένα στοιχείο ή ως μέρος ενός σχεδίου. Μια μικρή σκιά κάτω από τα στοιχεία δίνει επίσης στη σελίδα όγκο και βάθος.
Για να προσθέσετε μια σκιά, χρησιμοποιείται η ιδιότητα box-shadow, η οποία έχει έξι τιμές, από τις οποίες απαιτούνται μόνο δύο. Στο σχ. Το σχήμα 1 δείχνει την ιδιότητα box-shadow με όλες τις πιθανές τιμές, αριθμημένες για τον προσδιορισμό τους.
Ρύζι. 1. Τιμές της ιδιότητας box-shadow
- η ένθετη λέξη-κλειδί ορίζει τη σκιά μέσα στο στοιχείο.
- μετατόπιση σκιάς οριζόντια (5px - προς τα δεξιά, -5px - προς τα αριστερά).
- κατακόρυφη μετατόπιση (5px - κάτω, -5px - επάνω).
- ακτίνα θαμπώματος σκιάς (0 - έντονη σκιά).
- τέντωμα σκιάς (5px - τέντωμα, -5px - συρρίκνωση).
- χρώμα σκιάς.
Βεβαιωθείτε ότι έχετε καθορίσει μόνο την οριζόντια και κάθετη μετατόπιση, όλες οι άλλες παράμετροι θα λαμβάνονται από προεπιλογή. Σε αυτή την περίπτωση, η σκιά θα είναι έντονη χωρίς θαμπάδα και μαύρη.
Λόγω των συνδυασμών διαφορετικών παραμέτρων και των τιμών τους, μπορεί να επιτευχθεί μεγάλη ποικιλία τύπων σκιών. Στον πίνακα. 1 δείχνει τον κωδικό και το αποτέλεσμα στο οποίο οδηγεί.
| Ο κώδικας | Αποτέλεσμα | Περιγραφή |
|---|---|---|
| box-shadow: 5px 5px; | Αιχμηρή σκιά δεξιά και κάτω. | |
| box-shadow: -5px -5px; | Αιχμηρή σκιά αριστερά και πάνω. | |
| κουτί-σκιά: 0 0 5 εικονοστοιχεία | Θολή σκιά γύρω από το στοιχείο. | |
| box-shadow: 0 0 5px 2px; | Επέκταση της σκιάς κατά 2 pixel. | |
| box-shadow: 0 0 5px 2px κόκκινο; | Κόκκινη λάμψη γύρω από το στοιχείο. | |
| box-shadow: 0,4em 0,4em 5px rgba(122,122,122,0,5); | Ημιδιαφανής σκιά. | |
| box-shadow: ένθετο 0 0 6px; | Σκιά μέσα. |
Όπως μπορείτε να δείτε από τον πίνακα, η μετατόπιση σκιάς δεν χρειάζεται να καθορίζεται σε pixel, αν και αυτό είναι βολικό. Το χρώμα της σκιάς μπορεί να καθοριστεί σε οποιαδήποτε διαθέσιμη μορφή, για παράδειγμα, για να αποκτήσετε μια ημιδιαφανή σκιά, η μορφή RGBA είναι κατάλληλη, μια τέτοια σκιά θα φαίνεται καλή σε οποιοδήποτε φόντο. Το Παράδειγμα 1 δείχνει πώς να το κάνετε αυτό.
Παράδειγμα 1: Σκιά στην εικόνα φόντου
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Μην πηγαίνετε ενάντια στα λάβαρα του εχθρού όταν είναι σε τέλεια τάξη. να μην επιτίθεται στο στρατόπεδο του εχθρού όταν είναι απόρθητος. αυτή είναι η διαχείριση της αλλαγής.
Sun Tzu, μετάφρ. Νίκολας Κόνραντ
Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 2. Η σκιά επαναλαμβάνει τη στρογγυλοποίηση των γωνιών του μπλοκ.
Ρύζι. 2. Προβολή της σκιάς στην εικόνα φόντου
Όταν προσθέτετε μια "ευρεία" σκιά, να γνωρίζετε ότι μπορεί να επεκταθεί πέρα από το ορατό παράθυρο του προγράμματος περιήγησης και έτσι να οδηγήσει σε μια οριζόντια γραμμή κύλισης.
Η σκιά μπορεί επίσης να προστεθεί σε ψευδοστοιχεία, αυτό μερικές φορές απαιτείται για πολύπλοκη διάταξη. Στο σχ. Το 3 δείχνει ένα μπλοκ με τίτλο στο οποίο έχει προστεθεί μια σκιά. Για να μην υπάρχουν γραμμές στη διασταύρωση, πρέπει να χρησιμοποιήσετε το ψευδοστοιχείο ::after και να προσθέσετε μια σκιά σε αυτό.
Ρύζι. 3. Μπλοκ με σκιά
Το Παράδειγμα 2 δείχνει τη δημιουργία ενός τέτοιου μπλοκ.
Παράδειγμα 2. Κουτί με σκιά
HTML5 CSS3 IE 9+ Cr Op Sa Fx
επί κεφαλής
Ένα στοιχείο μπορεί να έχει όχι μία σκιά, αλλά πολλές ταυτόχρονα, οι παράμετροί τους παρατίθενται διαχωρισμένες με κόμμα στην τιμή της ιδιότητας box-shadow. Το Παράδειγμα 3 δείχνει πώς να προσθέσετε μια διπλή σκιά σε όλες τις εικόνες.
Παράδειγμα 2. Κουτί με σκιά
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. τέσσερις.
Ρύζι. 4. Εικόνα με διπλή σκιά
Η πρώτη σκιά αποδίδεται στα αριστερά της εικόνας με ακτίνα θαμπώματος 20 px, μειωμένη σε μέγεθος κατά την τέταρτη παράμετρο (-20 px). Οι παράμετροι της δεύτερης σκιάς υποδεικνύονται μετά το κόμμα, η σκιά εμφανίζεται στα δεξιά της εικόνας και επίσης μειώνεται για συμμετρία.
Με την έλευση του προτύπου CSS 3έχει εισαχθεί η ιδιότητα box-shadow, η οποία χρησιμοποιείται ευρέως στους προγραμματιστές ιστού, καθώς διευκολύνει την προσθήκη μιας ή περισσότερων σκιών στο πλαίσιο ενός στοιχείου για να δώσει το επιθυμητό οπτικό αποτέλεσμα.
Στο προηγούμενο άρθρο, εξετάσαμε την ιδιότητα border-radius, χρησιμοποιώντας την, μπορείτε να πάρετε μια σκιά στρογγυλεμένες γωνίες. Κατ' αναλογία με το text-shadow (text-shadow), μπορείτε να δημιουργήσετε πολλές σκιές, που εφαρμόζονται σε άξονας zεμπρός προς τα πίσω (με την πρώτη σκιά να δίνεται από πάνω).
Ας ρίξουμε μια πιο προσεκτική ματιά στη σύνταξη αυτής της σύγχρονης ιδιότητας:
Σκεφτείτε με τη σειρά πιθανές τιμέςαυτή η ιδιοκτησία:
| Εννοια | Περιγραφή |
|---|---|
| κανένας | Η σκιά δεν εμφανίζεται. Αυτή είναι η προεπιλεγμένη τιμή. |
| ένθεση | Προαιρετική τιμή.Εάν αυτή η τιμή δεν έχει καθοριστεί (προεπιλογή), τότε η σκιά θα βρίσκεται στο εξωτερικό του στοιχείου και θα δημιουργήσει το αποτέλεσμα της διόγκωσης του στοιχείου. Με την ένθετη λέξη-κλειδί (τιμή), η σκιά θα πέσει μέσα στο στοιχείο και θα δημιουργήσει ένα εφέ με εσοχή. Με άλλα λόγια, είναι μια αλλαγή από μια εξωτερική σκιά σε μια εσωτερική. |
| h-σκιά | Απαιτούμενη τιμή.Καθορίζει τη θέση της οριζόντιας σκιάς. Επιτρέπονται αρνητικές τιμές. |
| v-σκιά | Απαιτούμενη τιμή.Καθορίζει τη θέση της κάθετης σκιάς. Επιτρέπονται αρνητικές τιμές. |
| θαμπάδα-ακτίνα | Προαιρετική τιμή.Ορίζει την ακτίνα θαμπώματος. Όσο μεγαλύτερη είναι αυτή η τιμή, τόσο μεγαλύτερη είναι η θαμπάδα, ενώ η σκιά γίνεται μεγαλύτερη και πιο ανοιχτή. Εάν η τιμή δεν έχει οριστεί, τότε η τιμή θα είναι 0 (αιχμηρές - ευδιάκριτες σκιές). Δεν επιτρέπονται αρνητικές τιμές. |
| ακτίνα εξάπλωσης | Προαιρετική τιμή.Το μέγεθος της σκιάς (η ακτίνα για να τεντώσει τη σκιά). Οι θετικές τιμές θα διευρύνουν τη σκιά, ενώ οι αρνητικές τιμές θα τη συρρικνώσουν. Εάν η τιμή δεν έχει οριστεί, τότε η τιμή θα είναι 0 (η σκιά αντιστοιχεί στο μέγεθος του στοιχείου). |
| χρώμα | Προαιρετική τιμή.Καθορίζει το χρώμα της σκιάς (HEX, RGB, RGBA, HSL, HSLA, "Προκαθορισμένα χρώματα"). Η προεπιλεγμένη τιμή είναι μαύρο. |
Τα κύρια σημεία που πρέπει να κατανοήσετε για να δημιουργήσετε σκιές στοιχείων είναι:
Θέλω να επιστήσω την προσοχή σας στο γεγονός ότι η ιδιότητα box-shadow υποστηρίζεται αυτήν τη στιγμή από όλα τα σύγχρονα προγράμματα περιήγησης:
| Ιδιοκτησία | ΛΥΡΙΚΗ ΣΚΗΝΗ | IExplorer | άκρη |
|||
|---|---|---|---|---|---|---|
| σκιά κουτιού | 10.0 4.0 -webkit- | 4.0 3.5 -moz- | 10.5 | 5.1 3.1 -webkit- | 9.0 | 12.0 |
Εάν θέλετε να επεκτείνετε την υποστήριξη για ορισμένα προγράμματα περιήγησης, συμπεριλαμβανομένων των κινητών IOS 3.2 - 4.3και Android 2.1 - 3, τότε συνιστάται να χρησιμοποιήσετε προθέματα κατασκευαστή και να χρησιμοποιήσετε την ακόλουθη σύνταξη (στα παραδείγματα του άρθρου, θα χρησιμοποιηθεί μόνο η σύνταξη για τα σύγχρονα προγράμματα περιήγησης):
-webkit-box-shadow : value ; /* Safari 3.1 - 4, IOS 3.2 - 4.3 και Android 2.1 - 3 */-moz-box-shadow : value ; /* Firefox 3.5 - 3.6 */ box-shadow : value ; /* πίνακας παραπάνω */Ας προχωρήσουμε στην εξάσκηση και ας ξεκινήσουμε ένα απλό παράδειγμα, στην οποία προσθέτουμε μία σκιά στα στοιχεία:
Το αποτέλεσμα του παραδείγματός μας:
Χρήση πολλαπλών σκιών
Στο παρακάτω παράδειγμα, σκεφτείτε ενδιαφέρον αποτέλεσμαανάμειξη χρωμάτων, τα οποία μπορούν να ληφθούν όταν χρησιμοποιείτε πολλαπλές σκιές:
- Δύομπλοκ σταθερού πλάτους και ύψους (15em και 10em ), προστέθηκαν γέμιση σε όλες τις πλευρές (2em ) και ρυθμίστε τα κουτιά που θα φέρουν επένδυση για να μπορείτε να τα ευθυγραμμίσετε.
- Για πρώταμπλοκ με τάξη .δοκιμήυποδείξαμε τέσσεριςσκιές με διαφορετικές οριζόντιες και κάθετες τιμές σκιάς, έτσι ώστε το στοιχείο να έχει διαφορετικές σκιές σε όλες τις πλευρές. Η ακτίνα θαμπώματος για όλες τις σκιές έχει οριστεί σε μία. Το χρώμα κάθε σκιάς είναι διαφορετικό και ρυθμίζεται χρησιμοποιώντας προκαθορισμένα χρώματα.
- Για δεύτεροςμπλοκ με τάξη .τεστ2υποδείξαμε τέσσεριςσκιές με διαφορετικές οριζόντιες και κάθετες τιμές σκιάς. Η ακτίνα θαμπώματος για όλες τις σκιές ορίστηκε σε μία, με το τέντωμα της σκιάς σε αρνητικό, γεγονός που προκάλεσε τη συρρίκνωση της ίδιας της σκιάς. Το χρώμα κάθε σκιάς είναι διαφορετικό και καθορίζεται χρησιμοποιώντας το σύστημα RGBA.
Το αποτέλεσμα του παραδείγματός μας:
Χρήση σκιών για εικόνες
Το τελευταίο παράδειγμα αυτού του άρθρου θα επικεντρωθεί στη χρήση σκιών για εικόνες. Αμέσως θέλω να επιστήσω την προσοχή σας στο γεγονός ότι καθορίστε άμεσα τη σκιά για στοιχείο HTML δεν θα λειτουργήσει, αλλά έχουμε την ευκαιρία να καθορίσουμε μια εικόνα ως φόντο για το στοιχείο που μας ενδιαφέρει και ήδη αυτό το στοιχείο να ορίσει τη σκιά που χρειαζόμαστε.
Θα εξετάσουμε λεπτομερώς την εργασία με εικόνες φόντου στο άρθρο του σεμιναρίου " ", αλλά τώρα, για να βάλουμε ένα τέλος στη μελέτη της χρήσης των σκιών, θα το αγγίξουμε επιφανειακά και θα χρησιμοποιήσουμε μια εικόνα ως φόντο για ένα στοιχείο στο ακόλουθο παράδειγμα:
- Δύομπλοκ σταθερού πλάτους και ύψους (237 εικονοστοιχεία και 232 εικονοστοιχεία ), προστέθηκε επένδυση σε όλες τις πλευρές (2em ) και ρυθμίστε τα κουτιά να είναι ενσωματωμένα για να τους επιτρέψετε να ευθυγραμμιστούν. Ορίσαμε το μέγεθος μπλοκ 237 px επί 232 px για να ταιριάζει στο μέγεθος της εικόνας, έτσι ώστε σε αυτό το στάδιο εκπαίδευσης να μην χρειάζεται να κλιμακώνουμε την εικόνα ώστε να ταιριάζει στο στοιχείο και να επηρεάσουμε εκείνες τις ιδιότητες CSS που σχεδιάζεται να μελετηθούν σε μεταγενέστερο στάδιο (στο φροντιστήριο άρθρο "").
- Για πρώταμπλοκ με τάξη .δοκιμήυποδείξαμε μηδενική τιμήοριζόντιες και κάθετες σκιές, αλλά ορίσαμε την ακτίνα θαμπώματος στα 50 εικονοστοιχεία και την επεκτείναμε ορίζοντας την ακτίνα τεντώματος σε 10 εικονοστοιχεία . Το χρώμα της σκιάς καθορίστηκε με ένα προκαθορισμένο χρώμα (βιολετί ). Επιπλέον, αναφέραμε στην αγγελία λέξη-κλειδίένθετο , με αποτέλεσμα η σκιά να πέσει μέσα στο στοιχείο. Με άλλα λόγια, δημιουργήσαμε την εσωτερική σκιά του στοιχείου.
- Για δεύτεροςμπλοκ με τάξη .τεστ2έχουμε μηδενίσει τις οριζόντιες και κάθετες σκιές, αλλά έχουμε ορίσει την ακτίνα θαμπώματος στα 50 εικονοστοιχεία και την επεκτείνουμε με ακτίνα τεντώματος 10 εικονοστοιχείων . Χρώμα σκιάς που καθορίζεται στη λειτουργία RGBA.
Το αποτέλεσμα του παραδείγματός μας:
Ρύζι. 98 Παράδειγμα σκιάς εικόνας CSS (ιδιότητα box-shadow)
Ερωτήσεις και εργασίες για το θέμα
Πριν προχωρήσετε στο επόμενο θέμα, ολοκληρώστε την πρακτική εργασία:
Εάν δυσκολεύεστε να κάνετε πρακτική εργασία, Μπορείτε πάντα να ανοίξετε το παράδειγμα σε ξεχωριστό παράθυρο και να επιθεωρήσετε τη σελίδα για να δείτε τι CSS χρησιμοποιήθηκε.
2016-2020 Denis Bolshakov, μπορείτε να στείλετε σχόλια και προτάσεις στον ιστότοπο στη διεύθυνση [email protected]
Η τυπογραφία είναι το αγαπημένο παιχνίδι των web designers. Το CSS έχει ένα πολύ ενδιαφέρον εργαλείο στη σύνθεσή του - σκιά κειμένου(σκιά κειμένου), το οποίο με την πρώτη ματιά φαίνεται αρκετά απλό, αλλά μπορεί να χρησιμοποιηθεί για να δημιουργήσετε αξιομνημόνευτα εφέ εάν χρησιμοποιείτε ευρηματικότητα και φαντασία.
Βασικά στοιχεία της σκιάς
Ιδιοκτησία σκιά κειμένουπολύ εύκολο στη χρήση. Υποστηρίζεται από όλα τα σύγχρονα προγράμματα περιήγησης και ακόμη και χωρίς τη χρήση προθεμάτων. Αλλά δεν υπάρχει υποστήριξη στον IE (ακόμα και στον IE9). Μπορείτε να χρησιμοποιήσετε εργαλεία όπως το Modernizr για να βοηθήσετε στην εξαγωγή εφέ CSS3 ακόμη και σε παλαιότερες εκδόσεις του IE.
Σύνταξη
Η σύνταξη ιδιοτήτων χρησιμοποιείται για τη δημιουργία μιας σκιάς κειμένου σκιά κειμένου, το οποίο δίνεται παρακάτω. Πρέπει να καθοριστούν τέσσερις παράμετροι: οι δύο πρώτες ορίζουν τη θέση της σκιάς, η τρίτη ορίζει το επίπεδο θολώματος και η τέταρτη καθορίζει το χρώμα της σκιάς.
Κείμενο-σκιά: horizontal_offset vertical_offset χρώμα θαμπώματος.
Παρακάτω είναι ένα παράδειγμα σκιάς κειμένου που μετατοπίζεται δύο εικονοστοιχεία προς τα κάτω και τέσσερα εικονοστοιχεία προς τα δεξιά, θαμπώνει κατά τρία εικονοστοιχεία και είναι μαύρο με αδιαφάνεια 30%.
Κείμενο-σκιά: 2px 4px 3px rgba(0,0,0,0,3);
Το αποτέλεσμα της χρήσης αυτής της ιδιότητας θα μοιάζει με αυτό:
Γιατί χρησιμοποιείται το rgba;
Δεν χρειάζεται να χρησιμοποιήσετε το rgba για να ορίσετε το χρώμα σκιάς κατά τον ορισμό της ιδιότητας. Ωστόσο, το rgba προσθέτει μια άλλη διάσταση στον σκιώδη ορισμό - το επίπεδο διαφάνειας.
Αυτή η μέθοδος είναι πολύ πιο απλή από άλλες μεθόδους προσδιορισμού χρώματος. Δεν χρειάζεται να εστιάσετε στον καθορισμό της απόχρωσης του χρώματος της σκιάς, που μπορεί να είναι λίγο πιο σκούρο ή πιο ανοιχτό από το χρώμα του φόντου. Με το rgba, μπορείτε απλά να χρησιμοποιήσετε λευκά ή μαύρα χρώματα και να αυξήσετε τη διαφάνειά τους για να επιτύχετε την επιθυμητή απόχρωση φόντου κατά την ανάμειξη χρωμάτων.
Χρήση της ιδιοκτησίας σκιά κειμένουμπορείτε να δημιουργήσετε διάφορα εφέ για κείμενο, χωρίς να περιορίζονται σε απλές σκιές. Για παράδειγμα, εδώ είναι ο κώδικας για τη δημιουργία της ψευδαίσθησης του κειμένου με εσοχή.
Πρώτα πρέπει να ρυθμίσετε το χρώμα του κειμένου λίγο πιο σκούρο από το χρώμα του φόντου. Και τότε πρέπει να χρησιμοποιήσετε το ακίνητο σκιά κειμένουμε λευκό χρώμα και αυξημένη διαφάνεια.
Το χρώμα φόντου είναι #222 και το χρώμα του κειμένου έχει αδιαφάνεια 60%. Η λευκή σκιά είναι τοποθετημένη ελαφρώς προς τα κάτω και προς τα δεξιά με αδιαφάνεια 10%.
Κύριο μέρος ( φόντο: #222; ) #text h1 ( χρώμα: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0,1); )
Δεν είναι απαραίτητο να θολώσετε τη σκιά καθόλου. Μια καθαρή σκιά μπορεί να ταιριάζει καλά με το σχεδιασμό του ιστότοπου.
Κείμενο-σκιά: 6px 6px 0px rgba(0,0,0,0,2);
Η πραγματική διασκέδαση ξεκινά όταν πετάτε τον περιορισμό του να έχετε μόνο μία σκιά. Χρησιμοποιώντας κόμμα για να διαχωρίσετε τους ορισμούς, μπορείτε να χρησιμοποιήσετε όσες σκιές θέλετε!
Κείμενο-σκιά: shadow1, shadow2, shadow3;
Ακολουθεί ένα παράδειγμα χρησιμοποιώντας δύο σκιές. Το πρώτο έχει το ίδιο χρώμα με το φόντο.
Κείμενο-σκιά: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0,15);
Προχωρώντας σε μεγάλη απόσταση
Μόλις κατακτήσετε τη χρήση πολλαπλών σκιών, το αποτέλεσμα θα γίνεται όλο και πιο εκφραστικό. Είναι πολύ εύκολο να δημιουργήσετε ένα εφέ 3D για κείμενο.
Το παράδειγμα χρησιμοποιεί τέσσερις σκιές, όλες μετατοπισμένες προς τα κάτω σε διαφορετικές αποστάσεις και θολές.
Κείμενο-σκιά: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0,15), 0px 24px 2px rgba(0,0,0,0,1), 0px 34px rgba(1,0px )
Μετατόπιση προς τα κάτω σε μικρή απόσταση και έντονο θάμπωμα
Εδώ είναι μια άλλη υλοποίηση της ίδιας ιδέας. Οι τρεις σκιές μετακινούνται σε μικρότερη απόσταση και πιο θολές.
Κείμενο-σκιά: 0px 4px 3px rgba(0,0,0,0,4), 0px 8px 13px rgba(0,0,0,0,1), 0px 18px 23px rgba(0,0,0,0,1);
3D κείμενο του Mark Dotto
Το εφέ χρησιμοποιείται στο MarkDotto.com. Χρησιμοποιεί 12 διαφορετικές σκιές για να δημιουργήσει ένα υπέροχο 3D εφέ.
Κείμενο-σκιά: 0 1px 0 #cccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,1),. 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
Ανάγλυφο κείμενο του Γκόρντον Χολ
Παρατηρήστε ότι στο παραπάνω παράδειγμα ονόμασα την τεχνική μου το εφέ γραμματοσειράς «γρήγορο και βρώμικο». Αυτό συμβαίνει επειδή υπάρχει ένας πολύ πιο εμπλεκόμενος τρόπος για να δημιουργήσετε κάποιο σοβαρά ένθετο κείμενο που είναι πολύ πιο πιστευτό.
Ο Γκόρντον χρησιμοποιεί κάποιο σοβαρό βουντού CSS για να τραβήξει μακριά όχιμόνο μια εξωτερική σκιά αλλά και μια γνήσια εσωτερική σκιά. Ρίξτε μια ματιά στο blog του για μια πλήρη εξήγηση της τεχνικής.
χρώμα φόντου: #666666; -webkit-background-clip:text; -moz-background-clip:text; background-clip:text; χρώμα: διαφανές text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
λάμψη
Κείμενο-σκιά: 0px 0px 6px rgba(255,255,255,0,7);
Κείμενο-σκιά: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;
Πολλαπλές πηγές φωτός
Κείμενο-σκιά: 0px 15px 5px rgba(0,0,0,0,1), 10px 20px 5px rgba(0,0,0,0,05), -10px 20px 5px rgba(0,0,0,0,05);
Χρώμα: rgba(0,0,0,0.6); text-shadow: 2px 8px 6px rgba(0,0,0,0,2), 0px -5px 35px rgba(255,255,255,0,3);
συμπέρασμα
Οπως οι περισσότεροι εφέ css, οι σκιές είναι πολύ εύκολο να εφαρμοστούν. Αλλά ένας συνδυασμός απλών ενεργειών μπορεί να οδηγήσει σε εκπληκτικά αποτελέσματα.
Γεια σας αγαπητοί αναγνώστες. Σήμερα θα κάνουμε ωραία σκιά για τα μπλοκ Βοήθεια CSS . Νομίζω ότι αυτό θα σας φανεί πολύ χρήσιμο, ειδικά αν φτιάχνετε πρότυπα. Και τα μπλοκ με σκιά φαίνονται πολύ ελκυστικά και μοντέρνα.
Υποστήριξη προγράμματος περιήγησης
Βασικά τα πάντα σύγχρονα προγράμματα περιήγησηςυποστήριξη σκιωδών εφέ:
- Internet Explorer 9.0 και νεότερη έκδοση.
- Firefox 3.5 και νεότερη έκδοση.
- Chrome 1 και νεότερη έκδοση.
- Safari 3 και άνω.
- Opera 10.5 και πάνω.
Θα ήθελα επίσης να αναφέρω ένα όχι ασήμαντο σημείο: για ορισμένα προγράμματα περιήγησης θα χρησιμοποιήσουμε ορισμένα προθέματα. Για Firefox χρησιμοποιείται -moz-, για Chrome και Safari πρέπει να χρησιμοποιήσετε το πρόθεμα - διαδικτυακό κιτ.
Τώρα, ας περάσουμε στο πιο ενδιαφέρον κομμάτι. Ας δούμε όλες τις σκιές ξεχωριστά, θα υπάρχουν 8 εφέ.
εφέ σκιάς 1
ΣΤΟ αυτό το παράδειγμαη σκιά του μπλοκ βρίσκεται στο κάτω μέρος.
HTML
Επίδραση 1
css
text-align:center; θέση:συγγενής; top:80px; ) .box ( πλάτος:70%; ύψος: 200 px; φόντο:#FFF; περιθώριο: 40 px αυτόματα; ) /*====================== = ========================= * Επίδραση 1 * ===================== ===========================*/ .effect1( -webkit-box-shadow: 0 10px 6px -6px #777; -moz- box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777; )εφέ σκιάς 2
Σε αυτό το παράδειγμα, η σκιά από το μπλοκ πηγαίνει προς τα αριστερά και δεξιά, αλλά δεν υπάρχει καμία στη μέση. Αποδεικνύεται ένα πολύ ενδιαφέρον αποτέλεσμα.
HTML
Εφέ 2
css
.box h3( text-align:center; position:relative; top:80px; ) .box (πλάτος:70%; ύψος:200px; background:#FFF; margin:40px auto; ) /*====== =========================================== * Επίδραση 2 * == = =========================================*/ .effect2 ( θέση: σχετική ; ) .effect2:before, .effect2:after ( z-index: -1; position: absolute; content: ""; bottom: 15px; αριστερά: 10px; πλάτος: 50%; επάνω: 80%; max -width: 300 px; φόντο: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform -3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transformation: rotate(-3deg); . effect2:after ( -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg) ; δεξιά: 10 εικονοστοιχεία, αριστερά: αυτόματη; )εφέ σκιάς 3
Εδώ η σκιά του μπλοκ είναι μόνο στα αριστερά.
HTML
Επίδραση 3
css
.box h3( text-align:center; position:relative; top:80px; ) .box (πλάτος:70%; ύψος:200px; background:#FFF; margin:40px auto; ) /*====== =========================================== * Επίδραση 3 * == = =========================================*/ .effect3 ( θέση: σχετική ; ) .effect3:before ( z-index: -1; position: absolute; content: ""; bottom: 15px; αριστερά: 10px; πλάτος: 50%; top: 80%; max-width:300px; background: # 777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate); --3 moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transformation: rotate(-3deg); )εφέ σκιάς 4
Σκιά στα δεξιά.
HTML
Επίδραση 4
css
.box h3( text-align:center; position:relative; top:80px; ) .box (πλάτος:70%; ύψος:200px; background:#FFF; margin:40px auto; ) /*====== =========================================== * Επίδραση 4 * == = ==========================================*/ .effect4 ( θέση: σχετική ; ) .effect4:after ( z-index: -1; position: absolute; content: ""; bottom: 15px; right: 10px; left: auto; πλάτος: 50%; top: 80%; max- πλάτος:300px ; φόντο: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-(transform: rotate ); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transformation: rotate(3deg); )Εφέ σκιάς 5
Σε αυτή την περίπτωση, η σκιά και στις δύο πλευρές μετακινήθηκε πιο έντονα προς τα κάτω.
HTML
Επίδραση 5
css
.box h3( text-align:center; position:relative; top:80px; ) .box (πλάτος:70%; ύψος:200px; background:#FFF; margin:40px auto; ) /*====== =========================================== * Επίδραση 5 * == = ==========================================*/ .effect5 ( θέση: σχετική ; ) .effect5:before, .effect5:after ( z-index: -1; position: absolute; content: ""; bottom: 25px; αριστερά: 10px; πλάτος: 50%; επάνω: 80%; max -width: 300 px; φόντο: #777; -webkit-box-shadow: 0 35px 20px #777; -moz-box-shadow: 0 35px 20px #777; box-shadow: 0 35px 20px #777; -webkit-transform -8deg); -moz-transform: rotate(-8deg); -o-transform: rotate(-8deg); -ms-transform: rotate(-8deg); transformation: rotate(-8deg); . effect5:after ( -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); -o-transform: rotate(8deg); -ms-transform: rotate(8deg); transformation: rotate(8deg) ; δεξιά: 10 εικονοστοιχεία, αριστερά: αυτόματη; )εφέ σκιάς 6
Εδώ είναι το αποτέλεσμα των κυρτών σκιών στο κάτω μέρος του μπλοκ.
HTML
Επίδραση 6
css
.box h3( text-align:center; position:relative; top:80px; ) .box (πλάτος:70%; ύψος:200px; background:#FFF; margin:40px auto; ) /*====== =========================================== * Επίδραση 6 * == = =========================================*/ .effect6 ( position:relative ; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0 , 0, 0, 0,3), 0 0 40 εικονοστοιχεία rgba(0, 0, 0, 0,1) ένθετο, πλαίσιο-σκιά: 0 1 εικονοστοιχεία 4 εικονοστοιχεία rgba(0, 0, 0, 0,3), 0 0 40 εικονοστοιχεία rgba(0 , 0, 0, 0.1) inset; ) .effect6:before, .effect6:after ( content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0 ,0,8); -moz-box-shadow:0 0 20px rgba(0,0,0,0,8); box-shadow:0 0 20px rgba(0,0,0,0,8); επάνω:50% ; κάτω: 0; αριστερά:10 εικονοστοιχεία; δεξιά:10 εικονοστοιχεία; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect6:after ( δεξιά:10px; αριστερά:auto; -webkit-transform :skew( 8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) περιστροφή (3 μοίρες); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); )Εφέ σκιάς 7
Το ίδιο αποτέλεσμα είναι μόνο μια σκιά στο πάνω και στο κάτω μέρος του μπλοκ.
HTML
Επίδραση 7
css
.box h3( text-align:center; position:relative; top:80px; ) .box (πλάτος:70%; ύψος:200px; background:#FFF; margin:40px auto; ) /*====== =========================================== * Επίδραση 7 * == = =========================================*/ .effect7 ( position:relative ; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0 , 0, 0, 0,3), 0 0 40 εικονοστοιχεία rgba(0, 0, 0, 0,1) ένθετο, πλαίσιο-σκιά: 0 1 εικονοστοιχεία 4 εικονοστοιχεία rgba(0, 0, 0, 0,3), 0 0 40 εικονοστοιχεία rgba(0 , 0, 0, 0.1) inset; ) .effect7:before, .effect7:after ( content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0 ,0,8); -moz-box-shadow:0 0 20px rgba(0,0,0,0,8); box-shadow:0 0 20px rgba(0,0,0,0,8); top:0; bottom:0 ; αριστερά: 10 εικονοστοιχεία; δεξιά: 10 εικονοστοιχεία; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect7:after ( δεξιά:10px; αριστερά:auto; -webkit-transform: λοξή(8deg ) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) r otate (3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); )Εφέ σκιάς 8
Η επίδραση των κυρτών σκιών στις πλευρές του μπλοκ.
HTML
Επίδραση 8
css
.box h3( text-align:center; position:relative; top:80px; ) .box (πλάτος:70%; ύψος:200px; background:#FFF; margin:40px auto; ) /*====== =========================================== * Επίδραση 8 * == = =========================================*/ .effect8 ( position:relative ; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0 , 0, 0, 0,3), 0 0 40 εικονοστοιχεία rgba(0, 0, 0, 0,1) ένθετο, πλαίσιο-σκιά: 0 1 εικονοστοιχεία 4 εικονοστοιχεία rgba(0, 0, 0, 0,3), 0 0 40 εικονοστοιχεία rgba(0 , 0, 0, 0.1) inset; ) .effect8:before, .effect8:after ( content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0 ,0,8); -moz-box-shadow:0 0 20px rgba(0,0,0,0,8); box-shadow:0 0 20px rgba(0,0,0,0,8); top:10px; bottom:10px ; αριστερά:0; δεξιά:0; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect8:after ( right:10px; left:auto; -webkit-transform: skew(8deg ) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) r otate (3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); )Αυτά αγαπητοί φίλοι. Αν δεν καταλαβαίνετε κάτι, φροντίστε να ρωτήσετε στα σχόλια. Τα λέμε σύντομα.