Update: Λευκά περιθώρια και drop shadow σε εικόνα μόνο με CSS! (για Firefox & IE)

Το παρόν αποτελεί μια βελτιωμένη έκδοση της τεχνικής που περιγράφηκε εδώ. Μη χαίρεστε, δεν δουλεύει ακόμα σε άλλους browsers. Απλά βελτίωσα λίγο την τεχνική, ώστε το αποτέλεσμα σε αυτούς να είναι πιο όμορφο.

Με την προηγούμενη τεχνική σε άλλους browsers εμφανιζόταν απλά ένα άχρηστο λευκό χοντρό πλαίσιο, το οποίο στο λευκό φόντο της σελίδας έμοιαζε απλά με έξτρα margin. To ψευτο-margin αυτό δε, στον Safari που κατανοεί το “:root” selector είχε …13 πίξελ πλάτος!

Το update της τεχνικής αυτής κάνει την εικόνα να εμφανίζεται με το λευκό πλαίσιο μεν, αλλά με 1px γκρι border σε όσους browsers δεν υποστηρίζουν το :root (όπως η Opera) και με 5px γκρι border σε όσους το υποστηρίζουν (όπως ο Safari), εκτός φυσικά από Firefox & IE στους οποίους εμφανίζει κανονικά τη σκιούλα μας.

Προσπάθησα αρκετά να επεκτείνω την τεχνική για Safari, αλλά μέχρι στιγμής δεν το έχω καταφέρει. Ο λόγος;

Λευκά περιθώρια και drop shadow σε εικόνα μόνο με CSS! (για Firefox & IE)

Πολλές φορές θέλουμε να δώσουμε ένα λευκό χοντρό περιθώριο σε μια εικόνα και μια απαλή γκρι σκιά σε αυτή. Συνήθως καταλήγουμε να το κάνουμε μέσω Photoshop ή με βαριές CVI-javascript λύσεις.

Είχα μια ιδέα τις προάλλες που το χρειάστηκα (και το έκανα μέσω Photoshop τότε) και το blog μου έδωσε ώθηση να την δοκιμάσω σήμερα. Ουσιαστικά στηρίζεται σε χρησιμοποίηση κάποιων proprietary ιδιοτήτων των δύο browsers οι οποίες δεν αναγνωρίζονται παρά μόνο από τον συγκεκριμένο browser που τις ενσωματώνει. Από την μία για τον ΙΕ με έναν συνδυασμό shadow filters και για τον Firefox με διαφορετικά χρώματα border μέσω των ιδιοτήτων -moz-border-x-colors (όπου x=top,right,bottom,left).