To css3 property box-shadow μας επιτρέπει να δημιουργήσουμε σκιές χωρίς χρήση εικόνας η javascript σε επιλεγμένο elements.
Αν λοιπόν θέλουμε διάφορα elements της σελίδας μας να έχουν σκιές , αλλά ταυτόχρονα δεν θέλουμε να φορτώσετε τα site μας με επιπλέον γραφικά, περίπλοκους styling κανόνες και markup. Με την έλευση του CSS3 η λύση είναι πολύ απλή και λειτουργική και ονομάζεται box-shadow.
Απλά θα επιλέξουμε κάποιο element το οποίο θέλουμε να έχει σκιά και η rendering μηχανή του εκάστοτε browser αναλαμβάνει όλη την βρώμικη δουλειά !
Χάρη στις διαφορετικές τιμές από το box-shadow , μπορούμε να διευκρινίσουμε αν η σκιά είναι τοποθετημένη στα αριστερά / δεξιά ή πάνω / κάτω στην εξωτερική πλευρά του στοιχείου, το gradient of blur και το χρώμα του.
Αυτή η CSS3 ιδιότητα μπορεί να συνδυαστεί πολύ όμορφα με άλλες ιδιότητες, όπως css3 border-radius
Η δομή για το box shadow property μπορεί να είναι : x-offset, y-offset, blur, και color .
Το box-shadow χρειάζεται τουλάχιστον 3 τιμές η 4 κατ 'ανώτατο όριο:
- Η οριζόντια αντιστάθμιση της σκιάς
Παράδειγμα : box-shadow: 20px 10px 20px gray;
box-shadow: -20px 10px 20px gray;
- Η κάθετη μετατόπιση της σκιάς
Παράδειγμα : box-shadow:20px 10px 20pχ gray;
box-shadow:20px -10px 20px gray;
box-shadow:20px 10px 20px black; - Το χρώμα της σκιάς (shadow’s color)
#000000
;box-shadow:20px 10px 20px rgb(0,0,0);
- Το blur radius (θολούρα ακτίνας )
Παράδειγμα : box-shadow:20px 10px 20px black;
box-shadow:20px 10px 10px black;
box-shadow:20px 10px 0px black;
Σημείωση : υπάρχουν άλλες 2 τιμές διαθέσιμες για το css3 box-shadow , που όμως στην πραγματικότητα δεν στηρίζονται σε κανένα προγράμματα περιήγησης:
- Η τιμή ’spread radius’ για να προσθέσετε σκιά σε όλες τις κατευθύνσεις του στοιχείου
- Η τιμή ‘inset’ για να προσθέσουμε μια εσωτερική σκιά αντί για μία εξωτερική
Τα προθέματα:
Το IE 8 υποστηρίζει Box shadow, χρησιμοποιώντας το φίλτρο :
Και για τα IE 5 - IE 7
Όμως εκτός από το ότι , το prefix είναι τεράστιο, δίνει τόσο άσχημα και περίεργα αποτελέσματα που προτιμω να μην τα χρησιμοποιησω
Δεν υποστηρίζει βέβαια , όλες τις δυνατότητες ,τις οποίες θα δούμε παρακάτω .
Καλό θα ήταν να επισκεφτείτε το MSDN Library για να το κατανοήσετε καλύτερα .
Αλλά ας δούμε με μερικά παραδείγματα καλύτερα .
Παραδείγματα Box shadow
Ο πιο βασικός τρόπος καθορισμού σκιάς σε ένα στοιχείο χρησιμοποιεί
Και το αποτέλεσμά μας είναι :
Το κουτί μας έχει σκιά !
Και αυτό είναι το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :
Παράδειγμα :
CSS κώδικας :
Και το αποτέλεσμά μας είναι :
Box-shadow με blur radius!
Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :
CSS κώδικας :
Και το αποτέλεσμά μας είναι :
Box-shadow με spread radius!
Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :
CSS κώδικας :
Και το αποτέλεσμά μας είναι :
Box-shadow με αρνητική τιμή!
Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :
CSS κώδικας :
Και το αποτέλεσμά μας είναι :
Box-shadow με Negative spread τιμή !
Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :
CSS κώδικας :
Και το αποτέλεσμα μας είναι :
Box-shadow με πολλαπλά box shadows!
Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :
Η χρήση του
Δεν έχουμε πάρα να προσθέσουμε το
Παράδειγμα :
CSS κώδικας :
Και το αποτέλεσμα μας είναι :
Box με inset box shadow!
Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :
CSS κώδικας :
Και το αποτέλεσμα μας είναι :
Box με Inset και outset shadows !
Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :
Τώρα, η χρησιμότητα των multiple shadow layers γίνεται πραγματικά εμφανής όπως βλέπετε.
Μπορείτε να χρησιμοποιήσετε inset box shadows για να δημιουργήσετε gradients, highlights, 3D borders κλπ., καθώς μπορούμε ελεύθερα να κολλήσουμε το ένα πάνω στο άλλο. Είναι ακριβώς όπως χρησιμοποιούμε έναν απεριόριστο αριθμό των “inner shadow” layer styles σε Photoshop!
Μπορούμε να συνδυάσουμε πολλές ιδιότητες μαζί , όπως έχω κάνει σε αυτό το παράδειγμα ,
όπου έχουμε συνδυάσει Box-shadow με border-radius
Και το αποτέλεσμα μας είναι :
Γεια σας , είμαι ένα όμορφο κουτί με σκίαση και στρογγυλεμένες γωνίες .
Καταπληκτικό έτσι ?!!
Και φυσικά αυτή η CSS3 εντολή μπορεί να εφαρμοστεί σε όποιο στοιχείο στα styles μας θέλουμε πολύ απλά.
Αν παρατηρήσετε ,αυτή την τεχνική χρησιμοποιώ κ'εγώ στις φωτογραφίες στις αναρτήσεις μου .
Οι ημέρες του ακατάστατων και περίπλοκων CSS hacks για να δημιουργήσει σκιές έχουν περάσει στο παρελθόν ευτυχώς !
Δείτε ένα παράδειγμα χρήσης του
Ας πούμε , ότι θέλουμε να εφαρμόσουμε την ιδιότητα
Αυτό που πρέπει να κάνουμε είναι , να βρούμε τον CSS κώδικα που καθορίζει το στυλ των φωτογραφιών στις αναρτήσεις του blog μας .
Ο κώδικας αυτός μπορεί να είναι κάτι σαν αυτό :
Τωρα , για να δημιουργησουμε σκιαση γυρο απο τις φωτογραφιες μας ,αυτο που πρεπει να κανουμε ειναι να επικολλησουμε τΙς CSS3 ιδιοτητες που δημιουργουν σκιες ,σε αυτον τον κωδικα .
Και ο κωδικας μς θα γινει :
Και το αποτέλεσμα μας θα μοιάζει με αυτό :
Θα ακολουθήσουν ακόμη πιο ενδιαφέροντα άρθρα , όπου θα δούμε και να μάθουμε περισσότερα για το CSS3 .
Έτσι στο επόμενο άρθρο , θα ασχοληθούμε με το πως δημιουργούμε Σκιά στα επιλεγμένα μας κείμενα - Τext shadow
Μέχρι τότε υπομονή : )
Τα προθέματα:
-moz
( -moz-box-shadow
) δουλεύει σε FireFox.-webkit
( -webkit-box-shadow
) δουλεύει σε Safari & Google Chrome. -khtml
( -khtml-box-shadow
) δουλεύει σε Konquerorborder-
( box-shadow
) δουλεύει σε Opera & IE9 PreviewΤο IE 8 υποστηρίζει Box shadow, χρησιμοποιώντας το φίλτρο :
-ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(color=DarkGray, offX=5, offY=5, positive=true)"; /* >= IE8 */
Και για τα IE 5 - IE 7
filter : progid:DXImageTransform.Microsoft.dropShadow(color=DarkGray, offX=5, offY=5, positive=true); /* <= IE7 */
Όμως εκτός από το ότι , το prefix είναι τεράστιο, δίνει τόσο άσχημα και περίεργα αποτελέσματα που προτιμω να μην τα χρησιμοποιησω
Δεν υποστηρίζει βέβαια , όλες τις δυνατότητες ,τις οποίες θα δούμε παρακάτω .
Καλό θα ήταν να επισκεφτείτε το MSDN Library για να το κατανοήσετε καλύτερα .
Αλλά ας δούμε με μερικά παραδείγματα καλύτερα .
Παραδείγματα Box shadow
Ο πιο βασικός τρόπος καθορισμού σκιάς σε ένα στοιχείο χρησιμοποιεί
box-shadow: [x offset] [y offset] [color]
:
box-shadow:10px 10px #000;
-webkit-box-shadow:10px 10px #000;
-moz-box-shadow: 10px 10px #000;
-goog-ms-box-shadow: 10px 10px #000;
-khtml-box-shadow: 10px 10px #000;
Και το αποτέλεσμά μας είναι :
Το κουτί μας έχει σκιά !
Και αυτό είναι το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :
- Προσθέτοντας άλλη μια τιμή , τότε μας επιτρέπει να καθορίσουμε το blur radius .
Παράδειγμα :
box-shadow: 10px 10px 20px black;
CSS κώδικας :
box-shadow:10px 10px 20px #000;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow: 10px 10px 20px #000;
-goog-ms-box-shadow: 10px 10px 20px #000;
-khtml-box-shadow: 10px 10px 20px #000;
Και το αποτέλεσμά μας είναι :
Box-shadow με blur radius!
Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :
- Μπορούμε επίσης να ορίσουμε ακόμη και μια τιμή spread radius (αυτή η τιμή έχει την ιδιότητα να επεκτείνει την σκιά):
box-shadow: 0 0 8px 5px #000;
CSS κώδικας :
box-shadow: 0 0 8px 8px #000;
-webkit-box-shadow: 0 0 8px 8px #000;
-moz-box-shadow: 0 0 8px 8px #000;
-goog-ms-box-shadow: 0 0 8px 8px #000;
-khtml-box-shadow: 0 0 8px 8px #000;
Και το αποτέλεσμά μας είναι :
Box-shadow με spread radius!
Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :
- Αρνητικές τιμές εξάπλωσης σκιάς είναι δυνατόν επίσης να εφαρμοστούν :
box-shadow:-8px -8px 5px #000;
CSS κώδικας :
box-shadow:-8px -8px 5px #000;
-webkit-box-shadow:-8px -8px 5px #000;
-moz-box-shadow: -8px -8px 5px #000;
-goog-ms-box-shadow: -8px -8px 5px #000;
-khtml-box-shadow: -8px -8px 5px #000;
Και το αποτέλεσμά μας είναι :
Box-shadow με αρνητική τιμή!
Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :
- Η μπορούμε να εφαρμόσουμε μια Negative spread τιμή
box-shadow: 0 8px 8px -3px #000;
CSS κώδικας :
box-shadow: 0 8px 8px -3px #000;
-webkit-box-shadow: 0 8px 8px -3px #000;
-moz-box-shadow: 0 8px 8px -3px #000;
-goog-ms-box-shadow:0 8px 8px -3px #000;
-khtml-box-shadow: 0 8px 8px -3px #000;
Και το αποτέλεσμά μας είναι :
Box-shadow με Negative spread τιμή !
Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :
- Ένα άλλο ενδιαφέρον χαρακτηριστικό είναι η δυνατότητα να ορίσουμε πολλαπλά box shadows, που χωρίζονται με κόμμα, ξεκινώντας από τη βασική σκιά:
box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;
. CSS κώδικας :
box-shadow:0 0 20px black,20px 15px 30px yellow,-20px 15px 30px lime,
-20px -15px 30px blue,20px -15px 30px red;
-webkit-box-shadow: 0 0 20px black,20px 15px 30px yellow,-20px 15px 30px lime,
-20px -15px 30px blue,20px -15px 30px red;
-moz-box-shadow: 0 0 20px black,20px 15px 30px yellow,-20px 15px 30px lime,
-20px -15px 30px blue,20px -15px 30px red;
-goog-ms-box-shadow: 0 0 20px black,20px 15px 30px yellow,-20px 15px 30px lime,
-20px -15px 30px blue,20px -15px 30px red;
-khtml-box-shadow: 0 0 20px black,20px 15px 30px yellow,-20px 15px 30px lime,
-20px -15px 30px blue,20px -15px 30px red;
Και το αποτέλεσμα μας είναι :
Box-shadow με πολλαπλά box shadows!
Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :
Inset Box Shadows
Η χρήση του
inset box shadows
είναι πολύ εύκολη υπόθεση .Δεν έχουμε πάρα να προσθέσουμε το
inset
κλειδί στο box shadow layer. Παράδειγμα :
box-shadow: inset 3px 2px 5px grey;
CSS κώδικας :
box-shadow: inset 3px 2px 5px grey;
-webkit-box-shadow: inset 3px 2px 5px grey;
-moz-box-shadow:inset 3px 2px 5px grey;
-goog-ms-box-shadow: inset 3px 2px 5px grey;
-khtml-box-shadow: inset 3px 2px 5px grey;
Και το αποτέλεσμα μας είναι :
Box με inset box shadow!
- Η μπορούμε να χρησιμοποιήσου με συνδυασμούς Inset και outset shadows μαζί .
box-shadow: inset 2px 2px 5px black, 2px 2px 5px black;
CSS κώδικας :
box-shadow:inset 2px 2px 5px black, 2px 2px 5px grey;
-webkit-box-shadow:inset 2px 2px 5px black, 2px 2px 5px grey;
-moz-box-shadow:inset 2px 2px 5px black, 2px 2px 5px grey;
-goog-ms-box-shadow: inset 2px 2px 5px black, 2px 2px 5px grey;
-khtml-box-shadow: inset 2px 2px 5px black, 2px 2px 5px grey;
Και το αποτέλεσμα μας είναι :
Box με Inset και outset shadows !
Τώρα, η χρησιμότητα των multiple shadow layers γίνεται πραγματικά εμφανής όπως βλέπετε.
Μπορείτε να χρησιμοποιήσετε inset box shadows για να δημιουργήσετε gradients, highlights, 3D borders κλπ., καθώς μπορούμε ελεύθερα να κολλήσουμε το ένα πάνω στο άλλο. Είναι ακριβώς όπως χρησιμοποιούμε έναν απεριόριστο αριθμό των “inner shadow” layer styles σε Photoshop!
Box-shadow συνδιασμος με border-radius :
Μπορούμε να συνδυάσουμε πολλές ιδιότητες μαζί , όπως έχω κάνει σε αυτό το παράδειγμα ,
όπου έχουμε συνδυάσει Box-shadow με border-radius
background-color: magenta;
-webkit-box-shadow: 10px 10px 5px #888;
-moz-box-shadow:10px 10px 5px #888;
box-shadow:10px 10px 5px #888;
-khtml-box-shadow:10px 10px 5px #888;
-goog-ms-box-shadow:10px 10px 5px #888;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
Και το αποτέλεσμα μας είναι :
Γεια σας , είμαι ένα όμορφο κουτί με σκίαση και στρογγυλεμένες γωνίες .
Δημιουργήθηκα αποκλειστικά με CSS3 .
Δεν είναι φοβερό ?!
Δεν είναι φοβερό ?!
Καταπληκτικό έτσι ?!!
Και φυσικά αυτή η CSS3 εντολή μπορεί να εφαρμοστεί σε όποιο στοιχείο στα styles μας θέλουμε πολύ απλά.
Αν παρατηρήσετε ,αυτή την τεχνική χρησιμοποιώ κ'εγώ στις φωτογραφίες στις αναρτήσεις μου .
Οι ημέρες του ακατάστατων και περίπλοκων CSS hacks για να δημιουργήσει σκιές έχουν περάσει στο παρελθόν ευτυχώς !
Δείτε ένα παράδειγμα χρήσης του
Box shadow
στο HTML Κώδικα του προτύπου μας :Ας πούμε , ότι θέλουμε να εφαρμόσουμε την ιδιότητα
Box shadow
στις φωτογραφίες στο blog μας.Αυτό που πρέπει να κάνουμε είναι , να βρούμε τον CSS κώδικα που καθορίζει το στυλ των φωτογραφιών στις αναρτήσεις του blog μας .
Ο κώδικας αυτός μπορεί να είναι κάτι σαν αυτό :
.post img {
padding:4px;
border:1px solid $bordercolor;
}
Τωρα , για να δημιουργησουμε σκιαση γυρο απο τις φωτογραφιες μας ,αυτο που πρεπει να κανουμε ειναι να επικολλησουμε τΙς CSS3 ιδιοτητες που δημιουργουν σκιες ,σε αυτον τον κωδικα .
Και ο κωδικας μς θα γινει :
.post-body img {
padding:4px;
border:1px solid $bordercolor;
-webkit-box-shadow: 1px 1px 5px #888;
-moz-box-shadow:1px 1px 5px #888;
box-shadow:1px 1px 5px #888;
-khtml-box-shadow:1px 1px 5px #888;
-goog-ms-box-shadow:1px 1px 5px #888;
}
Και το αποτέλεσμα μας θα μοιάζει με αυτό :
Μείνετε συντονισμένοι
Θα ακολουθήσουν ακόμη πιο ενδιαφέροντα άρθρα , όπου θα δούμε και να μάθουμε περισσότερα για το CSS3 .
Έτσι στο επόμενο άρθρο , θα ασχοληθούμε με το πως δημιουργούμε Σκιά στα επιλεγμένα μας κείμενα - Τext shadow
Μέχρι τότε υπομονή : )
Ααααα ωραία!
Γαμώτητ, πόσο βαριέμαι να μαθαίνω καινούριους κώδικες γκρρρ. Πάλι καλά που μας τα δίνεις εσύ έτοιμα χιχι
Μουατς, είσαι καλύτερα ή ακόμα αρρωστούλικο?
Καλησπερα Μάρα μου :*
Καλύτερα είμαι αλλά μου έμεινε για αναμνηστικό μια ωραιότατη ψύξη αουτς ....
Να φανταστείς σαν ρομπότακι περπατάω . χα χα
Πολλά ματς μουτς
Ωχ να προσέχεις χαζούλα. Βάλε καμιά κομπρέσα ή ζεστή θερμοφόρα να ανακουφιστείς.
Είδες τι καλή που είμαι? Ε, ε? Πες λολ
:*
Είσαι πολυυυυυυ πολυυυυυυ καλή κοριτσάκι μου :-P :* :-D
Έκανα τα μπανακια μου , λιάστηκα στον ήλιο και όλα μου πέρασαν μουχαχα λολ O:-)