Γράμματα με σκιά. Εφέ κειμένου HTML και CSS

Περιγραφή

Προσθέτει τη σκιά στο κείμενο, και καθορίζει επίσης τις παραμέτρους της: το χρώμα της σκιάς, η απόκλιση σε σχέση με την επιγραφή και την ακτίνα θαμπάδα. Η ιδιότητα σκιά κειμένου μπορεί να λειτουργήσει σε συνδυασμό με ψευδο-στοιχεία: πρώτο γράμμα και: πρώτη γραμμή.

Σύνταξη

Κείμενο-σκιά: Κανένα | Σκιά [, σκιά] *
Πού είναι η σκιά:
<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>

Αξίες

Κανένας κανένας ακυρώνει την προσθήκη σκιάς. Χρώμα σκιά χρώματος σε οποιαδήποτε διαθέσιμη μορφή CSS. Από προεπιλογή, το χρώμα της σκιάς συμπίπτει με το χρώμα του κειμένου. Προαιρετική παράμετρος. Μετατοπίστε με x τη σκιά σκιά οριζόντια σε σχέση με το κείμενο. Η θετική τιμή αυτής της παραμέτρου ορίζει τη μετατόπιση της σκιάς προς τα δεξιά, αρνητική - προς τα αριστερά. Υποχρεωτική παράμετρος. Μετακινήστε τη μετατόπιση της σκιάς κάθετα σε σχέση με το κείμενο. Είναι επίσης επιτρεπτό να χρησιμοποιήσετε μια αρνητική τιμή που αυξάνει τη σκιά πάνω από το κείμενο. Υποχρεωτική παράμετρος. Η ακτίνα θέτει την ακτίνα της σκιάς. Όσο μεγαλύτερη αυτή η τιμή, τόσο ισχυρότερη η σκιά εξομαλύνει, γίνεται ευρύτερη και ελαφρύτερη. Εάν αυτή η παράμετρος δεν έχει καθοριστεί, η προεπιλεγμένη έχει οριστεί σε 0. Σημειώστε ότι ο αλγόριθμος εξομάλυνσης σε browsers είναι συνήθως διαφορετική, έτσι ώστε ο τύπος της σκιάς μπορεί να ποικίλει κάπως ανάλογα με το συγκεκριμένες παραμέτρους εξομάλυνση.

Επιτρέπεται να καθορίσει διάφορες παραμέτρους σκιάς, χωρίζοντάς τα μεταξύ τους. Η ακόλουθη σειρά λαμβάνεται υπόψη στο CSS3: Η πρώτη σκιά της λίστας βρίσκεται στην κορυφή, η τελευταία στη λίστα βρίσκεται στο κάτω μέρος. Στην CSS2, η σειρά είναι το αντίθετο: η πρώτη σκιά τοποθετείται στο κάτω μέρος, και το τελευταίο είναι στην κορυφή.

HTML5 CSS2.1 CSS3 IE CR OP SA FX

Θα ζούσε τον Κύθρο στο νότο; Ναι, αλλά μια ψεύτικη περίπτωση!

Το αποτέλεσμα του παραδείγματος φαίνεται στο ΣΧ. ένας.

Σύκο. 1. Τύπος σκιάς στο πρόγραμμα περιήγησης Safari

Περιηγητές

Η όπερα υποστηρίζει τις μέγιστες παράμετροι σκιάς 6-9. Η αύξηση αυτής της τιμής, καθώς και η αύξηση της ακτίνας θολώματος άνω των 100px επηρεάζει την παραγωγικότητα του προγράμματος περιήγησης. Η όπερα έκδοση 9.5-10 χρησιμοποιεί μια χαρτογράφηση αρκετών σκιών, όπως στο CSS2.

Το Safari στην έκδοση 4.0 υποστηρίζεται μόνο μία παράμετρος σκιάς, τα υπόλοιπα αγνοούνται. Με την έκδοση 4.0, υπάρχουν ήδη πολλές σκιές.

Το πρόγραμμα περιήγησης Internet Explorer κατανοεί την ιδιότητα σκιά κειμένου μόνο από την έκδοση 10.0. Αντ 'αυτού, χρησιμοποιήστε το φίλτρο ιδιοκτησίας: ιδιοκτησία σκιάς. Για παράδειγμα, ο ακόλουθος σχεδιασμός ορίζει το χρώμα της σκιάς (# 666666), την κατεύθυνση του (45 ° από την κατακόρυφη) και την τιμή μετατόπισης (4 pixels).

Φίλτρο: σκιά (χρώμα \u003d # 666666, κατεύθυνση \u003d 45, αντοχή \u003d 4);

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

Πώς να κάνετε σκιά για κείμενο

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

Δηλαδή: 10.0
ΑΚΡΗ: 12.0
Firefox: 3.5
Χρώμιο: 4.0
Σαφάρι: 4.0
ΛΥΡΙΚΗ ΣΚΗΝΗ: 10.1
iOS Safari: 3.2
Android Browser: 2.1
Χρώμιο. για αντρόιντ: 55.0

1. Σύνταξη ακινήτων κειμένου-σκιάς

Κάθε σκιά χρησιμοποιείται τόσο στο ίδιο το κείμενο όσο και στα στοιχεία του σχεδιασμού της (η ιδιότητα διακόσμησης κειμένου). Ταυτόχρονα, μπορείτε να ορίσετε αρκετές σκιές, δείχνοντάς τα μέσα από το κόμμα. Οι σκιές υπερτίθενται ο ένας στον άλλο, αλλά το ίδιο το κείμενο δεν επικαλύπτει. Η πρώτη σκιά βρίσκεται πάντα στην κορυφή πάνω από τις άλλες σκιές. Το ακίνητο κληρονομείται.

Κάθε σκιά καθορίζεται από δύο ή τρεις τιμές μήκους (η τρίτη τιμή είναι υποχρεωτική) και το χρώμα (προαιρετική τιμή). Εάν η χρωστική σκίαση δεν έχει καθοριστεί, χρησιμοποιείται το χρώμα του κειμένου.

Το πρώτο μήκος ορίζει την μετατόπιση κατά μήκος του άξονα Χ, το δεύτερο είναι η μετατόπιση κατά μήκος του άξονα Υ. Εάν τα μήκη είναι αρνητικά, τότε η σκιά μετατοπίζεται προς τα αριστερά και προς τα πάνω από το κείμενο.

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

Σύκο. 1. Σύνταξη ακινήτων κειμένου-σκιάς

Κείμενο-σκιά.
Αξίες:
x-offset.	Υποχρεωτική αξία. Μετατόπιση της σκιάς οριζόντια σε σχέση με το κείμενο. Μπορεί να πάρει θετικές και αρνητικές τιμές.
y-offset.	Υποχρεωτική αξία. Μετατόπιση της σκιάς κάθετα σε σχέση με το κείμενο. Μπορεί να πάρει θετικές και αρνητικές τιμές.
θολούρα	Προαιρετική τιμή. Καθορίζει την ακτίνα της σκιάς. Όσο περισσότερη ακτίνα, τόσο ισχυρότερη η σκιά είναι θολή.
χρώμα	Προαιρετική τιμή. Από προεπιλογή, παίρνει το χρώμα του κειμένου. Για να δημιουργήσετε μια τιμή, μπορείτε να χρησιμοποιήσετε τις ακόλουθες μορφές εγγραφής χρώματος: #RRGGBB, RGB (κόκκινο, πράσινο, μπλε), RGBA (κόκκινο, πράσινο, μπλε, άλφα).
κανένας	Η προεπιλεγμένη τιμή σημαίνει την απουσία μιας σκιάς κειμένου. Καταργεί τη σκιά του στοιχείου από την ομάδα των στοιχείων με ένα συγκεκριμένο ακίνητο.
αρχικός	Ορίζει την προεπιλεγμένη τιμή ιδιοκτησίας.
κληρονομώ.	Κληρονομεί την αξία της ιδιοκτησίας από το γονικό στοιχείο.

2. Παραδείγματα σκιάς για κείμενο

2.1. Σκιά αφίσας

Σκιά του κειμένου

Κείμενο-σκιά-1 (φόντο: # 77F7DE? Χρώμα: Λευκό? Text-shadow: -2px -2px 0 # 4D4644, 2px -2px 0 # 4D4644, -2px 2px 0 # 4D4644, 2px 2px 0 # 4D4644, 4px 4px 0 Λευκό, 5px 5px 0 λευκό, 6px 6px 0 λευκό; επιστολή-διάστημα: 0.1em;)

2.2. 3d σκιά

Σκιά του κειμένου

Κείμενο-σκιά-2 (φόντο: γραμμική διαβάθμιση (-45deg, # Fee864, # F5965E)? Χρώμα: # F4F4F4? Text-shadow: -1px -1px λευκό, 1px 1px γκρι, 2px 2px # 7A7A7A, 3px 3px # 757575 , 4px 5px # 666666, 6px 6px # 666666, 7px 7px # 616661, 8 εικονοστοιχεία 8 εικονοστοιχεία # 5C5C5C, 9PX 9PX # 575757, 10px 10px # 525252, 11px 11px # 4D4D4D, 18px 18px 30px RGBA (0, 0, 0, .4) , 18px 18px 10px RGBA (0, 0, 0, .4)?)

2.3. Σκιαστικό κείμενο

Σκιά του κειμένου

Text-Shadow-3 (Ιστορικό: # FFE6DB, Χρώμα: # FFE6DB, επιστολή-Spacer: .1em; Text-Shadow: 3PX 0 RGBA (250, 111, 142, .5), 6px 0 RGBA (250, 111, 142 , .4), 9px 0 RGBA (250, 111, 142, .3), 12px 0 RGBA (250, 111, 142, .2), 15px 0 RGBA (250, 111, 142, .1).

2.4. Ρετρό σκιά

Σκιά του κειμένου

Text-Shadow-4 (Χρώμα: # FB631E; Επιστολή-Spacer: .1em; Text-Shadow: 4px 4px White, 6px 6px # D7CC88;))

2.5. Πολυστρωματική σκιά

Σκιά του κειμένου

Text-Shadow-5 (Ιστορικό: # F1F1F1; Χρώμα: # FCC105; Επιστολή-Spacer: .0em; Σκιά: 4px 4px # ff981d, 7px 7px rgba (200, 120, 22, .2);).

2.6. Διαφανής σκιά

Σκιά του κειμένου

Text-Shadow-6 (Χρώμα: Διαφανές, Text-Shadow: 4PX -4PX RGBA (157, 217, 227, .7), -2px -2px RGBA (159, 141, 105, .7), 0 2px rgba (254 216, 21, .7);)

2.7. Σκιά ζέβρα

Σκιά του κειμένου

Κείμενο-σκιά-7 (φόντο: # E02A91? Χρώμα: Λευκό? Κείμενο-σκιά: 2px 2px Μαύρο, 4px 4px Λευκό, 6px 6px Μαύρο, 8 εικονοστοιχεία 8 εικονοστοιχεία Λευκό, 10px 10px Μαύρο, 12px 12px Λευκό, 14px 14px Μαύρο, 16px 16px Λευκό , 18px 18px μαύρο, 20px 20px λευκό, 22px 22px μαύρο, 24px 24px λευκό, 26px 26px μαύρο;)

2.8. Σκιά νέον

Σκιά του κειμένου

Κείμενο-σκιά-8 (Ιστορικό: Μαύρο? Χρώμα: Λευκό? Κείμενο-σκιά: 0 0 5px Λευκό, 0 10px Λευκό, 0 0 15px Λευκό, 0 0 20px Crimson, 0 0 35px CRIMSON, 0 0 40 εικονοστοιχεία CRIMSON, 0 0 50px Crimson, 0 0 75px Crimson;)

2.9. Σκιά

Σκιά του κειμένου

Κείμενο-σκιά-9 (Χρώμα: Λευκό? Text-shadow: 1px 1px # 732372, 1px -1px # 732372, -1px 1px # 732372, -1px -1px # 732372, 3px 3px 6px RGBA (0,0,0, πέντε );)

2.10. Letterpress στυλ

Σκιά του κειμένου

Κείμενο-σκιά-10 (Ιστορικό: # F9C941? Χρώμα: # F9C941? Letter-Spaction: 2px? Κείμενο-σκιά: 1px 1px # F3E7CF, -1PX -1PX # 56433D?)

2.11. Twitter Style

Σκιά του κειμένου

Text-Shadow-11 (Χρώμα: # 3cf; Text-Shadow: -1px 0 1px λευκό, 0 -1px 1px λευκό, 0 1px 1px λευκό, 1px 0 1px λευκό, 0 0 8px λευκό, 0 0 8px Λευκό, 2px 2px 3px μαύρο;)

2.12. Σκιά με εγκεφαλικό επεισόδιο

Σκιά του κειμένου

Text-Shadow-12 (Χρώμα: # E34C38; Text-Shadow: 1px 1px λευκό, 2px 2px λευκό, -1px -1px λευκό, -2px -2px λευκό, -1px 1px λευκό, -2px 2px λευκό, -2px 2px λευκό, 2px -2px ΛΕΥΚΟ, -3PX -3PX 4px RGBA (0,0,0, .3), -3px 3px 4px RGBA (0,0,0, .3), 3px 3px 4px RGBA (0.0.0 ,. 3) , 3PX -3PX 4PX RGBA (0,0,0, .3);).

Περιγραφή

Προσθέτει τη σκιά στο κείμενο, και καθορίζει επίσης τις παραμέτρους της: το χρώμα της σκιάς, η απόκλιση σε σχέση με την επιγραφή και την ακτίνα θαμπάδα. Η ιδιότητα σκιά κειμένου μπορεί να λειτουργήσει σε συνδυασμό με ψευδο-στοιχεία: πρώτο γράμμα και: πρώτη γραμμή.

Σύνταξη

Κείμενο-σκιά: Κανένα | Σκιά [, σκιά] *
Πού είναι η σκιά:
<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>

Αξίες

Κανένας κανένας ακυρώνει την προσθήκη σκιάς. Χρώμα σκιά χρώματος σε οποιαδήποτε διαθέσιμη μορφή CSS. Από προεπιλογή, το χρώμα της σκιάς συμπίπτει με το χρώμα του κειμένου. Προαιρετική παράμετρος. Μετατοπίστε με x τη σκιά σκιά οριζόντια σε σχέση με το κείμενο. Η θετική τιμή αυτής της παραμέτρου ορίζει τη μετατόπιση της σκιάς προς τα δεξιά, αρνητική - προς τα αριστερά. Υποχρεωτική παράμετρος. Μετακινήστε τη μετατόπιση της σκιάς κάθετα σε σχέση με το κείμενο. Είναι επίσης επιτρεπτό να χρησιμοποιήσετε μια αρνητική τιμή που αυξάνει τη σκιά πάνω από το κείμενο. Υποχρεωτική παράμετρος. Η ακτίνα θέτει την ακτίνα της σκιάς. Όσο μεγαλύτερη αυτή η τιμή, τόσο ισχυρότερη η σκιά εξομαλύνει, γίνεται ευρύτερη και ελαφρύτερη. Εάν αυτή η παράμετρος δεν έχει καθοριστεί, η προεπιλεγμένη έχει οριστεί σε 0. Παρακαλείστε να σημειώσετε ότι ο αλγόριθμος εξομάλυνσης σε προγράμματα περιήγησης είναι συνήθως διαφορετική, έτσι ώστε το είδος της σκιάς μπορεί να είναι κάπως διαφορετική, ανάλογα με τις καθορισμένες παραμέτρους εξομάλυνσης.

Επιτρέπεται να καθορίσει διάφορες παραμέτρους σκιάς, χωρίζοντάς τα μεταξύ τους. Η ακόλουθη σειρά λαμβάνεται υπόψη στο CSS3: Η πρώτη σκιά της λίστας βρίσκεται στην κορυφή, η τελευταία στη λίστα βρίσκεται στο κάτω μέρος. Στην CSS2, η σειρά είναι το αντίθετο: η πρώτη σκιά τοποθετείται στο κάτω μέρος, και το τελευταίο είναι στην κορυφή.

HTML5 CSS2.1 CSS3 IE CR OP SA FX

Θα ζούσε τον Κύθρο στο νότο; Ναι, αλλά μια ψεύτικη περίπτωση!

Το αποτέλεσμα του παραδείγματος φαίνεται στο ΣΧ. ένας.

Σύκο. 1. Τύπος σκιάς στο πρόγραμμα περιήγησης Safari

Περιηγητές

Η όπερα υποστηρίζει τις μέγιστες παράμετροι σκιάς 6-9. Η αύξηση αυτής της τιμής, καθώς και η αύξηση της ακτίνας θολώματος άνω των 100px επηρεάζει την παραγωγικότητα του προγράμματος περιήγησης. Η όπερα έκδοση 9.5-10 χρησιμοποιεί μια χαρτογράφηση αρκετών σκιών, όπως στο CSS2.

Το Safari στην έκδοση 4.0 υποστηρίζεται μόνο μία παράμετρος σκιάς, τα υπόλοιπα αγνοούνται. Με την έκδοση 4.0, υπάρχουν ήδη πολλές σκιές.

Το πρόγραμμα περιήγησης Internet Explorer κατανοεί την ιδιότητα σκιά κειμένου μόνο από την έκδοση 10.0. Αντ 'αυτού, χρησιμοποιήστε το φίλτρο ιδιοκτησίας: ιδιοκτησία σκιάς. Για παράδειγμα, ο ακόλουθος σχεδιασμός ορίζει το χρώμα της σκιάς (# 666666), την κατεύθυνση του (45 ° από την κατακόρυφη) και την τιμή μετατόπισης (4 pixels).

Φίλτρο: σκιά (χρώμα \u003d # 666666, κατεύθυνση \u003d 45, αντοχή \u003d 4);

Ακόμα και ο πιο πράσινος σχεδιαστής ξέρει πώς να κάνει σκιές στο Photoshop. Οι σκιές δίνουν τον όγκο του σχεδιασμού και τώρα είναι πολύ δημοφιλές. Δεν υπάρχει εξαίρεση και σκιά για κείμενα, στοιχεία μενού και τίτλους. Αρκετά για να θυμάστε τις διασυνδέσεις της Apple

Θα είναι χρήσιμο να έχουμε στις τεχνικές της Arsenal τις δεξιότητες εργασίας με σκιές για κείμενο.

Μια εργασία

Κάντε σκιά για κείμενο με CSS, χωρίς τη χρήση εικόνων. Τι επιτύχουμε αυτό;

• Ευελιξία - χωρίς τη χρήση εικόνων, το κείμενο είναι εύκολο να αλλάξει
• Ταχύτητα - λιγότερες εικόνες - Λιγότερο βάρος σελίδας, λιγότερες κλήσεις προς το διακομιστή
• SEO - κείμενο Καλύτερες εικόνες Βελτιστοποιεί και αξιόπιστη από τη χρήση εικόνας τεχνικής αντικατάστασης κειμένου

Σκιές κειμένου για κανονικά προγράμματα περιήγησης

Σύμφωνα με τα κανονικά προγράμματα περιήγησης, όλα τα σύγχρονα προγράμματα περιήγησης χτυπήθηκαν, τα οποία βγαίνουν περισσότερο ή λιγότερο με τις συστάσεις του W3C. Στην περίπτωση αυτή, αυτά τα προγράμματα περιήγησης κατανοούν τη σκιά κειμένου CSS3, η οποία συνιστάται το 2003.

Έτσι, μια λίστα με τα προγράμματα περιήγησης που υποστηρίζουν την ιδιότητα σκιά κειμένου:

• Safari 3.1 (Mac / Win) - Υποστηρίγματα, δεν υποστηρίζονται πολλαπλές σκιές.
• Safari 4 (Mac / Win) - Υποστηρίζει πλήρως
• Opera 9.5+ (Mac / Win / Lin) - διατηρεί πλήρως
• Firefox 3.1 / 3.5 (Mac / Win / Lin) - υποστηρίζει εντελώς
• Google Chrome 2 (WIN) - Υποστηρίζει πλήρως
• Shiira (Mac) - Υποστηρίζει πολλές σκιές δεν υποστηρίζονται.
• Konqueror (Lin / Mac / Win) - Υποστηρίζει πλήρως
• iCAB (MAC) - Υποστηρίζει ότι οι πολλαπλές σκιές δεν υποστηρίζονται.
• Safari σε iPhone - υποστηρίγματα, δεν υποστηρίζονται πολλαπλές σκιές.
• Nokia Symbian-Smartphones (Σειρά 60) - στηρίγματα
• Opera Mini 4.1 - Υποστηρίγματα, δεν υποστηρίζει τη θόλωση της σκιάς

Για αυτά τα προγράμματα περιήγησης να κάνουν το κείμενο σκιάς είναι μόνο μία γραμμή στο CSS:

H1 (text-shadow: 0px 1px 3px # 000?)

Παίρνουμε ένα τέτοιο μοντέρνο τίτλο:

Με τη βοήθεια της σκιάς κειμένου, μπορείτε να επιτύχετε διάφορα ενδιαφέροντα αποτελέσματα.

Θολή κείμενο

H1 (Χρώμα: #fff? Ιστορικό: # 666? Κείμενο-σκιά: 0px 0px 3px #fff?)

Αλληλεπικάλυψη κειμένου

H1 (Σκιά κειμένου: 0px 20px # 000;)

Πολλαπλές σκιές επιτρέπουν πολλά περισσότερα αποτελέσματα:

Κατάθλιψη κειμένου

H1 (Ιστορικό: #CCC? Χρώμα: #CCC? Text-shadow: -1px -1px # 666, 1px 1px #fff? Font-face: serif?)

Κυρτό κείμενο

H1 (φόντο: # 999; Χρώμα: # 999; Text-Shadow: 1px 1px 3px # 666, -1px -1px 3px #fff, 1px 1px # 666, -1px -1px #FFF;))

(Δηλαδή δεν θα σας επιτρέψει να απολαύσετε την ομορφιά, επειδή δεν υποστηρίζει το κείμενο-σκιά). Μπορείτε ακόμα να έρθετε με διάφορα εφέ χρησιμοποιώντας κείμενο-σκιά, μπορείτε ακόμα τη μάζα, το μόνο ουσιαστικά όριο είναι η φαντασία σας.

Τώρα για λυπημένη - τι να κάνετε με ζεστό όλα "αγαπημένα" δηλαδή;

Σκιές κειμένου στο IE

Αν IE, μέχρι την 8η έκδοση, δεν καταλαβαίνει Κείμενο-σκιά, έχει αρκετά «αρνί» του. Συγκεκριμένα, υπάρχει ένα φίλτρο drophadow () για να δημιουργήσετε σκιές. Έτσι ώστε να εμφανίζονται οι σκιές, το στοιχείο πρέπει να εγκατασταθεί διάταξη. Μπορείτε να ορίσετε με διάφορους τρόπους:

• Καθορίζοντας το στοιχείο ακίνητο: Block + ύψος () ή πλάτος ())
• Με τη ρύθμιση ενός στοιχείου: απόλυτη
• Περιβάλλον: Αριστερά / Δεξιά
• Ρύθμιση ζουμ: 1

H1 (Φίλτρο: PROGID: dxiMageTransform.microsoft.DropShadow (color \u003d "# 666666", offx \u003d 2, offy \u003d 2, θετικά \u003d "true")? Ζουμ: 1?)

Φαινόταν ότι θα μπορούσατε να φωνάξετε "Hurray !!!" Και χαίρεται στη ζωή, αλλά βλέπε πώς αυτό το φίλτρο στην πραγματικότητα λειτουργεί:

Αυτό είναι το πώς εμφανίζεται το κείμενο, αν το φίλτρο DropShadow εφαρμόζεται σε αυτό.

Για όσους δεν καταλαβαίνουν, η έλλειψη έλλειψης αυτού του φίλτρου:

• Η σκιά φαίνεται τρομερή: γωνιακή, χωρίς ομαλή, με ημιδιαφανή μετάβαση στο φόντο
• Η επιγραφή γραμματοσειράς παραμορφώνεται
• Η σκιά δεν είναι πρακτικά επιδεκτική ρύθμιση (μπορείτε να διαχειριστείτε μόνο τη θέση σκιάς) - μπορεί να παρακάμπτεται μερικώς το φίλτρο σκιάς αντί της Dropshadow, αλλά οι κρίσιμες πρώτες δύο ατέλειες παραμένουν
• Υποχρεωτική παρουσία διάταξης κάπως περιορίζει τον προγραμματιστή

Αυτό το αποτέλεσμα δεν είναι αποδεκτό σε πραγματικά έργα. Δεν είναι σαφές ποιος και πόσο αποδεκτή τέτοια εργασία για τους προγραμματιστές.

Kilian Valkhof πρότεινε χρησιμοποιώντας εξομοίωση σκιάς:

1. Μην εφαρμόζετε ένα φίλτρο απευθείας στο κείμενο
2. Χρησιμοποιήστε αντί για dropshadow και σκιά συνδυασμό λάμψης και θολώματος

Αυτό θα αποφύγει τη στρέβλωση του κειμένου και θα κάνει τη σκιά πιο ευέλικτη.

Δοκιμαστική κεφαλίδαТестовый заголовок

H1 (text-shadow: 3px 3px 3px #CCCCCC? Θέση: σχετική? Ζουμ: 1? Color: # 000?) Διάστημα H1 (Θέση: Απόλυτη? Αριστερά: -3px? Κορυφή: -3px? Z-index: -1? Φίλτρο: Progid: dximagetransform.microsoft.glow (χρώμα \u003d # ccccc, αντοχή \u003d 1) progid: dximagetransform.microsoft.blur (pixelradius \u003d 3, ενεργοποιημένος \u003d "true"); zoom: 1;)

Αλλά ακόμα και με μια τέτοια προσέγγιση, εξακολουθούν να υπάρχουν ορισμένα μειονεκτήματα:

• nonsemantic κώδικα - ένα επιπλέον στοιχείο, ακόμη και με επικάλυψη του κειμένου δεν θα επηρεάσει τη λογική δομή του περιεχομένου, Βελτιστοποίηση SEO. Αυτό το πρόβλημα μπορεί να λυθεί με Χρησιμοποιώντας το JavaScriptπου θα εισαχθεί για ένα πρόσθετο στοιχείο κατά τη φόρτωση της σελίδας
• Δεν είναι κατάλληλη οθόνη σε άλλα προγράμματα περιήγησης (που καταλαβαίνουν το κείμενο Shadow) - Τα φίλτρα επιτρέπουν την απώλεια σκιάς με ελάχιστες ρυθμίσεις. Παρόμοιες σκιές με άλλα προγράμματα περιήγησης δεν πάντοτε να επιτύχουν
• Μικρή ευελιξία - φίλτρα δεν θα δώσει όλα τα χαρακτηριστικά του κειμένου Σκιά, για παράδειγμα, δεν θα είναι δυνατόν να πραγματοποιήσει πολλαπλές σκιές

Για να δημιουργήσετε σκιές για το IE, μπορείτε να χρησιμοποιήσετε το JavaScript (όχι για πρώτη φορά Javascript Saves)

Σκιές για κείμενο με JavaScript

Από τα σενάρια, τα οποία δοκιμάστηκαν, για τον εαυτό μου σταμάτησε στο plugin για jquery "σκιά πτώσης". Τα πλεονεκτήματα του:

• Να μιλήσει τις σκιές που χρησιμοποιούν το ένθετο ενός συνόλου των ικανοποιητών, δηλ. Χωρίς τη χρήση φίλτρων για IE. Αυτό καθιστά δυνατή την πραγματοποίηση των πιο παρόμοιων σκιών στο IE με άλλα προγράμματα περιήγησης + δεν χρειάζεται να ανησυχείτε για τη διάταξη για το IE
• Δημιουργεί σκιές όχι μόνο για δηλαδή, πράγμα που μερικές φορές μπορεί να είναι χρήσιμη
• Μικρό βάρος του σεναρίου - 4KB (Εάν διαγράψετε σχόλια από τον κώδικα) και εάν εφαρμόσετε συμπίεση, θα είναι ακόμη μικρότερη. Στη γραφή του σεναρίου υπάρχουν απαιτήσεις - η παρουσία ενός σεναρίου JQuery.Dimensions.js, αλλά δεν κατάλαβα γιατί αυτός. Οι σκιές δημιουργούνται, διαγράφονται, προσδιορίζουν ταυτότητα και χωρίς αυτό.
• Απλή και κατανοητή τη χρήση
• Μπορείτε να χάσετε πολλές σκιές με κάποια επιτυχία.

Μειονεκτήματα:

• Δεν μπορείτε να αρχικοποιήσετε το σενάριο αναγνωριστικού στοιχείου
• Εάν το στοιχείο ορίζεται από το φόντο, η σκιά θα δημιουργηθεί όχι για το κείμενο, αλλά για το στοιχείο ως σύνολο
• Υποχρεωτική σύνδεση της βιβλιοθήκης JQuery (και αυτό είναι περισσότερο από 50kb). Αλλά η δημοτικότητα του jquery αποδεικνύει πρακτικά αυτό το ελάττωμα
• Το Script Asia απαιτείται επίσης να συνδέσει το jquery.dimensions.js (2kb more). Αλλά δεν κατάλαβα γιατί αυτή η βιβλιοθήκη, φαίνεται, και όλα λειτουργούν καλά χωρίς αυτό

Εφαρμογή του Plugin Shadow Drop

Σύνταξη:

JQuery (επιλογέας) .δοσιάδωση (επιλογές). // Δημιουργία σκιάς στο στοιχείο JQuery (επιλογέας) .Redrawshadow (); // Redrawing Shadow JQuery (Selector) .Removeshadow (); // Διαγράψτε τη σκιά του JQuery (επιλογέα) .shadowid (); // επιστρέφει το αναγνωριστικό σκιάς στοιχείων

Αριστερά: [ακέραιος] (προεπιλογή \u003d 4) TOP: [ακέραιος] (προεπιλογή \u003d 4) Blur: [ακέραιος] (προεπιλογή \u003d 2) αδιαφάνεια: [κλασματικός αριθμός] (προεπιλογή \u003d 0.5) Χρώμα: [Γραμμή] (default \u003d " Μαύρο ") Swap: [Λογική τιμή] (Προεπιλογή \u003d FALSE)

Αριστερά και κορυφαίες παράμετροι - τις συντεταγμένες της σκιάς στην επάνω αριστερή γωνία της επιγραφής (ή του αντικειμένου). Οι θετικές τιμές μετατοπίζονται τη σκιά προς τα δεξιά και προς τα κάτω, αρνητικά - αριστερά και επάνω.

Τυπογραφία - το αγαπημένο μου παιχνίδι, αν πρόκειται για το σχεδιασμό ιστοσελίδων. Θα ήταν περισσότερο, με τη βοήθειά του, μπορείτε να προσελκύσετε την προσοχή ενός ατόμου, απλά μια μικρή αλλαγή της επιγραφής ή ένα κουτί γραμματοσειράς. Πολύ απλό και πολύ αποτελεσματικό, πολλά βιβλία γράφονται σε αυτό το θέμα και υπάρχουν αρκετά αντίγραφα σε διαφορές. Σήμερα δεν θα δώσω συμβουλές για τυπογραφία ως σύνολο - δεν έχω αρκετά προσόντα, αλλά πώς να κάνω ένα κείμενο του ιστότοπού σας - είναι πάντα παρακαλώ. Έτσι σήμερα θα δείξω αρκετές στάσεις χρησιμοποιώντας τις ιδιότητες CSS3 Κείμενο-σκιά., πολύ απλό, αλλά σε επιδέξιες χέρια μπορεί να δουλέψει θαύματα.

Βασική σύνταξη κειμένου-σκιά

Αυτό το ακίνητο Css3 Λειτουργεί σε όλα τα φρέσκα προγράμματα περιήγησης, χωρίς προθέματα προμηθευτών, όπως -moz και -webkit. Ακόμη και δηλαδή μπορεί να μάθει να κατανοεί αυτή την ιδιοκτησία, πρέπει να χρησιμοποιήσετε το σύγχρονο ή αναλόγιο.

Text-Shadow: X-Shift U-Offset Blur χρώμα?

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

Κείμενο-σκιά: 2px 4px 3px RGBA (0,0,0,0.3.3)?

Η σκιά απορρίφθηκε, θολή σε 3 εικονοστοιχεία και συνταγογραφήθηκε μαύρο χρώμα με διαφάνεια 30%. Γιατί χρησιμοποιώ ένα άλφα κανάλι ή διαφάνεια; Παρέχει περισσότερη ελευθερία σε ενέργειες, μπορείτε να κάνετε λίγο ελαφρύτερο ή πιο σκούρο απλά να αλλάξετε την αξία της διαφάνειας, χωρίς να έχεις μετακομίσει με την επιλογή του χρώματος. Αποδεικνύεται αρκετά γρήγορα, συνιστώ.

Αγορασμένα γράμματα

Σώμα (φόντο: # 222;) #TEXT H1 (Χρώμα: RGBA (0,0,0,0,0,6); Κείμενο-σκιά: 2px 2px 3px rgba (255,255,255,0,0,1,1);).

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

Άκαμπτη σκιά

Κείμενο-σκιά: 6px 6px 0px RGBA (0,0,0,0,0.2)?

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

Διπλή σκιά

Κείμενο-σκιά: 4px 3px 0px #fff, 9PX 8 εικονοστοιχεία 0px RGBA (0,0,0,0,0.15)?

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

Κάτω και μακριά

Κείμενο-σκιά: 0px 3px 0px # B2A98F, 0px 14px 10px RGBA (0,0,0,0,0,0,05), 0px 24px 2px RGBA (0,0,0,0,0,0,0,0 , 0,2), 0px 34 εικονοστοιχεία 30px RGBA (0,0,0,0,0.1)?

Το κείμενο είναι ογκομετρικό και πώς κρέμεται πάνω από το φόντο, έτσι δεν είναι; Υπάρχουν 4 σκιές με διαφορετικά επίπεδα θολώματος και τοποθεσίας. Σε γενικές γραμμές, οι περισσότερες σκιές χρησιμοποιούνται, τόσο πιο ρεαλιστικό αποτέλεσμα, θεωρούν τα έργα σας.

Μικρό 3D κείμενο

Κείμενο-σκιά: 0px 4px 3px rgba (0,0,0,0,4,4), 0px 8px 13px rgba (0,0,0,0,0,0,0,0,2), 0px 18px 23px rgba (0,0,0 , 0,0,0).

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

3d κείμενο από το Dotto Mark

Κείμενο-σκιά: 0 1px 0 #ccc, 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 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).

Βρήκα το δίκτυο για να δουλέψω αυτόν τον σχεδιαστή και δεν μπορούσε να περάσει από. Εντυπωσιακή ρεαλιστική.

Κείμενο φτώχειας από το Gordon Hall

Ιστορικό-Χρώμα: # 666666; -Webkit-background-clip: κείμενο; -Moz-background-clip: κείμενο; Background-Clip: Κείμενο; Χρώμα: διαφανές. Κείμενο-σκιά: 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 # 01ccc, -30px 30px 0px # 00BDBD;

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

Αρκετές πηγές φωτός

Κείμενο-σκιά: 0px 15px 5px rgba (0,0,0,0,0,0,0), 10px 20px 5px rgba (0,0,0,0,05), -10px 20px 5px rgba (0,0,0,0,05).

Εδώ η επίδραση πολλαπλών πηγών φωτός που δίνουν σκιές προς όλες τις κατευθύνσεις.

Κυρτό κείμενο

Χρώμα: RGBA (0,0,0,0,0,6); Κείμενο-σκιά: 2px 8px 6px rgba (0,0,0,0,2), 0px -5px 35px rgba (255,255,255,0,3).

Το πιεσμένο κείμενο ήταν ήδη, τώρα κυρτό. Ένα αρκετά απλό αποτέλεσμα, αλλά φαίνεται πολύ όμορφο στους τίτλους, για παράδειγμα. Χρήση, δοκιμάστε

Συμπερασματικά, θέλω να πω - cSS3 Κείμενο-σκιά ακίνητη περιουσία Πολύ απλό όπως θα μπορούσατε ήδη να βεβαιωθείτε. Αλλά η ικανή χρήση, και με μια μικρή φαντασία, μπορεί να εργαστεί θαύματα.
Πειραματιστείτε, σας επιτυχείς