Σε ένα παλιότερο άρθρο είδαμε πως θα αλλάξουμε την πλευρική μπάρα κύλισης (scrollbar) στο blog ή το site μας (μπορείτε να ανατρέξετε εδώ). Σήμερα θα σας παρουσιάσω άλλα 17 παραδείγματα που μπορείτε να εφαρμόσετε στο δικό σας blog ή site σας, έτσι ώστε να δείχνει ομορφότερο.
Όπως λοιπόν είχα αναφέρει και την προηγούμενη φορά, θα κάνουμε χρήση του στυλ -webkit-scrollbar το οποίο όμως δεν το υποστηρίζουν δυστυχώς όλοι οι browsers. Θα το βλέπουν οι επισκέπτες του blog σας μόνο εάν χρησιμοποιούν Google Chrome ή Safari. Δεν δουλεύει ακόμα σε Firefox και Internet Explorer αλλά δεν υπάρχει πρόβλημα γιατί τότε ο κώδικας απλά παρακάμπτεται.
Στα παρακάτω παραδείγματα για όσους θέλουν να τα βάλουν στο site τους αρκεί να επικολλήσουν τον κώδικα μέσα στο CSS τους. Για όσους χρησιμοποιούν τον blogger, από το αριστερό μενού του Blogger επιλέγουμε το [Πρότυπο] και [επεξεργασία HTML]
Με Ctrl + F αναζητούμε το ]]></b:skin> και ακριβώς από πάνω του επικολλάμε τον κώδικα. [Αποθήκευση] και τέλος.
Για να μην καθυστερεί το blog μου, παρακάτω θα σας παρουσιάσω ένα από τα παράδειγμα και τα υπόλοιπα θα τα δείτε στο tetsidemo.blogspot.com.
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;}
::-webkit-scrollbar{
width: 10px;
background-color: #F5F5F5;}
::-webkit-scrollbar-thumb{
background-color: #F90;
background-image: -webkit-linear-gradient(
45deg,rgba(255, 255, 255, .2) 25%,transparent 25%,
transparent 50%,rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,transparent 75%,transparent)}
Δείτε και τα υπόλοιπα παραδείγματα
