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

(Αυτή η σελίδα χρησιμοποιεί CSS style sheets)

Το παρόν έγγραφο είναι μετάφραση του άρθρου «Cascading Style Sheets. CSS tips & tricks».
Αυθεντική εκδοχή του εγγράφου βρίσκεται μόνο στην ιστοσελίδα W3C http://www.w3.org/Style/Examples/007/text-shadow
Η παρούσα μετάφραση ΔΕΝ είναι επίσημο έγγραφο της W3C.
Όλα τα κοπιράιτ ανήκουν στη W3C.
Το παρόν έγγραφο μπορεί να έχει λάθη της μετάφρασης και εσφαλμένη εκτύπωση.
Συγγραφέας: Dimitris Papadopoulos

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

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

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

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

Περιγράμματα

Λάμψη νέον

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

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

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

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

The noak and the barcicle

(Τον Αύγουστο το 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}

“What do you say?” said the UK

In order to see more clearly

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

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

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

Χωρίς σκιά:

What is in it for me?

Με σκιά:

With a shovel and some oranges

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

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

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

I wish wish wish…

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

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

I, Augustus (you know who)

That's extra, of course

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

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

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

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

Are you feeling red?

A cat, an apple, etcetera

Δεν είναι ένα τέλειο περίγραμμα, και αυτή τη στιγμή (Αύγουστος 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}

With a zest of best

There's no no like a better no

Indeed, quite right, Mr M

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
Δημιουργία 4 Aug 2005;
Τελευταία ανανέωση $Date: 2008/01/11 18:26:31 $ GMT