Dreamweaver CS6: Προσθήκη σκιών κειμένου με CSS3

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

Πίστωση: Paul Gual, istockphoto.com

Το Dreamweaver CS6 περιλαμβάνει υποστήριξη για σκιές κειμένου CSS3 όταν χρησιμοποιείτε το παράθυρο Ιδιότητες στον πίνακα Στυλ CSS. Μπορείτε να δημιουργήσετε στυλ κλάσης ή αναγνωριστικού με σκιές κειμένου και μπορείτε να προσθέσετε σκιές κειμένου σε υπάρχοντα στοιχεία HTML ορίζοντας ένα στυλ ετικέτας, όπως το στυλ επικεφαλίδας 1 που χρησιμοποιείται στην εικόνα.

Ο κώδικας CSS3 που δημιουργεί αυτή τη σκιά κειμένου είναι

h1 {text-shadow: 2px 2px 3px #000;}

Οι αριθμοί στον κώδικα καθορίζουν ότι η σκιά του κειμένου πρέπει να εκτείνεται 2 pixel προς τα δεξιά και 2 pixel κάτω από το κείμενο με θάμπωμα 3 pixel. Επιπλέον, η σκιά δημιουργείται με το μαύρο χρώμα, που καθορίζεται από τον συντομευμένο δεκαεξαδικό χρωματικό κωδικό #000.

Όταν δημιουργείτε κανόνες για σκιές κειμένου, μπορείτε να καθορίσετε έως και τέσσερις τιμές:

• Οριζόντια και κάθετη: Απαιτούνται οι δύο πρώτες τιμές αριθμών και καθορίζουν τις οριζόντιες και κάθετες μετατοπίσεις — την απόσταση που εκτείνεται η σκιά κάτω από το κείμενο (οριζόντια) και στα δεξιά του κειμένου (κάθετη).

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

• Χρώμα: Η τέταρτη τιμή καθορίζει το χρώμα της σκιάς και μπορεί να οριστεί χρησιμοποιώντας έναν δεκαεξαδικό χρωματικό κωδικό ή έναν κωδικό χρώματος RGBa.

Μπορείτε να προσθέσετε μια σκιά κειμένου χρησιμοποιώντας το παράθυρο Ιδιότητες στο κάτω μέρος του πλαισίου Στυλ CSS, όπως φαίνεται στην εικόνα. Για να το κάνετε αυτό, ακολουθήστε τα εξής βήματα:

Κάντε κλικ στον σύνδεσμο Προσθήκη ιδιότητας στην αριστερή πλευρά του παραθύρου Ιδιότητα στυλ CSS.

Εισαγάγετε το όνομα του κανόνα στυλ CSS3, τη σκιά κειμένου ή επιλέξτε τον κανόνα στυλ από την αναπτυσσόμενη λίστα.

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

Κάντε κλικ για να επιλέξετε το βέλος στα δεξιά της σκιάς κειμένου.

Εμφανίζεται ένα πλαίσιο.

Εισαγάγετε τις μετατοπίσεις X και Y, την ακτίνα θαμπώματος και το χρώμα.