Ιδιότητα text-shadow

Η ιδιότητα text-shadow ορίζει μια σκιά στο κείμενο. Ως τιμή, η ιδιότητα δέχεται 4 παραμέτρους, που αναφέρονται χωρισμένες με κενό, ή τη λέξη-κλειδί none, που ακυρώνει εντελώς τη σκιά (αυτή είναι η προεπιλεγμένη τιμή).

Σύνταξη

επιλογέας {
	text-shadow: μετατόπιση_στο_x μετατόπιση_στο_y θόλωση χρώμα;
}

επιλογέας {
	text-shadow: none;
}

Παράμετροι

Παράμετρος	Περιγραφή
μετατόπιση στο x	Ορίζει τη μετατόπιση της σκιάς στον άξονα X. Μια θετική τιμή μετατοπίζει προς τα δεξιά, μια αρνητική - προς τα αριστερά.
μετατόπιση στο y	Ορίζει τη μετατόπιση της σκιάς στον άξονα Y. Μια θετική τιμή μετατοπίζει προς τα κάτω, μια αρνητική - προς τα πάνω.
θόλωση	Ορίζει το θόλωμα της σκιάς. Όσο μεγαλύτερη είναι η τιμή - τόσο πιο θολή θα είναι η σκιά. Προαιρετική παράμετρος. Αν δεν οριστεί - η σκιά θα είναι καθαρή.
χρώμα	Ορίζει το χρώμα της σκιάς σε οποιεσδήποτε μονάδες για χρώμα. Προαιρετική παράμετρος. Αν δεν οριστεί - το χρώμα της σκιάς ταιριάζει με το χρώμα του κειμένου.

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

Παράδειγμα

Ας μετατοπίσουμε τη σκιά προς τα κάτω και τα αριστερά και ας προσθέσουμε ένα ελαφρύ θόλωμα:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-shadow: 5px 5px 3px black;
}

Παράδειγμα . Καθαρή σκιά

Τώρα ας κάνουμε τη σκιά κόκκινη, ας τη μετατοπίσουμε προς τα κάτω και τα αριστερά, αλλά ας αφαιρέσουμε το θόλωμα - η σκιά θα είναι καθαρή:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-shadow: 10px 10px red;
}

Παράδειγμα . Ομοιόμορφη σκιά

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

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-shadow: 0px 0px 3px black;
}

Δείτε επίσης

η ιδιότητα box-shadow,
που ορίζει μια σκιά σε ένα δοχείο