Εισαγωγή στο CSS3 - Μέρος 3ο: Box shadow

CSS3 Box shadow

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 κατ 'ανώτατο όριο:

• Η οριζόντια αντιστάθμιση της σκιάς 

Η τιμή μπορεί να είναι  αρνητική ,η οποία θα μετακινήσει την σκιά πιο αριστερά η μπορεί να είναι θετική η οποία θα μετακινήσει την σκιά πιο δεξιά από το element στο οποίο εφαρμόζουμε τον box shadow κανόνα.
  Παράδειγμα :   box-shadow: 20px 10px 20px gray;
                           box-shadow: -20px 10px 20px gray;

• Η κάθετη μετατόπιση της σκιάς

Και εδώ η τιμή μπορεί να είναι  αρνητική , η οποία  θα μετακινήσει την σκιά πιο πάνω η μπορεί να είναι θετική η οποία  θα μετακινήσει την σκιά πιο κάτω από το element στο οποίο εφαρμόζουμε τον box shadow κανόνα.
Παράδειγμα :   box-shadow:20px 10px 20pχ gray;

                         box-shadow:20px -10px 20px gray;

• Το χρώμα της σκιάς (shadow’s color)

Παράδειγμα : box-shadow:20px 10px 20px #000000;

                       box-shadow:20px 10px 20px black;
                      box-shadow:20px 10px 20px rgb(0,0,0);

• Το  blur radius  (θολούρα ακτίνας ) 

Εάν η τιμή οριστεί σε 0 τότε η σκιά θα είναι απότομη, όσο υψηλότερος είναι ο αριθμός, τόσο πιο θολή θα είναι και η σκιά .
Παράδειγμα : 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’ για να προσθέσουμε  μια εσωτερική σκιά αντί για μία εξωτερική

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

-moz ( -moz-box-shadow) δουλεύει σε  FireFox.
-webkit ( -webkit-box-shadow) δουλεύει σε Safari & Google Chrome.
-khtml ( -khtml-box-shadow) δουλεύει σε Konqueror
border-( 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! 

  Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :

• Η μπορούμε να χρησιμοποιήσου με συνδυασμούς 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 ! 

  Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :

Τώρα, η χρησιμότητα των 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 

Μέχρι τότε υπομονή  : )