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

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

Το 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 και τις βάζουμε στις τέσσερεις γωνίες και πίσω από την δεξιά γωνία του στοιχείου. Εδώ είναι οι εικόνες:

Πάνω αριστερή γωνία:

Πάνω πλευρά και πάνω δεξιά γωνία:

Στο μέσο και δεξιά πλευρά:

Κάτω αριστερή γωνία:

Κάτω πλευρά και κάτω δεξιά γωνία:

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

blockquote {
    max-width: 620px;
    background: url(style/examples/007/rs-right.png) right repeat-y }
blockquote::before {
    display: block;
    line-height: 0;
    background: url(style/examples/007/rs-topright.png) top right no-repeat;
    content: url(rs-topleft.png) }
blockquote::after {
    display: block;
    line-height: 0;
    background: url(style/examples/007/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, μπορείτε να το δοκιμάστε το εδώ.