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

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

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

Ξεκινώντας με HTML και CSS

Μπορείτε να αντιγράψετε και να επικολλήσετε αυτά τα παραδείγματα κώδικα για να έχετε όποιο εφέ σκιάς κειμένου προτιμάτε. Ξεκινήστε δημιουργώντας ένα

index.html

 σκιά #01 


href=" https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"
rel="φύλλο στυλ"
/>
 σκιά #02 


href=" https://fonts.googleapis.com/css2?family=Monoton&display=swap"
rel="φύλλο στυλ"
/>
 σκιά #03 


href=" https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
rel="φύλλο στυλ"
/>
 σκιά #04 


href=" https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
rel="φύλλο στυλ"
/>
 σκιά #05 


href=" https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
rel="φύλλο στυλ"
/>
 σκιά #06 


href=" https://fonts.googleapis.com/css2?family=Eater&display=swap"
rel="φύλλο στυλ"
/>
 σκιά #07 


href=" https://fonts.googleapis.com/css2?family=Codystar&display=swap"
rel="φύλλο στυλ"
/>

στυλ.css

σώμα {
μετατροπή κειμένου: κεφαλαία;
Ύψος γραμμής: 1;
text-align: κέντρο;
μέγεθος γραμματοσειράς: 5rem;
οθόνη: πλέγμα;
κενό: 4 εκ.
}

Τώρα, ας δούμε 11 παραδείγματα σκιών κειμένου για να τα δοκιμάσετε.

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

Μυστικιστής

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

Παραγωγή

HTML

 Σκιά #01 
Μυστικιστής

CSS

σώμα {
χρώμα φόντου: #5e5555;
}
.mystic {
font-family: 'Bowlby One', cursive;
χρώμα: rgba (255, 255, 255, 0,596);
text-shadow: 20px 0px 10px rgb (0, 0, 0);
}

Μονότονος

Αυτό είναι ένα παιχνιδιάρικο εφέ κειμένου χρησιμοποιώντας τη γραμματοσειρά «Monoton». Μπορείτε να παίξετε με το κείμενο και το χρώμα της σκιάς για να ταιριάζει με τα βασικά χρώματα του ιστότοπού σας.

Παραγωγή

HTML

 Σκιά #02 
Μονότονος

CSS

.μονότονο {
font-family: 'Monoton', cursive;
μέγεθος γραμματοσειράς: 15 rem;
χρώμα: rgb (255, 0, 0);
αδιαφάνεια: 0,5;
text-shadow: 0px -78px rgb (255, 196, 0);
}

Μπάντζι

Αυτό είναι ένα ωραίο στυλ χρησιμοποιώντας τη γραμματοσειρά «Bungee Shade». Σε συνδυασμό με σκούρο φόντο, παράγει ένα ακατέργαστο αποτέλεσμα με μια αίσθηση καχυποψίας.

Παραγωγή

HTML

 σκιά #03 
Μπάντζι

CSS

σώμα {
χρώμα φόντου: #222;
}
.bungee {
γραμματοσειρά-οικογένεια: 'Bungee Shade', cursive;
χρώμα: rgb (160, 12, 12);
αδιαφάνεια: 0,9;
text-shadow: -18px 18px 0 rgb (66, 45, 45);
}

Ραδιενεργός

Μπορείτε να χρησιμοποιήσετε αυτό το εφέ για σημάδια συναγερμού ή κινδύνου. Χρησιμοποιεί τη γραμματοσειρά «Rampart One».

Παραγωγή

HTML

 σκιά #04 
Ραδιενεργός

CSS

σώμα {
χρώμα φόντου: #27292d;
}
.ραδιενεργό {
font-family: 'Rampart One', cursive;
χρώμα: rgb (97, 214, 43);
αδιαφάνεια: 0,6;
text-shadow: -18px -18px 20px rgb (87, 255, 9);
}

Τρέχω

Αυτό το τρέχον εφέ κειμένου χρησιμοποιεί τη γραμματοσειρά «Faster One», το κείμενο-σκιά ιδιοκτησία, και ένα ::μετάψευδοστοιχείο με το ίδιο περιεχόμενο με το κείμενο. Αυτό δημιουργεί ένα αποτέλεσμα «διπλασιασμού».

Παραγωγή

HTML

 σκιά #05 
Τρέχω

CSS

σώμα {
χρώμα φόντου: #27292d;
}
.sprint {
font-family: 'Faster One', cursive;
μέγεθος γραμματοσειράς: 10rem;
χρώμα: rgba (255, 0, 242, 0,322);
text-shadow: -20px -108px 0px rgba (255, 255, 255, 0,445);
Διάστιχο γραμμάτων: 1 rem;
θέση: σχετική;
}
.sprint:: μετά από {
περιεχόμενο: 'sprint';
θέση: απόλυτη;
κορυφή: 215 px;
δεξιά: 300 px;
}

Ακανθώδης

Αυτό το τρομακτικό εφέ κειμένου με τσιμπήματα χρησιμοποιεί τη γραμματοσειρά «Eater». Μπορείτε να δοκιμάσετε να αλλάξετε το κείμενο-σκιά αντ' αυτού προς τα κάτω δεξιά.

Παραγωγή

HTML

 σκιά #06 
Ακανθώδης

CSS

.αγκαθωτός {
font-family: 'Eater', cursive;
text-shadow: -18px -18px 2px #777;
}

Codystar

Η σκιά κειμένου μπορεί να λειτουργήσει ως ένα θολό αλλά ορατό περίγραμμα στο κείμενο. Αυτό το φωτεινό εφέ κάνει θαύματα με τη γραμματοσειρά «Codystar».

Παραγωγή

HTML

 σκιά #06 
Codystar

CSS

.codystar {
font-family: 'Codystar', cursive;
βάρος γραμματοσειράς: έντονη γραφή;
χρώμα: rgb (55, 58, 255);
text-shadow: 1px 1px 10px rgb (16, 72, 255), 1px 1px 10px rgb (0, 195, 255);
}

Βασίλειο

Μπορείτε να επιτύχετε έγκυρη τυπογραφία με αυτό το εφέ σκιάς. Χρησιμοποιεί το ::πριν ψευδοστοιχείο και το μεταμορφώνω ιδιότητα να γέρνει τη σκιά.

Παραγωγή

HTML

 σκιά #08 
Βασίλειο

CSS

σώμα {
χρώμα φόντου: #5e5555;
}
.Βασίλειο {
άσπρο χρώμα;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
μέγεθος γραμματοσειράς: 10rem;
Ύψος γραμμής: 1;
text-align: κέντρο;
}
.βασίλειο--σκιά:: πριν από {
χρώμα: #000;
περιεχόμενο: attr(δεδομένα-κείμενο);
margin-top: 0,7rem;
θέση: απόλυτη;
transform: προοπτική (205px) rotateX(38deg) κλίμακα (0,84);
z-index: -1;
}

Κωδικοποιητής

Αυτό το φωτεινό και θετικό κείμενο-σκιά Το αποτέλεσμα μεταφέρει μια προσωπικότητα ιστότοπου με αυτογνωσία και κίνητρα. Μπορείτε να το προσθέσετε στον ιστότοπό σας για να δημιουργήσετε ένα απλό smokey look.

Παραγωγή

HTML

 σκιά #09 


Τρώω 

Υπνος 

Κώδικας 

Επαναλαμβάνω

CSS

σώμα {
χρώμα φόντου: #5e5555;
}
div {
γραμματοσειρά-οικογένεια: Verdana, Geneva, Tahoma, sans-serif;
padding: 40px;
περιθώριο: 0px auto;
βάρος γραμματοσειράς: έντονη γραφή;
Ύψος γραμμής: 5,8 εκ.
text-align: αριστερά;
χρώμα: rgb (94, 94, 94);
} 
.coder-life {
text-shadow: 5px 5px #ffff00;
φίλτρο: drop-shadow(-10px 10px 20px #fff000);
}

Κομψός

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

Παραγωγή

HTML

 σκιά #10 


μικρό
η
r
ένα
ρε
ρε
η
ένα

CSS

.κομψή {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
μέγεθος γραμματοσειράς: 10rem;
Διάστιχο γραμμάτων: -1 rem;
άσπρο χρώμα;
text-shadow: -18px 8px 18px #b4bbbb;
}

Παιχνιδιάρικος

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

Παραγωγή

HTML

 σκιά #11 
Η κωδικοποίηση είναι ♥

CSS

.παιχνιδιάρικος {
γραμματοσειρά-οικογένεια: 'Baloo Tamma', cursive;
χρώμα: #fff;
Διάστιχο γραμμάτων: 0,2 εκ.
text-shadow: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}

Συνεχίστε να πειραματίζεστε με προηγμένα εφέ σκιάς

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

Naincy Mourya (Δημοσιεύτηκαν 15 άρθρα)

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

Περισσότερα από τη Naincy Mourya