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

Anastasis · November 10, 2016

Σε αυτό εδώ το 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)

Sign In

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

Recommended Posts

Anastasis 48

Share this post

Link to post

Share on other sites

Join the conversation

Browse

Activity