Style Sheets Ιστού
Συμβουλές & κόλπα CSS

Κείμενο με σκιές

CSS επίπεδου 3 έχει μια ιδιότητα ονομαζόμενη 'text-shadow' για να προσθέσει μια σκιά σε κάθε γράμμα κάποιου κειμένου. Με απλούστερη μορφή του, φαίνεται όπως παρεμφερές:

h3 {text-shadow: 0.1em 0.1em #333}

Που προσθέτει μια σκούρο γκρι (# 333) σκιά λίγο στα δεξιά (0.1em) και κάτω (0.1em) σχετικά με το κανονικό κείμενο. Το αποτέλεσμα φαίνεται όπως αυτό:

(Τον Αύγουστο το 2005, δεν υποστηρίζουν ακόμα όλοι οι πλοηγοί ίντερνετ πλήρως 'text-shadow'. Τα ανωτέρω πρέπει να λειτουργεί τουλάχιστον στο Safari και Konqueror.)

Ασαφείς σκιές κειμένου

Η απλούστερη μορφή της ιδιότητας 'text-shadow' έχει δύο μέρη: το χρώμα (όπως #333 ανωτέρω) και την μετατόπισή του (0.1em 0.1em στο παράδειγμα ανωτέρω). Αυτό οδηγεί σε μια έντονη σκιά στην υποδεδειγμένη μετατόπισή. Αλλά η μετατόπισή μπορεί επίσης να γίνει ασαφής, με συνέπεια μια λίγο πολύ θολωμένη σκιά.

Το ποσό ασάφειας δίνεται όπως μία άλλη μετατόπισή. Εδώ είναι δύο γραμμές, μια με λίγη ασάφεια (0.05em) και μια με πολλή (0.2em):

h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}

Αναγνώσιμο λευκό κείμενο

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

h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

Πολλαπλές σκιές

Μπορείτε επίσης να έχετε περισσότερες από μια σκιές. Γενικά, αυτό φαίνεται μάλλον παράξενο:

h3 {text-shadow: 0.2em 0.5em 0.1em #600,
      -0.3em 0.1em 0.1em #060,
      0.4em -0.3em 0.1em #006}

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

h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #333}

Αυτό είναι λίγο επικίνδυνο, όπως μπορείτε να δείτε εάν ο πλοηγός ίντερνετ σας δεν υποστηρίζει 'text-shadow'. Στην πραγματικότητα, τα χρώματα του υποβάθρου και του κειμένου σε αυτό το παράδειγμα είναι σχεδόν ίδια (#CCCCCC και # D1D1D1), έτσι χωρίς τις σκιές, δεν υπάρχει σχεδόν καθόλου αντίθεση.

Ζωγραφίζοντας γράμματα με περίγραμμα

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

h3 {text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black}

Δεν είναι ένα τέλειο περίγραμμα, και αυτή τη στιγμή (Αύγουστος 2005) η συζήτηση είναι ακόμα ανοικτή εάν CSS πρέπει να έχει μια χωριστή ιδιότητα (ή ίσως μια αξία για 'text-decoration') για να κάνει τα καλύτερα περιγράμματα.

Λάμψη νέον

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

h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F}