Εισαγωγή στο CSS3 - Μέρος 2ο: CSS3 border properties

CSS3 border properties

Συνεχίζοντας την ενότητα μας , στο δεύτερο μέρος της σειράς μας για CSS3, θα ρίξουμε μια ματιά στις άκρες ( borders ).
Όσοι χρησιμοποιούν CSS και είναι εξοικειωμένοι με τα border property ξέρουν ότι είναι ένα πολύ καλός τρόπος για τη δομήση του περιεχομένου, δημιουργίας αποτελεσμάτων γύρω από τις εικόνες και για την βελτίωση διάταξης της σελίδας.

Τώρα CSS3 μεταφέρει τα borders σε ένα νέο επίπεδο με την ικανότητα να χρησιμοποιεί gradients, rounded corners και border images . Θα εξετάσουμε κάθε ένα από αυτά με περισσότερη λεπτομέρεια, χρησιμοποιώντας παραδείγματα όπου είναι δυνατόν.

Στρογγυλεμένες άκρες (rounded corners)

Η επίτευξη στρογγυλοποίησης των ακρων χρησιμοποιώντας την τρέχουσα CSS κωδικοποίηση μπορεί να είναι δύσκολη υπόθεση .
Αν και υπάρχουν αρκετοί τρόποι να το κάνουμε , όπως χρησιμοποιώντας εικόνες για να πετύχουμε την στρογγυλοποίηση των ακρων , άλλη μέθοδος είναι με την χρήση javascript όπως το curvycorners.js ,είτε επισημοποιώντας έτοιμα εργαλεία , που μας επιτρέπουν να δημιουργήσουμε rounded corners , όμως κανένας από αυτούς τους τρόπους δεν είναι εύκολη υπόθεση .

Τώρα όμως με το CSS3 τα πράγματα έχουν γίνει πολύ απλά . Μπορεί να εφαρμοστεί σε κάθε γωνία ή επιμέρους γωνίες , και το πλάτος και το χρώμα μπορουν εύκολα να μεταβάλλονται


Τα προθέματα:

-moz ( -moz-border-radius) δουλεύει σε  FireFox.
-webkit ( -webkit-border-radius) δουλεύει σε Safari & Google Chrome.
-khtml ( -khtml-border-radius) δουλεύει σε Konqueror
border-radius δουλεύει σε Opera and IE9 Preview
 
Έτσι λοιπόν, με το παρακάτω παράδειγμα το div και με "border_radius" θα έχουμε  borders που θα στρογγυλεύουν κατά 12 pixels στις άκρες του!

.border_radius{background-color:#f4f4f4;
-moz-border-radius:12px;/* Gecko */ 
-webkit-border-radius:12px;/* Safari and Chrome */
-khtml-border-radius: 12px;/* for (old) Konqueror */ 
border-radius:12px;/* W3C, Opera and IE9 Preview */ 
border:2px solid # 3a6b8c;
padding:40px;
width:310px;
}

Και το HTML για  το box μας θα είναι :

<div class="my-box"> Είμαι ένα όμορφο rounded box </div>

Είμαι ένα όμορφο rounded box

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας

Rounded Corner CSS3 Boxes

Δεν θέλετε να είναι και οι τέσσερις γωνίες στρόγγυλες ?
Δεν υπάρχει κανένα πρόβλημά ! Χρησιμοποιήστε το radious σε συγκεκριμένες γωνίες μόνο , όπως για παράδειγμα :

.custom_box_radius {
     border-top-right-radius: 20px;
     border-bottom-left-radius: 20px;
    -moz-border-radius-topright: 20px;
     -moz-border-radius-bottomleft: 20px;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    border: 1px solid  #000;
     padding: 45px;
    background-color: #ccc;
   width: 310px;
} 

Το box μας έχει μόνο δυο rounded corners

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας

Και το HTML για το box μας θα είναι :

<div class="custom_box_radius"> Το box μας έχει μόνο δυο rounded corners</div>

Δείτε ένα παράδειγμα για το πως μπορούμε να χρησιμοποιήσουμε την εντολή border_radius για να δημιουργήσουμε ένα απλό αλλά όμορφο Web2 button μόνο με CSS3  .

a.button {
 border: 1px solid  #96d1f8;
 padding: 10px 20px 10px;
 color: #f2f2f2;
 text-decoration: none;
 font-size:19px;
 font-family: Georgia, serif;
 line-height: 30px;
 background: #a2ceeb;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
} 

Και το HTML για το button μας θα είναι :

<a class="button" href="#">I'm a pretty button</a>

Έτσι το αποτέλεσμα μας θα είναι αυτό το όμορφο button .


I'm a pretty button



Και αυτό είναι το screenshot.

Ας δούμε άλλο ένα παράδειγμα με μια φωτογραφία :

.rounded-foto {
width: 250px;
height: 120px;
background: url(http://2.bp.blogspot.com/_L116RpGjEMY/TBerxsatb0I/AAAAAAAAB2s/SZsuBkLEvdQ/s1600/pool.jpg);
-moz-border-radius-topleft: 35px;
-moz-border-radius-bottomright:35px;
-webkit-border-top-left-radius: 35px;
-webkit-border-bottom-right-radius: 35px;
border-radius-topleft: 35px;
radius-bottomright:35px;
border-top-left-radius: 35px;
border-bottom-right-radius: 35px;
}

Και θα έχουμε αυτό το αποτέλεσμα :

Αυτό είναι το screenshot.

Όπου θέλουμε να εμφανιστεί αυτή η φωτογραφία μας απλά θα επικολλήσουμε τον HTML κώδικα:

<div class="rounded-foto">
</div>

Βέβαια, η εντολή border-radius μπορεί να χρησιμοποιηθεί για οτι θελήσουμε εμείς και σε όποιο στοιχείο θέλουμε, είτε για τις εικόνες μας ,είτε για το κύριο τμήμα των αναρτήσεων μας είτε για οτι άλλο μας αρέσει.

Παράδειγμα χρήσης της εντολής border-radius στο style sheet μας :

#container {
width: 900px;
margin: 0 auto;
background-color: #777;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-khtml-border-radius: 12px;
border-radius: 12px;
}

Αρκετά εντυπωσιακό έτσι ?....

Gradient Borders

Gradient borders είναι άλλο ένα πολύ χρήσιμο border property .
Αλλά τι είναι το καινούργιο σε αυτό ? Το νέο στοιχείο είναι ότι, μπορείτε να καθορίσετε πολλές τιμές χρώματων στα borders για το κάθε pixel. Ας πούμε ότι έχουμε borders με πλάτος 6 pixel, τότε μπορούμε να ορίσουμε 6 διαφορετικά χρώματα .

Δυστυχώς σήμερα,μόνο το Firefox υποστηρίζει αυτό το property .
Και χρησιμοποιεί την σύνταξη : -moz-border-top-colors: value;  ,για το top border , πρέπει να κάνετε το ίδιο για το κάτω μέρος , αριστερά και δεξιά .

Η τιμή μπορεί να οριστεί σε pixel. Για παράδειγμα :  -moz-border-left-colors: 10px;

Gradient borders μπορεί να φαίνονται φανταστικά και αποτελεσματικά αν χρησιμοποιηθεί σωστά ο κωδικας .
Αυτός ο κωδικός είναι λίγο πιο περίπλοκος , γιατι απαιτεί να ορίσετε κάθε χρώμα απο τα borders ξεχωριστά .

Όπως θα δείτε το χρώμα των borders αρχίζουν με σκούρο χρώμα και ανοίγουν σταδιακά προς το τέλος.Αυτό το κάνουμε για να δώσουμε στα borders την ψευδαίσθηση οτι χρησιμοποιείται Gradient .


Ο κωδικός CSS είναι:

.content {
width: 400px;
background-color: #f4f4f4;
border: 9px solid #000;
-moz-border-bottom-colors: #5C680C #8A9A24 #ACBA4C #BCCA63 #C7D476 #D7E28B #DAE49B #E7EFB6;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #4F39BD #486DD1 #5F82E2 #7692DF #99ADE4 #ABBCEC #B5C3EB #CBD5F3;
-moz-border-right-colors: #A22452 #BD3969 #E66464 #EF8383 #F09A9A #F5ADAD #F5C0C0 #F3D7D7;
padding: 5px 5px 35px 15px;
}

Box με πολύχρωμα gradient border.

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας












Και άλλο ενα παράδειγμα με gradient border σε συνδυασμό με rounded corners

 #content_radius {
      border: 10px solid #c4c8cc;
      -moz-border-radius: 15px;
      border-radius: 15px;
      -webkit-border-radius: 15px;
      -moz-border-bottom-colors: #303 #404 #606 #808 #909 #A0A;
      -moz-border-top-colors: #303 #404 #606 #808 #909 #A0A;
      -moz-border-left-colors: #303 #404 #606 #808 #909 #A0A;
      -moz-border-right-colors: #303 #404 #606 #808 #909 #A0A;
      padding: 5px 5px 35px 15px;
    }

Box με πολύχρωμα gradient border

Και αυτό είναι το screenshot.

CSS3 Border Image

Border images είναι μια από τις πιο χρήσιμες προσθήκες .
CSS έχει τη δυνατότητα να κάνει  repeat, η stretch στα  Border images , όπως εσείς επιλέξετε.

Με αυτήν τη δυνατότητα μπορείτε να ορίσετε μια εικόνα που θέλετε να χρησιμοποιείσετε αντί για τα κανονικά Borders ενός στοιχείου .

Για να εφαρμόσουμε τα Border images , χρησιμοποιούμε το CSS

border-image: url(border.png) 25 25 25 27 round round;

Τα προθέματα:


-moz ( -moz-border-image) δουλεύει σε  FireFox.
-webkit ( -webkit-border-image) δουλεύει σε Safari & Google Chrome.
-khtml ( -khtml-border-image) δουλεύει σε Konqueror
border-( border-image ) δουλεύει σε Opera & IE9 Preview

Border Image (round)

Θα χρησιμοποιήσουμε την παρακάτω εικόνα για τα border μας .

Χρησιμοποιώντας το border-image round, η εικόνα μας θα πρέπει να επαναληφθεί, κλιμακωτά/ γύρο από το στοιχείο μας.

 CSS κώδικας μας θα μοιάζει :

-moz-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 30 30 30 30 round; border: 15px solid rgb(196, 200, 204); 
-khtml-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 30 30 30 30 round; border: 15px solid rgb(196, 200, 204); 
border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 30 30 30 30 round; border: 15px solid rgb(196, 200, 204); 
-webkit-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 30 30 30 30 round; border: 15px solid rgb(196, 200, 204); 

Και το αποτέλεσμα θα είναι αυτό :

Πρώτα απ'ολα πρέπει να δημιουργήσουμε τα βασικά borders και αυτά θα γεμίσουν αυτόματα απο τα border images που θα χρησιμοποιήσουμε.

Και αυτό είναι το screenshot.

CSS 3 Border Image (stretch)

Ενναλακτικα , χρησιμοποιώντας το border-image stretch, η εικόνα μας θα πρέπει να επεκταθει ,να επαναληφθεί η πλευρά των borders με το μήκος και το ύψος του στρώματος που περιέχει .

-moz-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 40 40 40 40 stretch; border: 15px solid rgb(196, 200, 204); 
-khtml-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 40 40 40 40 stretch; border: 15px solid rgb(196, 200, 204); 
border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 40 40 40 40 stretch; border: 15px solid rgb(196, 200, 204); 
-webkit-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 40 40 40 40 stretch; border: 15px solid rgb(196, 200, 204);

Και θα έχουμε αυτό το αποτέλεσμα :

Πρώτα απ'ολα πρέπει να δημιουργήσουμε τα βασικά borders και αυτά θα γεμίσουν αυτόματα από τα border images που θα χρησιμοποιήσουμε.

Και αυτό είναι το screenshot.








Σε αυτή την περίπτωση απλά αλλάζοντας την τιμή από τα borders (border-top, border-right, border-bottom, border-left) από 40 σε 30  θα έχουμε αυτό το αποτέλεσμα 

-moz-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 30 30 30 30 stretch; border: 15px solid rgb(196, 200, 204); 
border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 30 30 30 30 stretch; border: 15px solid rgb(196, 200, 204);
-khtml-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 30 30 30 30 stretch; border: 15px solid rgb(196, 200, 204);
-webkit-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 30 30 30 30 stretch; border: 15px solid rgb(196, 200, 204);

Πρώτα απ'ολα πρέπει να δημιουργήσουμε τα βασικά borders και αυτά θα γεμίσουν αυτόματα από τα border images που θα χρησιμοποιήσουμε.

Και αυτό είναι το screenshot.










Για να μάθετε περισσότερα και να κατανοήσετε καλύτερα τις border-image ιδιότητες , θα ήταν καλό να επισκεφτείτε την ιστοσελίδα  lrbabe.com , όπου θα δείτε πολλά ενδιαφέροντα παραδείγματα .

Μείνετε συντονισμένοι

Το ξέρω οτι σας άνοιξα την όρεξη να δείτε και να μάθετε περισσότερα για το τι άλλο μπορεί να κάνει για μας το CSS3  , όμως κάντε υπομονή μέχρι το επόμενο άρθρο , όπου θα δούμε πως δημιουργούμε Σκιά γύρο από κάποιο στοιχείο μας  - box shadow

Μέχρι τότε πειραματιστείτε και που ξερετε , ισως να δημιουργήσετε όμορφα πράγματα