Πρόσφατα το NETTUTS+ δημοσίευσε ένα ενδιαφέρον CSS Tip το οποίο αξίζει να αναφέρουμε στο Web Design Blog. Το Tip αυτό ονομάζεται Pure CSS Reflections και σας δίνει τη δυνατότητα να εισάγετε μια αντανάκλαση κάτω από τις εικόνες ή την εικόνα που επιθυμείτε στη σελίδα σας με CSS κώδικα μόνο, χωρίς την ανάγκη κάποιου προγράμματος επεξεργασίας εικόνας, όπως το Photoshop. Το συγκεκριμένο CSS tip δουλεύει μόνο σε Webkit supported browsers, δηλαδή τον Safari, Chrome, iPhone & iPad Safari και όλα τα προγράμματα πλοήγησης που υπάρχουν σε αυτή την λίστα.

Ο κώδικας CSS που απαιτείται για αυτή την ενέργεια είναι μικρός:

img {

-webkit-box-reflect: below 4px
-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));

}

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

Ανάλυση του CSS

-webkit-box-reflect: below 4px

Με αυτή την εντολή λέμε στον webkit browser να δημιουργήσει μια αντανάκλαση του γραφικού μας. Η θέση της αντανάκλασης αυτής, θα είναι 4px κάτω από το γραφικό.

-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));

Για να ελαττώσουμε τον χώρο στον οποίο εξαπλώνεται η αντανάκλαση, χρησιμοποιούμε την εντολή -webkit-gradient η οποία ουσιαστικά χρωματίζει με degrade ένα χώρο. Η σύνταξη του παραπάνω κώδικα καθοδηγεί το degrade που θέλουμε να φτιαχτεί, ορίζοντάς το σαν linear degrade, με κατεύθυνση από πάνω αριστερά προς τα κάτω αριστερά (δηλαδή ευθεία κάτω). Το χρώμα του θα αρχίζει αντίστοιχα από διάφανο και θα καταλήγει σε άσπρο που είναι και το χρώμα της σελίδας του παραδείγματος. Ουσιαστικά αυτή η εντολή λειτουργεί σαν μια μάσκα. Ο αριθμός 7 δηλώνει το ποσοστό της εικόνας που θέλουμε να φαίνεται στο degrade. Στην προκειμένη περίπτωση είναι 70%.