Δημιουργήστε ψευδαίσθηση clicked σε image buttons και css-styled buttons

Όπως οι περισσότεροι γνωρίζετε, όταν προσπαθούμε να κάνουμε κάποιο κουμπί σε μια φόρμα πιο όμορφο, είτε αντικαθιστώντας το με εικόνα, είτε ομορφαίνοντας το με css, σε αρκετούς browsers (πχ Firefox) δεν φαίνεται “πατημένο” κατά το κλικ, κάτι που ίσως μπερδεύει τους χρήστες. Στο παρόν post θα επιχειρήσουμε να άρουμε όσο είναι δυνατόν αυτό το “πρόβλημα”, χρησιμοποιώντας css για να δώσουμε την ψευδαίσθηση ότι το εκάστοτε κουμπί (ή το κείμενο του) μετακινείται κατά 1px κάτω δεξιά όταν πατιέται.

Τα 10 συνηθέστερα design mistakes που βλέπω σε -όμορφα κατά τα άλλα- sites

Βλέπω συχνά πολύ όμορφα ή τουλάχιστον αξιοπρεπή σχεδιασμού sites, τα οποία ωστόσο καταστρέφονται οπτικά από ορισμένα απλά και εύκολα να αποφευχθούν λάθη. Θα επιχειρήσω εδώ να κάνω μια λίστα με όσα προσωπικά βλέπω συχνότερα, χωρίς φυσικά να υπονοώ ότι η λίστα είναι πλήρης. Επίσης ο σκοπός της λίστας δεν είναι να τονίσει τα άπειρα πραγματικά λάθη που υπάρχουν γενικά στο web αλλά αυτά που έχω δει να καταστρέφουν ένα κατά τα άλλα καλό design. Επίσης δεν θα αναφερθώ σε λειτουργικα λάθη και bad code practices, αλλά μόνο όσα αντιλαμβάνεται ο τελικός χρήστης. Η σειρά τους δεν είναι σειρά προτεραιότητας ή συχνότητας, αλλά η σειρά με την οποία τα θυμήθηκα.