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  
Anastasis

Κουτιά (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>
    </div>
</div>



Στη συνέχεια θα βάλουμε τον παρακάτω κώδικα στο 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. Παρακαλώ αν νομίζετε ότι χρειάζεται κάποια διόρθωση να μου το πείτε.


 


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

corners.gif
 

  • 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.

Guest
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  

×