Συνεχίζοντας την ενότητα μας , στο δεύτερο μέρος της σειράς μας για 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 PreviewBorder 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
Μέχρι τότε πειραματιστείτε και που ξερετε , ισως να δημιουργήσετε όμορφα πράγματα
Αγαπητή Σοφία,
Χάθηκα. Επειδή δεν είμαι και ειδικός και τα θέλω...όλα έτοιμα, δεν καταλαβαίνω ποιον κώδικα πρέπει να επικολλήσω στο χώρο της ανάρτησης για να γίνει η φωτογραφία όπως είναι αυτή με την ξαπλώστρα και ποιον για το πλαίσιο το τελευταίο.
Όποτε μπορείς, μου δίνεις τα φώτα σου!
Ευχαριστώ
Καλησπερα Γιάννη
Απλα αντιγράφεις τον κώδικα έτσι όπως είναι , αλλάζεις μόνο το URL της φωτογραφίας και το κολλάς στην ανάρτησή σου .
Θα πατήσεις στο post editor σου την Επεξεργασία HTML και εκεί θα κολλήσεις τον κώδικα κλεισμένο σε <style> ο κωδικας </style> και από κάτω του το
<div>
</div>
Τώρα για το πλαίσιο ο κώδικας είναι γραμμένος στην ανάρτηση .Αντιγράφεις τον κώδικα και τον κολλάς σε όποιο στοιχείο θέλεις να έχει αυτό το πλαίσιο
Ευχαριστώ πολύ!
Το search box στο blo μου το είδες?
Χάρη στο συγκεκριμένο post το έφτιαξα έτσι!
Σοφάκι φορ έβερ χαχαχα
Το είδα ναι :-D και μου αρέσει πολύ έτσι όπως το έφτιαξες όλο το πρότυπο !!!
Εγω σου το είπα, είσαι πολυτάλαντο κοριτσάκι :* :-D Α , μου άρεσε πολύ και το μενού που έβαλες , είναι πολύ ωραίο !
Βασικά χαίρομαι πολύ που χρησιμεύουν αυτές οι πληροφορίες !
Ξεστραβώθηκα ρε Σοφάκι μέχρι να το τελειώσω. Νόμιζα πως θα πεθάνω στην καρέκλα, χαχα
Μου αρέσει πολύ η ιντερνετική "διακόσμηση" και όλα τα έμαθα μόνη μου. Ασχολούμαι εντελώς ερασιτεχνικά αλλά μου αρέσει! Μόλις όμως ανακάλυψα το μπλογκ σου λέω εδώ είμαστε. Άλλο να ψάχνεις σαν μαλάκας στο νετ για κάτι που δεν σου πήγε καλά και άλλο να σου τα προσφέρουν απλόχερα χαχα. Είμαι και τεμπέλα, άσε που όταν κάτι δεν πάει καλά, κατεβάζω ότι βρισίδι υπάρχει γκρρρ
Μουατς >:o :-P :*
Ωχ , το κοριτσάκι μου =-O >:o φαντάζομαι πως έβριζες χαχαχα ...
Άλλα αξίζει η κούραση ομως γιατι τα αποτελέσματα που είχες ειναι σούπερ !
thanks και για τα καλά σου λόγια κοριτσάκι μου , σημαίνουν πολλά για μένα :*
Φιλάκια πολλά