Jump to content
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Sign in to follow this  

Κουτιά (boxes) με στρογγυλεμένες άκρες σε css

Recommended Posts


Σε αυτό εδώ το post θα περιγράψω πως μπορούμε να βάλουμε στην σελίδα μας κουτιά με ότι περιεχόμενο θέλουμε τα οποία θα έχουν στρογγυλεμένες άκρες χρησιμοποιώντας css. Θα χρησιμοποιήσουμε ένα εξωτερικό <div> με 4 "corner" divs μέσα σε αυτό.
Στο html αρχείο μας μέσα στο <body> θα βάλουμε τον παρακάτω κώδικα:


<div class="cornerBox">
    <div class="corner TL"></div>
    <div class="corner TR"></div>
    <div class="corner BL"></div>
    <div class="corner BR"></div>
    <div class="cornerBoxInner">
        <p>Εδώ θα γράψουμε το περιεχόμενο που θα εμφανίζεται μέσα στο κουτί ή θα καλέσουμε κάποια εικόνα που θέλουμε κ.λ.π.</p>

Στη συνέχεια θα βάλουμε τον παρακάτω κώδικα στο css αρχείο μας:


.cornerBox { position: relative; background: #cfcfcf; width: 100%; }
.corner { position: absolute; width: 10px; height: 10px; background: url('corners.gif') no-repeat; font-size: 0%; }
.cornerBoxInner { padding: 10px; }
.TL { top: 0; left: 0; background-position: 0 0; }
.TR { top: 0; right: 0; background-position: -10px 0; }
.BL { bottom: 0; left: 0; background-position: 0 -10px; }
.BR { bottom: 0; right: 0; background-position: -10px -10px; }

Μπορούμε όπως βλέπουμε να ορίσουμε κάποιο χρώμα στο background, να αλλάξουμε τις διαστάσεις κ.λ.π. Στο συγκεκριμένο παράδειγμα χρησιμοποιούμε για background την εικόνα corners.gif την οποία θα επισυνάψω παρακάτω.

Ελπίζω το πρώτο μου μικρό tutorial να φανεί χρήσιμο και να μπει στην λίστα με τα tutorials με css. Παρακαλώ αν νομίζετε ότι χρειάζεται κάποια διόρθωση να μου το πείτε.


Αυτή είναι η εικόνα η οποία χρησιμοποιούμε στο συγκεκριμένο παράδειγμα.
 Filesize:  166 Bytes
 Viewed:  3706 Time(s)


  • Like 1

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this