Τα βασικά του CSS3

10 Μαρ 2010 | CSS

Δεν επιτρέπονται τα σχόλια.


CSS-TOP

Λοιπόν, εδώ είναι ένα άρθρο για τα βασικά των νέων ιδιοτήτων του CSS3 : text-shadow και border-radius. Αυτές οι ιδιότητες χρησιμοποιούνται συνήθως για να ενισχύσουν την εμφάνιση μιας ιστοσελίδας.

RGBA

Οι τρεις πρώτες τιμές είναι τιμές χρωμάτων για το σύστημα RGB και η τελευταία είναι το επίπεδο της διαφάνειας (0 = διαφανές, 1 = αδιαφανές)

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

Text Shadow

Η τιμές της ιδιότητας text-shadow είναι δομημένες στην ακόλουθη σειρά : x-offset, y-offset, blur και χρώμα.

Ορίστε μια αρνητική τιμή για το x-offset για να ολισθήσει η σκιά στα αριστερά. Ορίστε μια αρνητική τιμή για το y-offset για να ολισθήσει η σκιά προς τα πάνω. Μην ξεχνάτε ότι μπορείτε να χρησιμοποιήσετε τιμές RGBA για το χρώμα της σκιάς.

Μπορείτε επίσης να ορίσετε μια λίστα από text-shadow (χωρισμένες με κόμμα). Το ακόλουθο παράδειγμα χρησιμοποιεί δυο text-shadow δηλώσεις. (1px επάνω και 1px κάτω).

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

Border Radius

Η συντομογραφία του border-radius είναι όμοια με αυτές των padding και margin (πχ border-radius: 20px). Προκειμένου οι περιηγητές να δημιουργήσουν το border-radius, προσθέστε το “-webkit-” για τους webkit περιηγητές και “-moz-” για τον Firefox.

border-radius: 20px;
-webkit-border-radius: 20px;
-mox-border-radius: 20px;

Μπορείτε επίσης να ορίσετε κάθε γωνία με διαφορετική τιμή. Προσέχετε όμως για ο Firefox και οι WebKit έχουν διαφορετικά ονόματα ιδιοτήτων για τις γωνίες.

-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 15px;
-webkit-border-botom-left-radius: 25px;
-webkit-border-bottom-right-radius: 45px;

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomleft: 25px;
-moz-border-radius-bottomright: 45px;

Box Shadow

Η δομή για το box-shadow είναι όμοια με αυτή της ιδιότητας text-shadow : x-offset, y-offset, blur και χρώμα.

Επίσης μπορείτε να ορίσετε περισσότερα από ένα σετ box-shadow. Το παράδειγμα που ακολουθεί είναι μια λίστα από τρεις ορισμούς box-shodow.

-moz-box-shadow: -2px -2px 0 #FFF, 2px 2px 0 #BB9595, 2px 4px 15px rgba(0, 0, 0, .3);

Περισσότερα για τον CorfuGmr

CorfuGmr

Ονομάζομαι Νίκος και ασχολούμαι με το internet και την κατασκευή ιστοσελίδων από το 1998. Σήμερα, μετά από 12 χρόνια γεμάτα με ενημέρωση, εκπαίδευση και εξάσκηση έχω ανεβάσει σε ένα άλλο επίπεδο τις γνώσεις μου και τις τεχνικές μου. Στα άρθρα μου προσπαθώ να σας δείξω τα μικρά, αλλά σημαντικά πράγματα που με έχουν ανεβάσει σε αυτό το επίπεδο.








Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Συγνώμη, τα σχόλια για αυτό το άρθρο είναι κλειστά.



^
Top
css.php