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

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
ibizakias
Δημοσιεύσεις: 154
Εγγραφή: 23 Απρ 2008 11:34

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

Δημοσίευση από ibizakias » 11 Μαρ 2009 15:23

Σε αυτό εδώ το 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 &#123; position&#58; relative; background&#58; #cfcfcf; width&#58; 100%; &#125;
.corner &#123; position&#58; absolute; width&#58; 10px; height&#58; 10px; background&#58; url&#40;'corners.gif'&#41; no-repeat; font-size&#58; 0%; &#125;
.cornerBoxInner &#123; padding&#58; 10px; &#125;
.TL &#123; top&#58; 0; left&#58; 0; background-position&#58; 0 0; &#125;
.TR &#123; top&#58; 0; right&#58; 0; background-position&#58; -10px 0; &#125;
.BL &#123; bottom&#58; 0; left&#58; 0; background-position&#58; 0 -10px; &#125;
.BR &#123; bottom&#58; 0; right&#58; 0; background-position&#58; -10px -10px; &#125;
Μπορούμε όπως βλέπουμε να ορίσουμε κάποιο χρώμα στο background, να αλλάξουμε τις διαστάσεις κ.λ.π. Στο συγκεκριμένο παράδειγμα χρησιμοποιούμε για background την εικόνα corners.gif την οποία θα επισυνάψω παρακάτω.

Ελπίζω το πρώτο μου μικρό tutorial να φανεί χρήσιμο και να μπει στην λίστα με τα tutorials με css. Παρακαλώ αν νομίζετε ότι χρειάζεται κάποια διόρθωση να μου το πείτε.
Συνημμένα
corners.gif
Αυτή είναι η εικόνα η οποία χρησιμοποιούμε στο συγκεκριμένο παράδειγμα.
corners.gif (166 Ψηφιολέξεις) Προβλήθηκε 4144 φορές

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

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

Δημοσίευση από cherouvim » 11 Μαρ 2009 20:55

Η χρήση ενός transparent gif το οποίο θα κρύβει το css background colour του box ίσως βολεύει καλύτερα.[/code]

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6235
Εγγραφή: 30 Νοέμ 2004 03:09

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

Δημοσίευση από fafos » 11 Μαρ 2009 21:43

cherouvim έγραψε:Η χρήση ενός transparent gif το οποίο θα κρύβει το css background colour του box ίσως βολεύει καλύτερα.
ginete auto? an to image einai transparent den tha fainetai to kyrios bg tou class="cornerBox"?
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

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

Δημοσίευση από cherouvim » 11 Μαρ 2009 21:56

Κύκλος 4 τεταρτημόρια. Το x είναι το background colour του site, και τα spaces είναι το transparency. Με αυτό το τρόπο μπορείς να έχεις πολλά boxes (πάνω στο ίδιο bg colour) τα οποία όμως να έχουν ότι χρώμα θες.

Κώδικας: Επιλογή όλων

xxxxxxxxxxxxxx|xxxxxxxxxxxxxx
xxxx          |          xxxx
xx            |            xx
x             |             x
x             |             x
x             |             x
--------------+--------------
x             |             x
x             |             x
x             |             x
xx            |            xx
xxxx          |          xxxx
xxxxxxxxxxxxxx|xxxxxxxxxxxxxx
Live demo http://temp.cherouvim.com/forums/round-corners/ με αυτή τη τεχνική.

---------- images start
Εικόνα
Εικόνα
---------- images end

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6235
Εγγραφή: 30 Νοέμ 2004 03:09

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

Δημοσίευση από fafos » 11 Μαρ 2009 22:50

ok.. allo enousa ego.. an yparxei kapoios tropos opou me to paradeigma tou ibizakias na xrhsimopoieis ena gif transparent kai na kalyptei to kyrio background tou div gia na fainetai se oti selida thes aneksarthtos background.. kati analogo me auto pou kanoun ta ajaxoeidh round corners..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...


Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6235
Εγγραφή: 30 Νοέμ 2004 03:09

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

Δημοσίευση από fafos » 12 Μαρ 2009 15:42

no.. pali problhma otan to image gia tis gonies einai transparent.. deixnei to border tou div.. den nomizo na yparxei lysh se auto.. aplos feiaxneis diaforetiko image analoga me to background ths selidas..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

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

Δημοσίευση από Basilakis » 12 Μαρ 2009 15:57

Εγώ πάλυ το κάνω χωρίς Image :)

Κώδικας: Επιλογή όλων

<div class="Menu">
   <ul>
   <li><a href="<?php echo get_option&#40;'home'&#41;; ?>/"><span>Home</span></a></li>
   <li><a href="http&#58;//www.jailbait.gr/index.php/category/gallery"><span>Gallery</span></a></li>
   <li><a href="http&#58;//www.jailbait.gr/index.php/category/gallery/videos/"><span>Videos</span></a></li>
   <li><a href="http&#58;//www.jailbait.gr/index.php/about-jailbaitgr/"><span>About</span></a></li>
  </ul> 
</div>

Κώδικας: Επιλογή όλων

/* Menu +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.Menu &#123; width&#58; 470px; padding&#58; 0px 0px 0px 30px; float&#58; left; position&#58; absolute;  top&#58; 100px; &#125;
.Menu em &#123; display&#58; none&#125;
.Menu ul &#123; list-style&#58; none; margin&#58; 0px; padding&#58; 0px;&#125;
.Menu ul li &#123; padding&#58; 0px; margin&#58; 0px; display&#58; inline; font-size&#58; 14px; line-height&#58; 14px; font-weight&#58; bold; font-family&#58; "Trebuchet MS"; &#125;

.Menu ul li a &#123; padding&#58; 0px 0px 0px 9px; float&#58; left;&#125;
.Menu ul li a span &#123; padding&#58; 4px 4px 4px 4px; display&#58; block; float&#58; right;&#125;
.Menu ul li a span &#123; float&#58; none; color&#58; #CCCCCC;&#125;
.Menu ul li a&#58;hover span &#123; color&#58; #513131; background-color&#58;#fbe3ea; padding&#58; 3px 7px;
-moz-border-radius&#58; 3px;&#125;
.Menu ul li a&#58;hover &#123; background-position&#58; 0% -27px; color&#58;#513131; text-decoration&#58; none;&#125;
.Menu ul li a&#58;hover span &#123; background-position&#58; 100% -27px;  color&#58;#513131;&#125;

.Menu ul li ul &#123; display&#58; none;&#125;
με την χρήση του
-moz-border-radius:

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6235
Εγγραφή: 30 Νοέμ 2004 03:09

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

Δημοσίευση από fafos » 12 Μαρ 2009 16:06

auto douleuei mono se firefox..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

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

Δημοσίευση από Basilakis » 12 Μαρ 2009 16:11

οΟ Υπαρχει και άλλος browser και δεν τον πήρα χαμπάρι; :D

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 2 επισκέπτες