Dreamweaver CS6: Προσθήκη σκιών κειμένου με CSS3 - ανδρείκελα

Μέρος του Dreamweaver CS6 Για Dummies Sheath Sheet

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

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

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

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

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

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

Οριζόντια και κάθετη:

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

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

  Χρώμα:

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

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

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

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

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

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

   Καταχωρίστε τις μετατοπίσεις X και Y, την ακτίνα θόλωσης και το χρώμα.