Ιδέες για clickable divs

[rafinos]

Καλησπέρα παιδιά!

 

Μπορείτε να μου πείτε ιδέες για το πως μπορεί στην παρακάτω εικόνα τα "τετραγωνάκια" με τα νούμερα να είναι ξεκάθαρο πως είναι "clickable";

 

Ορίστε και το css τις κάθε γραμμής και του κάθε "τετραγώνου". 

.row{
   width: 100%;
   height: 10%;
   margin: 0 auto;
   padding: 0;
   display: table;
}
		
.cell{
   width: 10%;
   height: 100%;
   text-align: center;
   display: table-cell;
   vertical-align: middle;
   background-color: #3F3250;
   border: 1px solid #fff;
}

[dominotrix]

Μπορείς να κανεις λιγο το design πιο flat, με το να λεπταίνεις το border.

 

Επίσης, όλα τα κουτακια θα είναι clickable; Αν ναι τότε μπορείς να βάλεις στο hover να έχουνε ένα απαλο faded background-color change και φυσικα pointer cursor. 

 

Αν μονο μερικα κουτακια ειναι clickable τοτε δως τους μια αλλαγη στο φοντο τους ειτε πιο σκουρη ειτε πιο ανοιχτη παραλλαγη απο αυτο το χρωμα που εχεις τωρα.

 

Μπορει να κανει και ενα μικρο animation το κειμενο πχ να φευγει προς τα κατω, να κρυβεται και να πεφτει απο επανω. 

 

Ψαξε στο dribble αν θελεις να παρεις λιγο inspiration.

 

Τέλος, μια μικρη επεξήγηση κατω με δεξια στοιχιση και ισως italics να λεει με μικρη γραμματοσειρα "επιλεξτε αριθμό" ή κατι που να βγαζει νοημα στο τι θελεις να κανει ο χρηστης.

[XPHSTOS_]

Για αρχή: 
 

.cell {
  cursor: pointer;
}

Μετά δες κάτι τέτοιο.
Είχε πάρει το μάτι μου μερικά calculator.
1)  Site: calc1
2)  Site: calc2

[rafinos]

Πιο πολύ με ενδιαφέρει η όψη τους παρά η συμπεριφορά τους, καθώς απευθύνεται καθαρά σε touch οθόνες. Εννοώ ότι θέλω με το που τα βλέπει κάποιος θα θεωρεί πως πατιούνται ή κάτι τέτοιο.

[XPHSTOS_]

Στο 1ο παράδειγμα μου ειναι εμφανές ότι πρόκειται για κουμπιά!
Δοκίμασε να αντιγράψεις κάτι τέτοιο.

Εναλλακτικά, βάλε ένα διακριτικό μήνυμα και στην όψη μπορείς να τα κάνεις σαν τον dialer των android ή το calculator.
Πάρε ιδέες από τα ήδη υπάρχουσες εφαρμογές, μη πας να ανακαλύψεις τον τροχό

[rafinos]

Επειδή όπως βλέπεται χρησιμοποιώ το "display: table-cell", ώστε να έχω vertical-align δημιουργείται πρόβλημα καθώς επιθυμώ σε κάθε κελί να έχω ένα κάποιο padding ώστε να έχω ένα πιο μαζεμένο div μέσα σε αυτό, αλλά να είναι και εκείνο στοιχισμένο με κάθετη στοίχιση.

 

Το css πλέον είναι έτσι

.row{
   width: 100%;
   height: 10%;
   margin: 0 auto;
   padding: 0;
   display: table;
}
		
.cell{
   width: 10%;
   height: 100%;
   text-align: center;
   display: table-cell;
   vertical-align: middle;
   background-color: #3F3250;
   padding: 1%;
}

.inside{
   height: 100%;
   width: 100%;
   border: 1px solid rgba(219, 205, 184, 0.3);
   border-radius: 5px;
}

Πως μπορώ στο inside να έχω vertical-align: middle;

 

Δεν είναι ότι καταστάλαξα σίγουρα πως θα είναι έτσι τα "κουμπιά" απλά δοκιμές κάνω.

 

Ορίστε και ένα jsfiddle: https://jsfiddle.net/ezc7k6o9/1/

Επεξ/σία 6 Αυγούστου 2017 από rafinos

[tzotzosgr]

Καλησπέρα,

στο έφτιαξα δες εδώ https://jsfiddle.net/0p9Lfcex/1/  

[rafinos]

Σας ευχαριστώ πάρα πολύ για το χρόνο σας παιδιά!

 

Η λύση του @tzotzosgr ήταν αυτό που έψαχνα. 

 

Στην εικόνα το τελικό αποτέλεσμα.