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

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

Αρχίγραμμα με CSS

Υπάρχει ένα css pseudo-element που δεν είναι ευρέως γνωστό, παρ,ότι πολύ χρήσιμο: To :first-letter. Στην προκειμένη περίπτωση μας σώζει από extra non-semantic markup (και server-side κώδικα, στην περίπτωση δυναμικής σελίδας) για να δημιουργήσουμε αρχίγραμμα σε κάποια κείμενα. Έστω πχ ότι το εν λόγω κείμενο βρίσκεται μέσα σε ένα div με class “content”. O css selector μας θα είχε ως εξής:

div.content:first-letter

Το βασικό για τη δημιουργία αρχιγράμματος είναι οι δύο παρακάτω δηλώσεις:

display:block;
float:left;

Αυτές του δίνουν τη δομή που θέλουμε. Συνήθως χρειάζεται και