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

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

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

Επίδειξη

Πτώση σκιών

Το CSS2 δεν έχει την ιδιότητα να προσθέτει σκιά σ’ ένα τετράγωνο. Μπορείτε να προσθέσετε ένα περίγραμμα στα δεξιά και κάτω, αλλά δεν θα φαίνεται σωστό. Αν όμως έχετε δύο στοιχεία το ένα μέσα στο άλλο, μπορείτε να χρησιμοποιήσετε το εξωτερικό σαν σκιά του εσωτερικού. Για παράδειγμα, αν έχετε κείμενο που μοιάζει με αυτό (HTML):

<div class=back>
  <div class=section>
    <h2>Die Rose duftet - doch ob sie empfindet</h2>
    <address>Heinrich Heine (1797-1856)</address>

    <p>Die Rose duftet - doch ob sie empfindet<br>
    ...
  </div>
</div>

μπορείτε να χρησιμοποιήσετε το εξωτερικό DIV σαν σκιά του εσωτερικού. Το αποτέλεσμα μπορεί να φανεί σαν αυτή την ξέχωρη σελίδα. Πρώτα, δίνετε στο BODY ένα φόντο (ανοικτό πράσινο σ’ αυτό το παράδειγμα), στο εξωτερικό DIV ένα ελαφρώς βαθύτερο φόντο (πρασινό-γκρι) και στο εσωτερικό DIV άλλο φόντο (π.χ., κίτρινο-άσπρο):

body {background: #9db}
div.back {background: #576}
div.section {background: #ffd}

Μετά, με την χρήση περιθωρίων και γέμησης, μπορείτε να μετατοπίσετε το εσωτερικό DIV λίγο προς τ’ αριστερά και προς τα πάνω του εξωτερικού DIV:

div.back {padding: 1.5em}
div.section {margin: -3em 0 0 -3em}

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

div.back {margin: 3em 0 3em 5em}

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

div.section {border: thin solid #999; padding: 1.5em}

Φυσικά, μπορείτε να αλλάξετε το μέγεθος της σκιάς κατά την αρεσκεία σας.

Σκιά κειμένου

Το CSS έχει την ιδιότητα να προσθέτει σκιά στο κείμενο. Έχει τέσσερα στοιχεία που πρέπει να οριστούν: το χρώμα της σκιάς, την οριζόντια μετατόπιση (θετική σημαίνει προς τα δεξιά), την κάθετη μετατόπιση (θετική σημαίνει προς τα κάτω) και την θολότητα (0 σημαίνει οξεία σκιά). Για παράδειγμα:

h3 { text-shadow: red 0.2em 0.3em 0.2em }

Does this text have a shadow?

CSS Valid CSS!Valid HTML 4.0!

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