Style Sheets ?st??
S?µß????? & ???pa CSS

(??t? ? se??da ???s?µ?p??e? CSS style sheets)

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

Στρογγυλεμένα και σκιασμένα

Πέντε εικόνες

Αποτέλεσμα

Στρογγυλεμένες γωνίες και σκιασμένα πλαίσια

Το CSS3 θα έχει τις ιδιότητες να φτιάχνει καμπυλωτά περιγράμματα, περιγράμματα που θα αποτελούνται από εικόνες και πλαίσια με σκιές, που με λίγη δουλειά μπορείτε να αναπαράγετε μερικά απ’ αυτά ήδη με το CSS2 — και χωρίς καθόλου πίνακες ή παραπάνω mark-up.

Αυτή η σελίδα εμπνεύστηκε από μία άλλη που δημιουργήθηκε από την Arve Bersvendsen Έχει πολλές περισσότερες ενδιαφέρουσες CSS επιδείξεις

Φυσικά, καμπυλωτά περιθώρια και σκιές θα είναι πιο απλά με CSS3. Για παράδειγμα, για να δώσουμε μια παράγραφο ένα παχύ κόκκινο περιθώριο με καμπυλωτές γωνίες, θα χρειαστείτε μόνο δύο γραμμές στο CSS3 κάπως έτσι:

P { border: solid thick red;
    border-radius: 1em }

Και για να προσθέσουμε μια θολή στάλα σκιάς από μισό em κάτω & στα δεξιά της παραγράφου, μια γραμμή θα είναι αρκετή:

P { box-shadow: black 0.5em 0.5em 0.3em }

(Μπορείτε να δοκιμάσετε εδώ αν δουλεύει ήδη.) Αν τα χρειάζεστε όμως τώρα και δεν σας πειράζει η πολυπλοκότητα και η έλλειψη προσαρμοστικότητας, μπορείτε να χρησιμοποιήσετε την παρακάτω τεχνική. Τουλάχιστον θα είναι ένα καλό τεστ για κακοφτιαγμένους πλοηγούς …

Πέντε εικόνες σ’ ένα στοιχείο

Το κόλπο είναι η χρήση δημιουργημένου περιεχόμενου ('::before' και '::after') για να μπουν τέσσερεις επιπλέον εικόνες στο στοιχείο. Το ψευτο-στοιχείο '::before' μπορεί να έχει μια εικόνα για φόντο και για προσκήνιο, το ψευτο-στοιχείο '::after' επίσης, και το στοιχείο το ίδιο μπορεί να έχει φόντο, σ’ ένα σύνολο πέντε εικόνων.

Φτιάχνουμε 5 εικόνες PNG και τις βάζουμε στις τέσσερεις γωνίες και πίσω από την δεξιά γωνία του στοιχείου. Εδώ είναι οι εικόνες:

Πάνω αριστερή γωνία:
top left corner
Πάνω πλευρά και πάνω δεξιά γωνία:
top right corner
Στο μέσο και δεξιά πλευρά:
background and right edge
Κάτω αριστερή γωνία:
bottom left corner
Κάτω πλευρά και κάτω δεξιά γωνία:
bottom and bottom left corner

Και εδώ είναι οι CSS κανόνες για να τους τοποθετήσουν:

blockquote {
    max-width: 620px;
    background: url(rs-right.png) right repeat-y }
blockquote::before {
    display: block;
    line-height: 0;
    background: url(rs-topright.png) top right no-repeat;
    content: url(rs-topleft.png) }
blockquote::after {
    display: block;
    line-height: 0;
    background: url(rs-bottomright.png) bottom right no-repeat;
    content: url(rs-bottomleft.png) }

Μια που η εικόνα του φόντου μας είναι 620px πλατιά, εμείς δεν μπορούμε να επιτρέψουμε τετράγωνα μεγαλύτερα από 620px, χωρίς να δημιουργηθούν κενά. Γιαυτό η ιδιότητα 'max-width' είναι εκεί. Η ιδιότητα 'display: block' χρειάζεται για να διασφαλίσει ότι το δημιουγημένο περιεχόμενο φτιάχνει δικά του πλαίσια πάνω και κάτω από το κύριο περιεχόμενο, αντί να εισαχθεί στην πρώτη και τελευταία γραμμή. Το 'line-height: 0' διασφαλίζει ότι δεν υπάρχει καθόλου χώρος ανοικτός για άνω και κάτω κονδυλιές γράμματος πάνω και κάτω από τις εικόνες της ιδιότητας 'content'.

Το αποτέλεσμα

Και εδώ είναι το όπως φαίνεται:

Βλέπετε ένα αχνό πράσινο τετράγωνο με καμπυλωτές γωνίες και μια σκιά που πέφτει πίσω στο άσπρο φόντο; Αν όχι, τότε ο πλοηγός σας δεν μπορεί να χειριστεί το δημιουργούμενο περιεχόμενο σωστά (ή δεν μπορεί καθόλου).

Ο κώδικας HTML δεν είναι τίποτα παραπάνω απ’ αυτό που θα έπρεπε να είναι:

<blockquote>
<p>Βλέπετε ένα αχνό πράσινο τετράγωνο με καμπυλωτές γωνίες και μια σκιά που
πέφτει πίσω στο άσπρο φόντο; Αν όχι, τότε ο πλοηγός σας δεν μπορεί να χειριστεί
το δημιουργούμενο περιεχόμενο σωστά (ή δεν μπορεί καθόλου). </blockquote>

Και αν θέλετε να δοκιμάσετε αν ο πλοηγός σας μπορεί ήδη να το κάνει με τον τρόπο του CSS3, μπορείτε να το δοκιμάστε το εδώ.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
Δημιουργία 6 Jan 2004;
Τελευταία ανανέωση $Date: 2008/01/11 18:26:30 $ GMT