Hi! Welcome...

Premium Blogger Template
FREE Premium Blogger Templates
Μοναδικά Free Blogger πρότυπα για το blog σας
Slimbox 2.02 με jquery-1.3.2 στο Bloggspot .
Πώς να εγκαταστήσετε SlimBox σε Blogger
ΙmgBox
Για να παρουσιάσετε τις εικόνες σας με στυλ !!!
31 καλυτέρα Blogger Widgets και addon
Κατάλογος συνδέσμων όπου μπορείτε να ανακαλύψετε περισσότερα widgets για το blog σας.
1 2 3 4 5

Δευτέρα, Ιουνίου 21

7

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


CSS3 border radius
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

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

7:

ΓΙΑΝΝΗΣΒΕΡ είπε...

Αγαπητή Σοφία,
Χάθηκα. Επειδή δεν είμαι και ειδικός και τα θέλω...όλα έτοιμα, δεν καταλαβαίνω  ποιον κώδικα πρέπει να επικολλήσω στο χώρο της ανάρτησης για να γίνει η φωτογραφία όπως είναι αυτή με την ξαπλώστρα και ποιον για το πλαίσιο το τελευταίο.
Όποτε μπορείς, μου δίνεις τα φώτα σου!
Ευχαριστώ

bloggertrics είπε...

Καλησπερα Γιάννη

Απλα αντιγράφεις τον κώδικα έτσι όπως είναι , αλλάζεις μόνο το URL της φωτογραφίας και το κολλάς στην ανάρτησή σου .
Θα πατήσεις στο post editor σου την Επεξεργασία HTML και εκεί θα κολλήσεις τον κώδικα κλεισμένο σε <style> ο κωδικας </style> και από κάτω του το
<div>
</div>



Τώρα για το πλαίσιο ο κώδικας είναι γραμμένος στην ανάρτηση .Αντιγράφεις τον κώδικα και τον κολλάς σε όποιο στοιχείο θέλεις να έχει αυτό το πλαίσιο

ΓΙΑΝΝΗΣΒΕΡ είπε...

Ευχαριστώ πολύ!

post2.soo είπε...

Το search box στο blo μου το είδες?
Χάρη στο συγκεκριμένο post το έφτιαξα έτσι!
Σοφάκι φορ έβερ χαχαχα

bloggertrics είπε...

Το είδα ναι  :-D   και μου αρέσει πολύ έτσι όπως το έφτιαξες όλο το πρότυπο !!!

Εγω σου το είπα, είσαι πολυτάλαντο κοριτσάκι  :* :-D  Α , μου άρεσε πολύ  και το μενού που έβαλες  , είναι πολύ ωραίο !
Βασικά χαίρομαι πολύ που χρησιμεύουν αυτές οι πληροφορίες !

post2.soo είπε...

Ξεστραβώθηκα ρε Σοφάκι μέχρι να το τελειώσω. Νόμιζα πως θα πεθάνω στην καρέκλα, χαχα
Μου αρέσει πολύ η ιντερνετική "διακόσμηση" και όλα τα έμαθα μόνη μου. Ασχολούμαι εντελώς ερασιτεχνικά αλλά μου αρέσει! Μόλις όμως ανακάλυψα το μπλογκ σου λέω εδώ είμαστε. Άλλο να ψάχνεις σαν μαλάκας στο νετ για κάτι που δεν σου πήγε καλά και άλλο να σου τα προσφέρουν απλόχερα χαχα. Είμαι και τεμπέλα, άσε που όταν κάτι δεν πάει καλά, κατεβάζω ότι βρισίδι υπάρχει γκρρρ
Μουατς >:o :-P :*

bloggertrics είπε...

Ωχ , το κοριτσάκι μου =-O >:o φαντάζομαι πως έβριζες χαχαχα ...
Άλλα αξίζει η κούραση ομως γιατι τα αποτελέσματα που είχες ειναι σούπερ !
thanks και για τα καλά σου λόγια κοριτσάκι μου , σημαίνουν πολλά για μένα :*

Φιλάκια πολλά

 

© 2010 Bloggertrics

WordPress Theme by: WooThemes. | Converted into Blogger Templates by : Bloggertrics

ΑΡΧΙΚΗ| Sitemap| Posts RSS