Button με εικονίδιο και κείμενο γίνεται; Βεβαίως και γίνεται!

…και όχι, χωρίς να καταφύγετε σε λύσεις του στυλ “div που μοιάζει με button”.

Σκεφτόμουν ότι κάτι τέτοιο είναι πολύ στοιχειώδες για τη θεματολογία που θα ήθελα να έχει το blog, όμως προς μεγάλη μου έκπληξη παρατηρώ ότι αρκετοί συνάδελφοι δεν το γνωρίζουν, και θεωρούν ότι button μπορούν να δημιουργήσουν μόνο με το κλασσικό <input type=”button/submit/image” /> τρόπο.

Υπάρχει ωστόσο και ένα άλλο tag, το <button /> tag, το οποίο είναι ισοδύναμο όσον αφορά τη λειτουργικότητα με το <input type=”button” />, αλλά επιτρέπει πολλά περισσότερα όσον αφορά την εμφάνιση. Καταρχάς, μπορείτε να βάλετε μέσα ένα <img /> tag και να έχετε αυτομάτως ένα κουμπί και με κείμενο, και με το εικονίδιο σας.

Θα μπορούσε κάποιος να πει “γιατί δεν το κάνεις βάζοντας ως background image σε ένα απλό <input /> το εικονίδιο που θες, ώστε να είναι separated το markup από το presentation όπως ορίζουν τα web standards;” και θα είχε δίκιο, όχι όμως για ολες τις περιπτώσεις.

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).