Δημιουργήστε ψευδαίσθηση 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;

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

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, αλλά μέχρι στιγμής δεν το έχω καταφέρει. Ο λόγος;

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

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

Λευκά περιθώρια και 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).

Κρύψτε κάποια κομμάτια του site από όσους έχουν τη javascript απενεργοποιημένη

Όλοι ξέρουμε το <noscript></noscript> tag, που μας επιτρέπει να εμφανίζουμε κάποια κομμάτια του site μόνο σε όσους έχουν τη javascript απενεργοποιημένη. Ουσιαστικά λειτουργεί σαν ένα if(user has javascript disabled) { … }. Τι γίνεται όμως όταν θέλουμε να κάνουμε το αντίθετο; Δηλαδή ένα αντίστοιχο του if(user has javascript enabled) { … } ;

Συνήθως απλά βάζουμε display:none στο style attribute του εν λόγω στοιχείου και αμέσως μετά ή στο onload event της σελίδας το επανεμφανίζουμε με javascript. Αυτός είναι και ο XHTML valid τρόπος, οπότε αν σας ενδιαφέρει πολύ το validation, μην διαβάσετε παρακάτω, διότι δεν περνάει το validation ούτε σε strict doctype, ούτε καν σε transitional.

Είχα σκεφτεί παλιότερα έναν πολύ πιο ελαφρύ και εύκολο τρόπο για να πετυχαίνουμε το ίδιο πράγμα, αν και με λύπη μου διαπίστωσα πρόσφατα ότι δεν περνάει το validation.